In my last post I introduced you to Gutenberg; the new content editor for WordPress.
And unfortunately, it’s coming whether you like it or not! So you might as well start getting familiar with how it all works.
Gutenberg is based on a block system. So instead of just writing content in one large content block, you have individual blocks for headers, paragraphs, images, etc.
As you will see throughout this post, many of the basic features of the WordPress editor will be changing with Gutenberg.
In this post, I’m going to show you how to use the new Gutenberg editor in WordPress.
Contents
Click the links below to navigate through this post:
- How to install the Gutenberg plugin
- How to create a new post or page
- How to add new blocks to a post or page
- What blocks are available to use?
- What is the Classic block?
- How to use columns in posts
- How to rearrange blocks
- How to create and use reusable blocks
- How to view and edit the permalink
- How to switch from visual to code editor
- How to schedule a post
How to install the Gutenberg plugin
In order to start using Gutenberg (until it’s rolled out to everyone in the 5.0 update), you need to install the Gutenberg plugin.
I recommend testing Gutenberg on a replicated version of your website before you install the plugin on your live website just in case anything goes from (issues with themes, plugins, etc).
To install the plugin, hover over Plugins in the left-hand menu of WordPress and click Add New.
You will probably see the Gutenberg on the main plugin page as it’s very popular at the moment (popular because people are trying out, not because people like it!). However, if you can’t see Gutenberg, use the search at the top of the page to search for Gutenberg.
Yes, it’s the one with really poor reviews!
Click Install Now and the Activate when prompted to.
How to create a new post or page
In terms of actually creating a new post or page, nothing has changed.
To add a new post, hover over Posts in the left-hand menu of WordPress and class Add New.
To add a new page, hover over Pages and click Add New.
From here, you will see the new Gutenberg editor. It looks similar for both posts and pages:
On the left-hand side, taking up the majority of the screen is a post content. On the right-hand side is the settings panel which contains all the settings for the post (or Document as WordPress call it).
If you have any plugins installed that add boxes to the post or page editor such as Yoast SEO then you will see these boxes underneath the post content.
You can hide the settings panel if you wish to make the content full screen by clicking on the cog icon in the top right-hand corner of the screen.
In the content section, by default, you will see a title block (this cannot be removed) and a paragraph block (which can be removed). Start by giving your post or page a title.
How to add new blocks to a post or page
There are a couple of ways that you can add new blocks to a post.
The main way to add new blocks is to click the + icon in the top left-hand corner of the screen. This will display a list of all the available blocks.
You can also add a new block before an existing block. Hover over the block you want to add the new block before and you will see a + icon. Click on this to add a new block. By default, this block will be a paragraph block but you can change what type of block this is.
What blocks are available to use?
There are lots of blocks available for you to use in your posts.
When you click the + icon to add a new block you will see that the blocks are put into groups.
Common
The common blocks are blocks that you might use frequently throughout your posts.
As you will see there is a block for paragraphs, a block for headings (which allows you to choose whether you insert a H2, H3 or H4 heading), a block for images, a block for lists, etc. Normally you would just use the toolbar at the top of a post to add in these features, but with Gutenberg, you add them as individual blocks.
If you don’t like the idea of separating all of these features into individual blocks, and would rather just continue using the toolbar to edit your post, you can use a Classic block (jump to the section of this post where we talk about this in more detail).
Formatting
The formatting blocks allow you to customise the formatting on the post.
So, if you wanted to add some HTML to a post (e.g. if you wanted to display a widget) you can use the Custom HTML block. If you want to display a piece of code you can use the Code block. If you want to insert a table you can do this with the Table block.
You will also find the Classic Block here which allows you to add content just as you do in the classic WordPress editor.
Layout Elements
Layout Element blocks help you to customise the layout of your posts.
If you want to add in the “Read more” or “Continue Reading” link then you can do this with the More Block. If you want to add in a separator (i.e. a line across the page), you can do this with the Separator block.
You will also find the Column block here which allows you to create columns within posts. I talk more about this later in this post.
Widgets
In Gutenberg, there are blocks for specific widgets that you might already be familiar if you use widgets elsewhere on your website. These include archives, categories, latest comments and latest posts. There is also a shortcode widget block that allows you to easily add shortcodes to your posts and pages.
- Shortcode
- Archives
- Categories
- Latest Comments
- Latest Posts
Embeds
The Embeds blocks allow you to easily embed content into your posts such as Tweets, Instagram posts, YouTbe videos, Soundcloud clips, etc. The list of websites and apps that you can embed content from is huge!
What is the Classic block?
Let’s take a minute to talk about the Classic block.
If you hate the idea of using blocks to create a post and you would rather just continue writing like you do using the existing WordPress editor, then you might be glad to hear about the Classic block.
Basically, the Classic block is just the same as the WordPress editor we know and love. When you add this block to a post you will see the editor toolbar that we are all familiar with.
When Gutenberg goes live, all of the content of your existing posts will be placed inside a Classic block so that your posts look exactly like they did before the update.
How to use columns in posts
At the time of writing this post, the Columns block is still in beta mode (i.e. still being tested and tweaked).
The idea of the Columns block is that you will be able to easily create columns with your posts. So say for example you want a picture on the left-hand side and a block of text on the right, each taking up 50% of the width of the content, columns will allow you to do this.
When you add a Column block to the post you will see two columns with Paragraph blocks inside them.
You don’t have to just put text inside of these columns. You can put whichever blocks you like inside of these columns. In order to do that, you just need to click on the column, click on the + icon and then choose your block from the list.
Here’s what it looks like when I put an Image block in one column and a Paragraph block in another.
You can also change the number of columns that are shown within a Column Block. By default, it is set to show two columns, but if you click on the Column block and look at the settings panel you will see the option to change the number of columns.
As previously mentioned, the columns block is still in beta mode so it isn’t quite ready yet. From what I can see, the columns aren’t responsive and there’s no easy way to adding space between the columns (padding and margins). I’m not sure if WordPress plan on adding these features but I hope they do. If not, this additional styling will have to be added via CSS.
How to rearrange blocks
After you have added your blocks to your post you might want to rearrange them. To do this, hover over the block you want to move and on the left side, you will see some arrows. Click the up arrow to move the block up, and click the down arrow to move the block down. Simple!
How to create and use reusable blocks
One feature of Gutenberg I actually like is the ability to create reusable blocks. So say for example you’ve set up a block and you want to use this exact block elsewhere in different posts, you can make this block a reusable block. Think of it like a template.
To make a block reusable, click on the three dots next to that particular block and click Add to Reusable Blocks.
After creating your reusable block you will be asked to name it. So give it a name and click Save.
Then, to use your block, click on the + icon in the left-hand corner of the screen as you usually do to add a new block, scroll down to a tab called Reusable, and here you will see the block you have created.
How to view and edit the permalink
When using the classic editor, it’s really easy to view and edit the permalink of the post or page. It’s literally right there under the title. However, in Gutenberg, the permalink has been moved to a less obvious location.
To view and edit the permalink, you need to click into the post/page title. You will need to save the post before you are able to view it.
Here you will see the permalink and an Edit button which once clicked allows you to change the permalink.
How to switch from the visual editor to the code editor
To switch to the code editor, click on the three dots in the top right-hand corner of the screen. By default, Gutenberg is set to show you the visual editor so you will see a tick next to the Visual Editor option.
If you want to switch to the code editor, just click Code Editor.
Here’s what it looks like when you choose to view the code editor in Gutenberg.
You can also edit the HTML of some of the individual blocks. Just click on the three dots next to a block and if you can edit the HTML you will see the Edit as HTML option.
How to schedule a post
To schedule a post, click on the Document tab on the right-hand side of the screen. Then, under the Status and Visibility tab, you will an option called Publish which has a date and time next to it.
If you click on this date and time you will see a calendar.
Choose the date and time that you want your post to go live.
Once you have selected a date and time you’ll notice the Publish button at the top of the page changes to a Schedule button. Click this when you are ready to schedule your post.
You will then see a little box that asks you to confirm your scheduled date and time. If you want to change the date and time again, just click on the link next to Publish to select a different date and time.
When you are happy, click Schedule again. This will take you to a confirmation screen that also shows you the permalink of your post.
Any questions?
Have you tried out Gutenberg yet? How did you get on? Was there anything you struggled with? Anything that you couldn’t figure out how to do?
If you are feeling confused about anything to do with Gutenberg, please let me a comment and let me know! I’d be more than happy to answer your questions.
I will continue to add to this post as and when necessary to make sure you have the most up-to-date, correct information. And if I find any other interesting features of Gutenberg then I’ll share them here too.
Hot off the WordPress!
Join my FREE email community today to receive helpful tips and advice on building and maintaining your website directly in your inbox every other Friday. Just pop in your name and email address.
Pin for later?
