WordPress block editor

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.

In this article, we’re going to talk about how you can use the default Block Editor setup efficiently. Then we’ll teach you how to build on it by adding new blocks, both using plugins, and making your own. Let’s talk blocks!

🔍 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:

Placing blocks using the editor.

You can also use columns for better control of the location of each element:

Using the column system.

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:

Some of the block editor's common elements.

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:

Some of the block editor's layout elements.

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 the blocks that come with the Atomic Blocks plugin.

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.

Key Features:

  • Adds 11 new blocks to the editor.
  • Lets you fully customize the style and content of each new block.

2. Stackable

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:

Some of the blocks that Stackable adds to the editor.

However, Stackable also offers more advanced blocks to play with. Some of our favorites include Team Member and Pricing Box sections:

The Pricing Box block in action.

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.

Key Features:

  • 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:

Otter blocks

You can also insert templates from the Section block:

Otter templates

Key Features:

  • 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:

Configuring a new block using Block Lab,

For each block, you can add almost as many custom fields as you want, choosing from a broad range of presets:

Adding custom fields to your new block.

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:

Adding fields to your custom block.

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:

Tweaking your block template.

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!

⌛ Conclusion

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.

However, to get the most out of the WordPress Block Editor, you’ll want to figure out how to add new items to it. You can do this using plugins such as Atomic Blocks, Stackable, and Gutenberg Blocks and Template Library by Otter.

If you’re up for it, you can even create custom blocks with tools such as Block Lab and Lazy Blocks.

Do you have any questions about how to use the WordPress Block Editor? Let’s talk about them in the comments section below!

Free guide

5 Essential Tips to Speed Up
Your WordPress Site

Reduce your loading time by even 50-80%
just by following simple tips.

Download free guide