If you’ve been using WordPress for a while now, you’re probably already familiar with the new WordPress Block Editor. It’s a powerful tool, and an intuitive system. However, since we’re talking about WordPress, you know there’s always room for growth if you don’t mind making a few tweaks.
To get the most out of the Block Editor, you’ll want to learn how to add new elements to it. You can do this with plugins or even by creating your own custom blocks, so you have plenty of options.
🔍 A quick overview of the WordPress Block Editor
Before you start using the WordPress Block Editor, you’ll want to make sure your theme plays nicely with it. While the Block Editor works with any theme at a basic level, having a theme with built-in compatibility lets you take advantage of all the new functionality.
The core of the new editor experience is based on a simple ‘block’ system. Your pages are divided into rows, and you can place any block you want on each one:
You can also use columns for better control of the location of each element:
This system should feel remarkably familiar if you’ve ever used a page builder plugin. The overall result is that the WordPress page building experience is now a lot more visual.
To get the most out of the editor, you’ll want to get acquainted with all of the default elements it includes. You have plenty of familiar options here, including lists, paragraphs, quotes, and more:
If you’re getting used to the new system, there’s a particular category of blocks you should pay attention to, called Layout Elements. Using these blocks, you can add columns to your pages, as well as Read More elements, separators, page breaks, and spacers:
By combining these, you’ll have full control over your page and post layouts, so play around with them until you feel comfortable. Then, when you’re fully acquainted with the default blocks, it’s time to throw some new elements into the mix.
🔌 Three plugins to add new blocks to the WordPress editor
As soon as the Block Editor came onto the WordPress community’s radar, it didn’t take long for developers to start tinkering with it. Even though it hasn’t been too long since its launch, there are already plenty of plugins you can use to add new blocks.
We’ve collected some of our favorite block plugins here, but these are three of the standouts…
1. Atomic Blocks
Atomic Blocks is the most popular WordPress block plugin so far. It adds 11 new blocks to the editor, which may not sound like much, but its selection opens up a lot of exciting design possibilities.
As soon as you activate the Atomic Blocks plugin, you’ll see a new tab when adding a block:
Some of these need no explanation, such as AB Button and AB Testimonial. However, others such as AB Post Grid and AB Spacer are pretty fun to use, and offer ways to alter the page layout not currently possible with the default block collection.
- Adds 11 new blocks to the editor.
- Lets you fully customize the style and content of each new block.
Stackable adds over 20 new blocks to the WordPress editor, making it the best choice if you want a lot of new elements to play with. Among those blocks, you have several simple options, such as buttons, dividers, and containers:
However, Stackable also offers more advanced blocks to play with. Some of our favorites include Team Member and Pricing Box sections:
It’s also worth noting Stackable enables you to pick and choose which blocks you want to add to the editor. This means you can remove options you don’t need, and makes finding relevant blocks easier.
- Adds over 20 new options to the WordPress Block Editor.
- Enables you to customize each block using a wealth of options.
- Lets you enable and disable blocks from the editor.
3. Gutenberg Blocks and Template Library by Otter
Gutenberg Blocks and Template Library by Otter is our own plugin that adds both new blocks for you to play with, as well as premade templates built with the WordPress Block Editor that you can easily import into your site.
Once you install and activate the plugin, you can start using the blocks from the new Otter section in the Add Block interface:
You can also insert templates from the Section block:
- Adds over 12 new elements to the WordPress Block Editor.
- Includes Gutenberg-compatible templates that you can insert right from the Block Editor.
🏗️ How to create custom blocks (two plugins to help you get started)
When it comes to creating new blocks, you can either take the manual approach or use plugins. The former gives you more control, but does require some development experience. However, it’s the latter we’ll discuss now. This section will focus on two tools that enable you to put together simple custom blocks with ease.
1. Block Lab
When you boil it down, blocks are basically collections of custom fields. The difference lies in what fields and types of values you use for each block. With Block Lab, you can add new blocks to the editor and assign a category to them:
For each block, you can add almost as many custom fields as you want, choosing from a broad range of presets:
However, although the plugin does most of the heavy lifting, you’ll still need to know how to put together simple HTML templates to customize each block’s layout. Here’s a guide that outlines the process, so you have an idea of what to expect.
2. Lazy Blocks
Overall, the Lazy Blocks experience is pretty similar to that of Block Labs. You can put together custom blocks using predetermined fields, and arrange them in practically any order you want:
The primary difference here is that Lazy Blocks enables you to modify your block’s template from within the dashboard, so you don’t have to use a text editor:
It’s a different flavor, but not necessarily superior to Block Labs, so feel free to go with whichever of the two approaches you prefer!
The WordPress Block Editor is a significant change from the ‘classic’ way of doing things. However, this change brings with it a lot of exciting opportunities. The block system is pretty easy to use, and the selection of elements it includes out of the box is nothing to scoff at.
Do you have any questions about how to use the WordPress Block Editor? Let’s talk about them in the comments section below!