Gutenberg (aka the WordPress block editor) was launched in 2018, together with the major WordPress 5.0 release. This change ushered in a new WordPress era, where the old site editing system was replaced by a modern one. The backbone of this block system is the Gutenberg blocks themselves. If you want to get the most out of them – which is presumably why you’re reading this – then you’re in the right place.
First and foremost, Gutenberg blocks revolutionized WordPress by allowing users to create content in a much more visual way compared to the previous TinyMCE editor. In many ways, it made WordPress more approachable to beginners, and provided a much needed middle ground between third party page builders and WordPress itself.
It accomplished this by providing a library of pre-built elements, better known as Gutenberg blocks, or just “blocks” for short. Each of these blocks can be added to a page or a post and then be further customized. Blocks are able to provide the basic components of a webpage, such as text and images, but they also open the door to more advanced features, such as buttons and tables.
In this guide, we’re going to dive deeper into the Gutenberg blocks system and show you how to use it in ⏩ three easy steps. Along the way, we’ll introduce you to some of the most useful blocks included in the Gutenberg editor.
We’ll finish up by sharing ⏩ two useful block extension plugins to help you get the most out of it. Let’s get to work!
How to use Gutenberg blocks to create a WordPress post (in 3 steps)
Assuming you’ve launched your website after the release of WordPress 5.0 or that you hopefully updated it since 5.0 was released, then the Gutenberg editor should be the default editing option on your backend.
Once you’re up-to-date or if you’re already there, then you can move ahead with this guide and learn how to apply the Gutenberg blocks system.
We’re going to illustrate the editor’s key features by walking you through what it’s like to create a basic WordPress post using Gutenberg blocks. However, you can use the same approach no matter what type of content you’re creating with the block editor.
Step 1: Add a block to your post
The first thing you’ll want to do is give your post a title, using the dedicated field at the top of the editor:
This works exactly the same way as it did in the classic editor. After that, however, things start to change.
If you click on the area directly below your post’s title, you’ll see an icon with the plus sign.
The Plus icon lets you select Gutenberg blocks and add them to your post. For now, click on the Plus icon, and you’ll see a new menu:
This menu lists out all the Gutenberg blocks that the editor currently includes. There’s a section with a number of organized categories of blocks, a button that lets you see all the available blocks, and even a search bar to help you find what you need quickly.
To add a block to your post, you just have to find and click on it. Let’s start simple, with a Paragraph block. Place the block in your post, then move on to the next step.
Step 2: Customize your block
When you add a paragraph block, it doesn’t look like much right away. However, once you begin to start typing into the field, new options will appear:
You’ll see some basic formatting settings, such as alignment, bold, and italics. In addition, check out the right-hand sidebar of the editor screen:
There, you’ll find more block-specific options. In this case, you can change the text’s font size and color, add a drop cap, and even include some custom CSS (in the Advanced menu). Any changes you make, either here or within the block itself, will be immediately visible.
Each one of the Gutenberg blocks on offer comes with its own unique settings.
If you’re still with me, hit Enter on your keyboard. This will add a new block below your paragraph block. Let’s add an image block now by using that same Plus sign:
As you can see, you’re able to upload an image or add one that’s already in your Media Library. You can edit the image, alter its alignment, and add CSS in the sidebar.
There’s no doubt that you’ll use plenty of paragraph and image blocks. However, Gutenberg has more to offer. There are also a number of Gutenberg blocks that offer options that were never available in the previous classic editor.
For instance, you can add a Button block to your post:
This creates a clickable button for visitors to interact with. You can edit the text of the button itself, and include the URL it will link to right below:
By selecting the icon in the top-left corner of the block, you can change the style of your button:
In addition, you can alter both the background and text colors in the sidebar. While this isn’t a huge range of options, it’s enough to create a handy customized button, which you can use to encourage visitors to sign up for an email list, buy a product, or whatever else strikes your fancy.
Step 3: Put the finishing touches on your post
Once you’ve added a few blocks, you may find yourself wanting to make some changes. Fortunately, Gutenberg blocks are pretty flexible in letting you modify your content’s layout.
For example, if you want to delete a block, you can click on it, and from the horizontal pop-up bar select the three dots on the far right. Another vertical pop-up menu will appear. Scroll down to the bottom of it and click on Remove + [name of block]. In this case we’re going to remove a paragraph:
By clicking on a block, you can use the up and down arrows to rearrange your blocks at will. You can also click on the six dots to the left to use the drag-and-drop function and move your block to somewhere else on the page:
It’s also worth noting that you can create multi-column layouts. This is an exciting feature, which you can access by placing a Columns block in your post:
This lets you create up to six side-by-side columns, and place whatever blocks you’d like within each one. It’s an option that offers a lot of potential for creating unique layouts.
Finally, it’s important to note you still have access to post-wide (or page-wide) settings as well. In the right-hand sidebar, click on the Post tab to find them:
Here, you’ll find most of the options you’re familiar with. You can publish the post, set an author, choose categories and tags, add a featured image, and so on. You can even modify comments settings in the Discussion menu. However, you won’t need to save your content, as it will auto-save at frequent intervals while you’re working.
Step 4 and beyond
This should give you a solid foundation to begin using the Gutenberg blocks system! It’s quick to pick up, but there are a lot more options than we’ve covered here. This was meant as a “get started” tutorial and we encourage you to continue experimenting with the various Gutenberg blocks available and become comfortable with the possibilities they open up for your website.
This is especially relevant to those of you who have traditionally relied on third party page builders in the past because of the previous classic editor’s limitations. Once you get comfortable with Gutenberg blocks and add some extension plugins (more on that below), you’ll find that you can achieve a lot of the same aesthetics with blocks that you are able to do with tools such as Elementor or Divi Builder.
Using plugins to add new Gutenberg blocks to your editing arsenal 🔌
One of the most powerful things about Gutenberg is that you can use plugins to add all kinds of new blocks to the editor. In fact, it’s highly probable that some of your favorite plugins provide their own custom blocks.
Beyond that, you can also find tons of plugins that are solely focused on adding new blocks. For example, the Otter Blocks plugin gives you over 30 new blocks, including:
There are lots of other Gutenberg block plugins that you can find in the official WordPress repository as well.
For example, another block extension plugin worth mentioning is Stackable. It’s one of the most highly reviewed block plugins in the WordPress repository and offers dozens of additional Gutenberg blocks. It also comes packed with block layouts, UI kits, and other design elements.
Closing thoughts on Gutenberg blocks 💭
When WordPress 5.0 was released years ago, Gutenberg became the default editor for all WordPress sites. Therefore it’s absolutely imperative to understand how Gutenberg blocks function in order to get the most out of them.
Fortunately, creating content in Gutenberg is very simple. You just have to:
And if you want even more blocks to use in your designs, consider adding one of the many Gutenberg blocks plugins available in the WordPress repository.
Do you have any questions about how Gutenberg blocks work, or are there any options you’d like to see added? Share your thoughts in the comments section below!