There’s a good chance you’ve noticed the above banner on your website. There’s also a good chance you’ve ignored it or given it nothing more than a cursor glance. But you won’t be able to ignore it any longer because, like it or not, Gutenberg is coming.
But what exactly is Gutenberg?
Gutenberg is the new WordPress editor (used for writing your blog posts/articles) that will be coming when WordPress updates to version 5 in the coming weeks.
I’ve been playing with Gutenberg for some time now and find that it’s very good. It might look odd but it lets you do more things more easily than the old editor and allows you to let your creative juices flow with some fancy layouts.
In this post, I want to show you the basics so when it suddenly appears you won’t be quite so confused.
Getting Started
Before your site updates (you’ll need to do this manually so keep an eye out on your site for updates) you can have a play with Gutenberg with this handy live demo.
The Gutenberg Editor
The editor looks a lot like this. and I’ve numbered the important bits so lets go through each part.
1
The important part is at top left where you’ll see a + symbol. This is your key to using Gutenberg. All your layout blocks are hidden in there and you need to choose the right block for the right job. If you click the + you’ll see something like this:
The top section shows your Most Used blocks so yours might look different and will change over time. If you have a scroll through the sections you’ll see that most blocks are self-explanatory. For most articles, I’d suggest you’ll find yourself using Image, paragraph and Gallery more than any of the others. Indeed, for this article, so far I’ve only used Heading, Paragraph and Image blocks.
Click a block and it will be added to your document. If it’s a Paragraph block you can start typing, if it’s an image block you can choose your image. Whatever block type your working on, you’ll see two sets of settings for it. One set will appear in the block you’re working on, like this:
That’s a heading block and you can see that it gives various style options plus I can make it a link (the chain icon). The three dots at the end give you some extra options you’ll likely not use but go ahead and have look. And you can play on the demo site, remember.
Over on the right you’ll see more specific block settings. That’s section…
2
Depending on which block type you’re working on, Block will show different settings. For example:
Changing over to the Document tab will give you universal settings for the document as a whole.
This is where you can add your Categories, Tags, Featured Image and the other things you need to add to each post.
3
This is your main Gutenberg editor. Your blocks appear here and are more or less how you can expect to see them on the actual website once you publish. There’s not much to say, it should be self explanatory. A little experimentation in the Gutenberg Demo will show you that you can drag and drop blocks to change the order. You’ll also find that simply pressing Enter will automatically give you a new Paragraph block.
4
Section 4 contains:
- Save. You can save a draft of the article you’re working on to come back and finish it later. After publication this option will change to Switch To Draft, so you can unpublish an article.
- Preview. Lets you see a preview of your post before publishing to make sure everything looks how you it expect it to.
- Publish. In Gutenberg, it’s impossible to accidentally publish before you’re ready. And trust me, that’s a lifesaver. You’ll be asked to confirm some publication options such as whether to publish publicly and the date for publication. After publication, this option will change to Update.
- Cog. This opens and closes the Document/Block tabs. So if you can’t see the tabs, click the cog.
- Three Dots. This gives you some extra options most of which are only of use to developers, but you might find a use for copying the entire contents of a post. And you should play with the different view settings. You might find some you like that aren’t on by default.
And That’s That
So that’s Gutenberg. Have a play with the demo and get familiar with it, I think you’ll like it. It’s really easy to use and allows you to stretch your creative muscles a little and make some nice layouts.
If you really don’t get on with Gutenberg you’ll still be able to use the old Classic Editor you’re used to, but you’ll need to install it as a plugin. But I urge you to use Gutenberg as the Classic Editor won’t be supported forever.