WordPress block editor

If you’ve been using WordPress for a while now, you’re probably already familiar with the WordPress Block Editor (also known as the Gutenberg Editor). It’s a powerful tool and an intuitive system. However, it does have room for growth if you use the right tools and don’t mind making a few tweaks – which is exactly what we’re going to teach you in this WordPress Gutenberg tutorial.

To get the most out of the Block Editor, you’ll first want to install a reputable block theme that supports Full Site Editing, or FSE for short (more on this in a moment). This will allow you to unlock the full capabilities of the Gutenberg system, which has evolved quite a bit, even from only a year ago.

Once you have that locked in, you’ll want to learn the basics. This means how to add blocks and columns (and remove them), and how to use block patterns to save yourself a lot of time.

In this article, we’re going to teach you how to do all of the above, broken down as follows:

Let’s talk blocks!

Choose a WordPress block theme 🔍

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 block theme with built-in compatibility, which now also includes Full Site Editing (FSE), lets you take advantage of all of its functionality.

If you want a suggestion, we recommend Raft, which is currently the most popular block theme in the entire WordPress repository. It also happens to be the brainchild of our very own talented developers here at Themeisle, so aside from the public validation, we can also vouch for its awesomeness with confidence.

We’ll be using Raft for the remainder of this Block Editor tutorial.

WordPress Block Editor tutorial 🔍

So, as the name implies, the core of the WordPress Block Editor is built on the concept of a simple “block” system. There’s quite a lot you can do with this system, but we’re going to start with the following:

Adding new blocks to the WordPress Block Editor

Pages and posts are divided into rows, and you can place any block you want on each one. There are two main ways to do it and both are extremely easy to do.

The first method to add a block is done by clicking the plus + sign on the top left of the screen. This automatically opens up a drop down sidebar menu, where you can either scroll through your available blocks, or use a search bar to type in the name of a specific block you have in mind:

Placing blocks in the WordPress Block Editor using the first method.

The second method of adding a block is to click the plus + sign within the page or post itself. That will also open up a drop down menu, albeit a smaller one. It has a similar search bar so you can quickly find the block you’re looking for if you know the name.

Adding blocks in the WordPress Block Editor using the second method.

Adding columns inside of the WordPress Block Editor

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

Using the column system in the WordPress Block Editor.

Once you select the column block, you’ll be able to choose the layout split of your columns:

Choosing the layout of a column block inside the Block Editor.

From there it’s as intuitive and simple as adding the column block itself was. The two columns serve as containers for you to add whatever other blocks you want. Just click on the plus + sign inside the column:

Adding a 50/50 column block inside the WordPress Block Editor.

Below is what a crude, unfinished layout looks like if you add a paragraph block to the left column, and an image block to the right column:

A simple 50/50 column layout inside the WordPress Block Editor.

Okay, let’s say we changed our mind and didn’t want an image block in the right column anymore and instead wanted to put a different block. How would we do that?

Deleting blocks inside of the WordPress Block Editor

To remove any block, click on it to highlight it. Then click the three dots on the far right of the popup menu. This will open up another drop down menu. Scroll to the very bottom of it and the last option will always be to delete the given block. Note that it will say Remove + the specific name of the block:

Delete a block inside the WordPress Block Editor.

What if we decide that we not only don’t like the image block, but we want to delete the entire 50/50 column layout altogether.

Do we have to delete every one of the blocks, one-by-one?

Nope. We do not.

The WordPress Block Editor already thought of that. You can delete an entire column layout with other blocks inside of the columns. There’s no need to fiddle around deleting individual blocks:

Delete a column layout inside the WordPress Block Editor.

This block system should feel remarkably familiar if you’ve ever used a page builder plugin. The overall result is that the page-building experience is a lot more visual.

To get the most out of the WordPress Block 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.

In addition, you’ll want to explore another feature, which is an enormous time saver. That feature is referred to as block patterns, or just patterns for short, and it’s the next thing we’ll be covering in our Gutenberg tutorial.

Using block patterns in the WordPress Block Editor

Block patterns are essentially pre-built templates that you can insert into your pages or posts and then tweak to your liking. They typically include common sections that you’d find across a variety of websites.

So things like testimonials, quotes, calls to action, pricing tables, team member bios, etc. Their appearance will be unique to the block theme that you’re using, but you can always use the Full Site Editor (FSE) to edit any of these block pattern templates or even make your own from scratch.

Accessing them can also be done in more than one way.

Method one

Let’s revisit our column block example to demonstrate the first method. If you recall this image from earlier, you may have noticed that below the simple column block, there were some fancy column layouts:

Column block patterns inside the Block Editor.

These layouts are actually pre-built block patterns unique to the Raft theme.

