Gutenberg Blocks

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.

If you do have an older site and for whatever reason have not updated it in a few years, then you’ll definitely want to update WordPress first. (Don’t forget to create a backup before you do it!)

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:

Gutenberg block editor starting screen

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.

Add a new Gutenberg block by clicking the plus icon

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:

After clicking on the plus sign in the editor you are shown a menu of available Gutenberg blocks

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.

💡 Pro tip: Since it’s arguably the most frequently used block on almost every WordPress page, the paragraph block also functions as the default “next block”. In practice, this means you can also create a paragraph block by simply typing any words or even one letter into the editor and it’ll automatically default into being a paragraph block.

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:

Formatting options for a paragraph block

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:

Advanced paragraph block settings

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:

A Gutenberg image block

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.

💡 Pro tip: As an alternative to hitting the Plus sign, you can type a “/” in an empty block followed by the name of the block that you want to insert. Once you learn which blocks are available, this is a much faster way to add new blocks.

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:

A Gutenberg button block

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:

Editing a Gutenberg button block

By selecting the icon in the top-left corner of the block, you can change the style of your button:

Changing the button style inside of the button block

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:

Removing a block in the Gutenberg editor

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:

Moving a block up or down on the page OR using the drag and drop feature

Productivity tip: Gutenberg includes a number of keyboard shortcuts that can help you quickly delete blocks or insert new blocks. Type Shift + Alt + H to view all the Gutenberg keyboard shortcuts.

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:

Using column blocks in Gutenberg

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:

Post settings in Gutenberg

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.

For example, some gallery plugins let you insert a gallery using a block, rather than the old shortcode method that many plugins relied on in the past.

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:

  1. Add whatever Gutenberg blocks you want to your post or page. 📦
  2. Customize each block’s individual settings. 🖱️
  3. Rearrange blocks, delete them, and even organize them into columns if you like. 🧮

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.

If you’d like more comprehensive Gutenberg tutorials, we’ve written a more general Gutenberg for newbies post, as well as a detailed block editor tutorial with some time-saving tips. Also be sure to check out our primer on block themes and our guide to full site editing (FSE). These will help you understand the direction that Gutenberg blocks are moving in.

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!

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)!