Are You Ready for Gutenberg?
This article is a little old now. If you'd like to take my free Gutenberg course, you can sign up here.
A more important question is, will your site be ready? There are a lot of concerns over this latest WordPress upgrade that will incorporate a page builder style editor for adding posts and pages. Some people are worried about backward compatibility, others are imploring WordPress to make this a plugin instead of a core WordPress feature. The decision has already been made. Gutenberg will be fully integrated into WordPress soon.
I've been playing around with Gutenberg and recorded as short video showing you what you can expect, as well as how you can “opt out” when it is released.
If you want to have a look at Gutenberg yourself, keep reading. I've created a comprehensive tutorial to get you started.
Will Gutenberg Affect You?
Gutenberg is the codename for a major new editing environment coming to WordPress. At the time of writing, the exact release date is unknown, though it is expected sometime in 2018. It will most probably be integrated into WordPress version 5.0.
Gutenberg will completely change the way you create web pages, at least it will if you decide to use it. For although Gutenberg will be built into WordPress, word is that you will still be able to use the older WYSIWYG editor if you want to.
Currently, if you add a post or a page in your WordPress dashboard, you edit the main body of the content in this familiar “TinyMCE” editor:
This editor is very similar to any word processing package you may have used in the past. But Gutenberg will change all of this.
Trying Gutenberg
From WordPress version 4.9.8. onwards, WordPress offers a large “advert” for Gutenberg right there in your dashboard:
If you want to try Gutenberg before it is officially released, you can. WordPress have created a Gutenberg plugin you can install now. This gives you time to explore and learn the system that will be forced upon you in WordPress 5.0 (and not as a plugin).
Simply click the Install Gutenberg button and then click Activate Gutenberg once the install has finished:
What you’ve just done is install and activate the Gutenberg plugin, which you can now see in your list of installed plugins:
If you want to get rid of the Gutenberg “trial”, simply deactivate and uninstall the plugin.
Gutenberg Tutorial
Before continuing, I should point out that Gutenberg is still in Beta. That means it does not work 100% the way it should at the moment and there are some bugs. Hopefully by the time it is released, these problems will be ironed out. As I was creating this tutorial, some of the features did not work as expected, however, I have shown them as they are meant to work in the final version.
If you’ve ever used a WordPress “page builder” like Elementor, then Gutenberg will seem a lot more familiar to you. You see, like page builders, Gutenberg uses a system of blocks to help you build your content. On adding a new post or page, you’ll be greeted with the Gutenberg editor:
Gone are the boxes to enter the title and edit the content.
However, if you move your mouse over the “Add Title” text, a box appears:
So, you can type in a title!
How to Use the WordPress Gutenberg Editor
Move your mouse further down to write some content and no box appears. However, you will notice (if you put your mouse over the “write your story”) that a “+” button appears and the icons on the right also become active:
These are the new controls for adding content to your post.
When you click the + button, a menu appears offering you a number of different blocks you can add to your post:
There is also a search box there so you can search for the block you want to use. This will become more useful as the number of blocks increases (from both WordPress as Gutenberg matures, and third-party developers).
This menu is the main way to add new blocks, but not the only way. Remember the buttons on the right?
These buttons can add the following blocks to your post: “Image”, “Heading” & “Gallery”, in that order.
So, gone is the single WYSIWYG editing area. You now build your web pages using blocks.
In its simplest form, a post could be simply a title and a paragraph block, like this:
One paragraph per block!
All blocks have their own properties. Since we’ve added a paragraph block, let’s check out the properties because you can do some interesting stuff:
The Gutenberg editor starts a new paragraph block. This will mean that you will have multiple paragraph blocks, each containing one paragraph!
If you copy and paste several paragraphs into a paragraph block, you’ll find that Gutenberg automatically splits the text into multiple paragraph blocks!
Paragraph Block Properties
All blocks have their own properties. Since we’ve added a paragraph block, let’s check out the properties because you can do some interesting stuff:
With the paragraph block, you have text settings so that you can resize text for that paragraph only. There are quick select options for small, medium, large and extra large. However, there is a slider too, if you want to have a customized size.
The Drop Cap option can add some interest to your paragraph:
The paragraph block also has Colour Settings that allow you to define the text and background colour.
This gives you more flexibility in how your text appears on the page:
Adding an Image Block
It’s a pretty boring post at the moment, so we could add an image, using an image block. There are a few ways we can do this.
Firstly, we can move our mouse towards the top of the paragraph block until we see a “+” appear in the middle of the block:
Clicking that would create a new empty block above the current paragraph block:
We’d then click the “+” button and select the image block to add.
That inserts the image block where you can upload an image, or select one from the media library:
On selecting an image, it is inserted into the post. You’ll be given some editing buttons across the top. At the moment, the image is sitting above the text. If I want the text to flow around the image, I can select the left align button in the image block:
On clicking that, the text flows around the image:
Remember I said there were a few ways to add the image block when we only had the title and paragraph block?
The second way is to click the “+” in the top left of the editor screen:
That button will ask you which block you want to add, and on selecting one, the block is placed at the end of the post. Here it is after selecting the image block:
After selecting the image, it now sits below the paragraph block. If I left align the image, this is what happens:
Hmmm. Nothing changed.
The reason is simply that when you left align an image like this, it is the text that follows the image block that will wrap. There isn’t any. To get the paragraph to flow around this image, we need to move the image block above the paragraph block. Fortunately, this is very easy in Gutenberg.
Moving a block in Gutenberg
Click your mouse inside the block you want to move. Now move your mouse pointer over to the left side of the block. Two arrows appear allowing you to move the block up one, or down one position:
You can see the up arrow is enabled, but the down arrow is not. That is because there are no blocks below this one, so it cannot be moved down. However, we know there is a paragraph block above the image. Clicking the up arrow has the desired effect:
That’s the second way of adding that image. But there is a third way.
Click into the paragraph block and then move your mouse cursor over to the right side of the block. A menu button appears:
Clicking the menu button opens up the menu you can see in the screenshot above. This gives you a number of options.
The first option “Hide Block Settings” will simply toggle off the “block settings” on the right.
Go on, try it.
You’ll now have more real estate on your monitor for editing your post. That menu item will now say “Show block settings” so you can turn this back on.
These block settings are really useful for editing the properties of the block. For example, when you select an image block, the settings will include properties like ALT text, image size, Link To, etc:
Select any block in your post and the block settings will change to reflect the options for that block type.
Inserting blocks in between existing blocks
Each block you insert will contain that right-hand menu button that appears as you mouse over each block. To add a block before or after another block, click the menu and select the appropriate response:
Note that there are keyboard shortcuts for some items in the menu. For example, if you want to insert a block before an existing block, click the block and use the keyboard shortcut Ctrl+Alt+T (or the Mac equivalent).
The other way to insert blocks between two others is to move your mouse over the top middle of the lower block and click the “+” to insert the block above:
To delete a block?
Deleting a block is easy too. Either choose Remove Block from the menu on the right of the block:
Alternatively, you can use the Ctrl+Alt+Bksp keyboard shortcut as shown in the screenshot above.
So we have the basics of adding blocks. What blocks are actually available?
Gutenberg Blocks
The blocks menu is divided into a number of “sets” of related blocks:
Just click the arrow on the right to unfold each set.
Here is a list of the currently available blocks in Gutenberg as it stands right now.
- Paragraph
- Image
- Gallery
- Heading
- Subheading
- List
- Quote
- Video
- Audio
- Cover Image
- File
- Code
- Classic
- Custom HTML
- Preformatted
- Pull Quote
- Table
- Verse
- Button
- Columns
- More tag
- Page Break
- Separator
- Spacer
- Widgets – Shortcode, Archives, Categories, Latest Comments, Latest Posts
- Embeds – Twitter, YouTube, Facebook, Instagram, WordPress, SoundCloud, Spotify, Flickr, Vimeo, Animoto, Cloudup, CollegeHumor, Dailymotion, Funny or Die, Hulu, Imgur, Issuu, Kickstarter, Meetup.com, Mixcloud, Photobucket, Polldaddy, Reddit, ReverbNation, Screencast, Scribd, Slideshare, SmugMug, Speaker, TED, Tmblr, VideoPress, WordPress.tv
I won’t go through each of these blocks. You can try them out and see for yourself. Once you’ve added a block, check out the block settings on the right of the Gutenberg editor.
There are a couple of blocks I would like to mention though.
One that is well-overdue for WordPress users is the table block. Now you can easily add properly formatted tables to your content:
The table that is inserted is two columns and two rows. However, the Edit Table button makes adjusting columns and row counts quite easy:
You can also drag and drop the column dividers to resize columns as needed.
Another cool block is the Button block.
This block allows you to insert a button into your post, and style it as you like.
There is a space under the button for defining the URL that the visitor is taken to when the button is clicked:
One other block that is nice to see is the columns block. This allows you to create sections of content that are divided into columns:
As you can see, each column has a “+” button, so you can add blocks to each column separately.
Here is a two-column block that has a table in the left side, and a header, image and paragraph on the right:
That’s quite cool!
Post (Document) Properties
As you work on your post or page, you have access to the document properties on the right.
Most of the settings will be familiar to you if you have used WordPress before.
These settings allow you to set the category, tags, featured image, excerpt, etc.. Again, I won’t go through all of the options here. Explore them yourself.
Publishing & Scheduling Posts in Gutenberg
When you have created your masterpiece using the Gutenberg editor, you can save it as a draft, preview, publish or schedule the post.
The first two options are one-click processes:
To publish or schedule your post, click the Publish button.
The “Publish” section allows you to select the date and time to publish the content. That will be set to now, so if you click the Publish button at the top, the post will go live now.
To schedule the post, click the down arrow in the “Publish” section and choose the date/time:
When you select a date in the future, the Publish button will change to Schedule, and upon clicking that button, the post will be schedule to automatically publish on that date and time.
Using the HTML Editor to edit your post
There may be times when you want to edit your post in raw HTML code. To do this, click on the ellipsis menu button, top right of the Gutenberg editor:
Currently the Visual Editor is selected. If you choose Code Editor instead, you can view/edit the entire post as HTML code.
Are you ready?
When WordPress 5.0 is released, will your existing sites still work OK with Gutenberg? What happens to your existing pages and posts? Are your plugins compatible? Is your theme compatible? These are questions that a lot of people are worried about.
The good news is that I have tried the plugin on a number of sites and have yet to find a serious incompatibility.
As I mentioned at the start of this guide, Gutenberg is still in beta but you can try it by installing the plugin. I’d recommend you install the plugin and have a play around with the editor because it is coming.
Third Party Page Builders?
For those of you who use third party page builders like Elementor, how will Gutenberg affect you?
Well, again this is good news. I use Elementor myself and there have been no problems worth mentioning.
As you can see in the following screenshot, I have Gutenberg open as the editor, but I could choose to edit with Elementor if I wanted to:
If I switch from editing with Gutenberg to editing with Elementor, it’s almost as if I was switching from the old TinyMCE editor to Elementor. The resulting screen is formatted exactly the same way:
Have you tried Gutenberg?
What do you think of it?
Perhaps you use a third-party page builder? What are your thoughts on Gutenberg?
Please leave your thoughts and comments below.
5 thoughts on “Gutenberg – A Guide to the new WordPress Editor”
This is going to be a great knowledge resource for many people. Thanks for your hard work Andy.
That’s great Andy. I had a quick play with the plugin and found it okay but I’ll refer back to your guide once it’s live.
I’ve not looked at Gutenberg yet but will have to do so when I revise the website.
Terrific introduction. Now I don’t have to worry about Gutenberg. Bring it on!
Thanks for the Info. I was wondering about compatibility with Elementor.