If you click on Browse All, it’ll open up a sidebar menu that will allow you to explore lots of different ones and insert them into your page or post with just a click:

Using the column system in the WordPress Block Editor.

If you didn’t notice already, all of the ones in the screenshot above have some form of column layout aspect to them. That’s because we accessed them by specifically searching for columns.

But what if we’re interested in other block patterns that might not be in a column layout, or just browsing through the overall library of available patterns?

Well, as with everything else inside the WordPress Block Editor, that too is very easy to do.

Method two

Let’s do another round of time travel here and revisit the plus + sign at the top left of the page or post. If you recall, that was the very first thing we covered in this Gutenberg block tutorial. When we clicked on it earlier, we used it to add a new block to our page or post, but right next to the Blocks part of that drop down menu is another option – Patterns!

Click Patterns and you’ll be transported to a whole new world:

Accessing block patterns inside the WordPress Block Editor.

As you can see, even at quick glance, there are all sorts of categories to choose from. Again, these will be specific to the block theme that you choose, but overall, having access to these patterns is a game changer. Instead of spending an hour (or more) building your own CTA from scratch, you can just browse through the Call to Action block patterns and pick one that you like. Then customize it a little bit and you’re ready to go.

Feel free to browse through the block patterns at your leisure. Once you feel comfortable with the general concepts you’ve learned thus far in the tutorial, you can throw some additional elements into the mix via Gutenberg plugins.

Add new blocks to the WordPress Editor using three plugins 🔌

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 – and that was quite a while ago at this point. In practice, this means that there are plenty of plugins you can use to add new blocks to the default Block Editor choices.

Since we’ve already covered a lot of ground in this Gutenberg editor tutorial, we’re not going to share a comprehensive list of every useful block plugin, but below are three of the standouts that we think are worthy of your attention:

1. Ultimate Blocks

Ultimate Blocks is one of the most popular Gutenberg plugins for adding new blocks to the WordPress Block Editor. It introduces 22 new elements, including a call to action, testimonial, and click-to-tweet block.

It’s super easy to use this plugin. Once you’ve installed and activated Ultimate Blocks, open up a new post or page with the Block Editor. Click on the plus + sign to add a new block, type “ultimate” into the search bar, and hit Browse all. You should now see all the new blocks in the left-hand menu:

Ultimate Blocks extends the WordPress Block Editor

Simply click on the block you want to use, and it will be added to the page. Then, you can drag it into position and adjust its settings. Here’s what an Ultimate Blocks table of contents looks like in action:

Ultimate Blocks table of contents

By heading to Ultimate Blocks in your WordPress dashboard, you can also choose to enable or disable particular blocks by toggling them on or off:

Ultimate Blocks toggle

Key Features:

  • Choose from 22 different blocks, including a content filter, progress bar, and social sharing buttons.
  • Toggle blocks on and off to declutter your editing interface.

2. Otter Blocks

Otter Blocks is our plugin that adds 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.

If you end up using the Raft theme, which is what we’ve used throughout this tutorial, then you’ll already have it bundled in because the theme prompts you to install it as part of the set up.

If you decide to use a different block theme, you can still take advantage of Otter Blocks by installing it and activating it like any other plugin. You can then start using the blocks from the new Otter section in the Add Block interface:

Otter Blocks extends the WordPress Block Editor

Key Features:

  • Adds over 30 new elements to the WordPress Block Editor, including image sliders, accordions, and maps.
  • Includes Gutenberg-compatible templates that you can insert right from the Block Editor.

3. 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 WordPress Block 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 that 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.
💡 Check out our full list of the best block plugins for even more ways you can expand the Gutenberg editor.

How to create custom blocks (one handy plugin 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 a tool that enables you to put together simple custom blocks with ease!

Lazy Blocks

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 Lazy Blocks, 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.

However, you will need some knowledge of basic HTML. We also recommend checking out our guide to adding HTML to WordPress for more guidance!

Final thoughts on the WordPress Block Editor ⌛

Hopefully after reading through this WordPress Block Editor tutorial you now have a good idea on how to use Gutenberg. It’s a significant change from the ‘classic’ way of doing things. However, this brings 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. If you use a well-built block theme like Raft to go with it, then you’ll have plenty to keep you busy.

If you want to get even more out of the WordPress Block Editor, you can always add additional features to it by using Gutenberg plugins such as Ultimate Blocks, Stackable, and Otter Blocks.

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

Was this Gutenberg WordPress tutorial helpful? Do you have any questions? Let’s talk about them in the comments section below!

Free guide

4 Essential Steps to Speed Up
Your WordPress Website

Follow the simple steps in our 4-part mini series
and reduce your loading times by 50-80%. 🚀

Free Access

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!