I know some folks are still yearning for the simplicity of the classic WordPress editor and maybe even the use of widgets to create containers to put bits of content in (I always found widgets a bit awkward and restrictive depending on the theme).
With the new “Gutenberg” block editor, I’m slowly discovering a new kind of simplicity that restricts the number of external plugins I have to use to create different content layouts. I can use special layouts to put structures like testimonials, team members, media and text combinations or product/service descriptions directly onto a page. Granted there are plugins with fancier features and premium goodies, but I’m liking the simplicity of these layout alternatives, which can be simply added to the page or post itself.
Atomic Blocks
In order to take advantage of the new WordPress block editor functionality and extend it beyond the very basics, we do still need one plugin. It’s called Atomic Blocks, and it manifests in a couple of areas in the editor interface. After you install and activate Atomic Blocks, a whole new collection of blocks appears in the basic block library.
In the Block Library
The basic block library is what you access whenever you hit the plus button. WordPress has some basic blocks in this library, and other plugins have added their own block functionality. Just hit the encircled + in the top left of the WordPress editor for a page or post, or where they appear at the top or bottom of another block when you move your cursor around.
The preset blocks are organized into categories (not always that intuitive, by the way, so look around), and the ones you used recently get into the “Most used” section automatically. When WordPress first introduced the block editor, there weren’t many of these, but plugin developers have created their own to make it easier to insert functions (like Ninja Forms, for example). By the way, I created the above side-by-side screenshot display using a block called . . . “Columns”! I’ve been struggling to build tables (there’s a block for a traditional table with a header row, also) for several years with the classic WordPress editor (even the plugins weren’t that great). It’s so nice to have a basic functionality like this more easily and freely available, and also able to adjust to different screen sizes.
Atomic Blocks in the Library
Here you can see the AB Layouts function button (which is also at the top of the editor screen—more on that in a minute), along with a number of individual functional blocks. Note that each of these is focused on an individual structure or function; for example, the AB Testimonial just gives you an individual block to put one testimonial in—it doesn’t structure multiple testimonials into a group display or slide show.
This set of block functions allows you to build truly customized layouts, starting with the AB Container and then adding other blocks inside it. So you can build your own testimonial layout if you want to explore AB Blocks’ nesting capabilities. I also like being able to make buttons automatically. I used to have to do my own HTML to create button shapes and sizes.
AB Layouts Selector
Layouts allow you to let the AB people build some common nested groups of blocks into preset layouts (they keep adding more when they update the plugin, I’ve noticed). Just choose either the Layouts button on the top bar of the WordPress editor screen, or hit the plus symbol and choose AB Layouts from the Atomic Blocks section. The Layout Selector has three tabs: Sections, Layouts, and Favorites. Favorites is empty until you click on the heart at the bottom level of a layout, when that layout will be added. Below is a three-image overview of the Sections tab first, then more specialized layouts in the Layouts tab.
Each of these layouts has settings that show up in the right panel of the WordPress editor to help you customize the functions available (like colors, column sizes, etc.). I like this system because it helps me learn how to make my own custom layouts and provides some more common possibilities without having to re-invent the wheel.
I have noticed that one can get a bit lost in the “nest” of blocks-within-blocks where clicking in just the right spot to get the controls of a block becomes difficult. Keep in mind that you can always go to a specific level in a nested group of blocks by clicking on that level in the breadcrumb trail at the bottom of the WordPress editor.
In the image, I selected an individual image block in the Columns block. By clicking on Column or Columns, I could move out to see the top left controls and right pane controls for each level.
What About Page Builder Themes?
Page builder themes are cool. They’ve been around as an alternative for the original very basic WordPress editor for a number of years. They give you a set of elements (like the blocks here) that are already set to look like the way the WordPress post or page will look when you view it. More intuitive, yes, but often with more restrictions (only certain sizes and shapes to fit into a group of predetermined layouts). The better ones are also not free of charge.
I don’t use free themes or page builders in any case because I like the clean code and layouts of premium theme creators. I use Studiopress themes. They have made a commitment to work with the basic WordPress interface without creating a true page builder environment. Again, I like the simplicity of their approach.
But you may not, and there are many other site designers who want something with its own page builder interface. I’ve heard lots of good things about Elegant Themes, and especially their Divi theme, which a lot of professional WordPress site designers use. Pricing is similar to what I invested in Studiopress themes (over $200US). Great if you are designing as a business and have lots of sites to create.
If you only have one site of your own to take care of, though, that kind of investment may not be practical. So if you just want to play with all the possibilities in the WordPress block editor, then AB Blocks and Layouts are an extremely cost-effective way to access block functionality. I hope my little intro has allowed you to get started if you lean in the site DIY direction.
Of course if you’d like to invest in an individual tutorial with me or want me to build your site, I’d be happy to oblige. Just let me know!