Release on December 6, 2018, in WordPress 5.0 you will notice one major update – the new Gutenberg editor. If you want to get the most out of this tool, you’ll need to learn about the Gutenberg blocks system and how it works.
Before WordPress was using the TinyMCE editor. With Gutenberg, it will help you to create content in a more visual way. It does this by providing a library of pre-built elements, or ‘blocks’. Each block can be added to a page or post and it can be customized to your liking.
There are blocks to handle basic components such as text and images, as well as some that provide advanced features (such as buttons and tables).
In this post, you’ll learn how to use the Gutenberg blocks system and I’ll show
3 Steps To Creating A WordPress Post Using Gutenberg Blocks
If you’ve recently updated your site to WordPress 5.0, you might have said, “what the heck is going on here. This looks different!”
Your site should be using the new Gutenberg editor by default now and at first, it might look intimidating but once you try it you may never want to go back to the old way of creating your blog post.
Let’s walk through the editor to create a basic WordPress post, but no matter what kind of content you want to create you will still use this simple basic approach.
STEP 1: Adding blocks
When you first start on your new post you will see the option of adding a title in the block. This part still works the same like in the classic editor in previous versions.
(see picture below)
After this step, things will start to change.
Let’s go over some of the icons you will encounter. There will be 3 icons below the title box and you will see a + icon next to some text that says “Start writing or type / to choose a block.”
First let’s start with the 3 icons on the right below the block. (see image below)
If you hover your mouse over the 3 quick icons and you look to your left you will also see the + icon show up. If you click on the T icon, it will allow you to add Headlines Titles with the H2, H3, tags.
It will also show the B (Bold), I (
The Plus icon Menu
If you scroll down with the scroll bar you will see several more options you can chose from…
If you are done browsing, you can close this box by clicking on the X button on the top of the box.
Despite all of these options, it’s super simple to start a new block. In fact, it’s already created for you just waiting for you to click in it and start typing. Just click next to the plus icon and your cursor with be ready to start typing.
It will let you start typing in the paragraph format, which is usually the main format you will be using 95 percent of the time.
Unless of course, you want to write a Headline or put in a picture or some bullet points. In that case, you can choose the opting you want from one of the 3 quick icons.
After you type a paragraph to create a new block, just hit your enter key and start typing again. If you want to edit a certain block, just click it, and the options will appear.
If you want to divide the paragraph into a new block, just click where you want to separate it and hit your enter key. Now you have a new block that you can edit.
STEP 2: Customizing Your Blocks
If you wish to change your current block into a different one, just click the block to make the options appear.
Next, on the far right, you will see the T icon or the Paragraph icon, depending on which kind of block you created as seen in the pictures below…
Whichever kind of block you created just hover your mouse over the icon and you will see the double arrows icon appear with the text that says: “Change Block Type”
If you want to change the font size, font color, or use CSS (Advance tab), you will see these settings each time you click on a block that has text in it under the “Block” tab on the right hand side of the page.
Each Gutenberg blocks will show it’s own unique settings on the right-hand panel of the page.
Productivity tip: You can save blocks and name them to use them again later to your saved blocks.
Some other cool things that Gutenberg blocks can do is add buttons and add a caption under an image which was not available in the classic version.
To create a clickable button click on the + icon and in the search box type the word button and you will see the button element appear.
Now just click on the element to add it in. To edit the button text, just click the button and start typing.
You can also change the color of the button and text by using the options on the right-hand side of the page in the settings. I just changed the button to match the color of my product in the picture below.
Last, paste or type in the URL link in the space below to make your button clickable and click the apply button.
STEP 3: Editing Your Post
Gutenberg Blocks are pretty flexible. If you find yourself wanting to make some changes later on, it’s a pretty easy process.
If you want to move a block up or down just mouse over the top left
Don’t like the block? No problem. Just delete it!
Start by clicking the block to show the tabs. Next, click the 3 dots tab to open the choices. All the way on the bottom you will see “delete block”
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.
Another cool thing is the ability to add columns if you have to need for them. You can edit the number of columns from the right-hand side of the page. Just use the Colums slider feature or by typing the number of colums you want in the box.
Below you can see an example of a 2 column element with text and images.
Example of column 1
Example of column 2
Also wanted to note that you still have access to post-wide (or page-wide) settings as well. In the right-hand sidebar, click on the Document 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.
There is one last thing that I want to mention that I think is really cool about Gutenberg Blocks. And that’s using plugins.
Gutenberg Blocks: Using Plugins
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, some of your favorite plugins might have already added their own blocks already.
For example, some gallery plugins now let you insert a gallery using a block, rather than the old shortcode method that many plugins used.
You can also find tons of plugins that are solely focused on adding new blocks.
For example, the Otter Blocks plugin gives you blocks for:
- Pricing tables
- Sharing Icons with calls to action
- And more
Find more Gutenberg blocks plugins that you can find at WordPress.org, as well.
With the recent release of WordPress 5.0, Gutenberg is set to become the default editor for all WordPress sites (unless you’re using the Classic Editor plugin).
Fortunately, creating content with Gutenberg is very easy.
All you have to do is:
- Add the Gutenberg blocks you want in your post or page.
- Customize the block’s individual settings to your likings.
- Then rearrange the blocks, delete them, and even organize them into columns if that’s what you need.
Another cool feature, you won’t need to save your content, as it will auto-save at frequent intervals while you’re working.
This is pretty much all you need to know in order to use the Gutenberg blocks system!
It’s easy to pick up, but there’s a lot more options than we’ve went over here. So keep experimenting with the various Gutenberg blocks that are available, and become comfortable with the options.
Share your thoughts in the comments section below on what you think of Gutenberg blocks!