With the launch of WordPress 5.0, creating posts and pages has had a radical shake-up. The cosy, familiar editor was replaced by something completely new – the Block Editor, also known as Gutenberg.
It is actually possible to keep the old Classic Editor on your site (see this post if you want to know how). But support for the Classic Editor will be phased out at some point so sooner or later you will need to know how to use the Block Editor.
So today I’d like to give you an introduction to the Block Editor. We’ll go through the process of creating a new blog post.
[Tweet “From WordPress 5.0 creating posts & pages has had a radical shake-up; I’ll show you how to use the WordPress Block Editor to create a new blog post”]
Create a new blog post
Your first step is to create a new post draft. This hasn’t changed at all, so you can still click on Posts > Add New from your dashboard, or New > Post from the top bar.
You’ll then see this screen:
Pretty different from what you’re used to, right? Don’t worry though; it’s actually rather straightforward.
[Tweet “The Gutenberg Block Editor looks really different from what you’re used to, but it’s actually easy to use”]
The edit screen has been simplified to put more focus on adding your content. All those option panels that were on the right side of your screen are still there, but now they’re in an expandable list, so you can show or hide them as you need them. Or even hide the whole list by clicking the cog icon at the top of the sidebar. To show it again, just click the cog again.
Add some content
With the Classic Editor, adding content was pretty similar to the likes of Microsoft Word. You simply typed in your text and you had a bunch of tools to format it, like making it bold, italic, a list, a quote etc. (See this post for a guide to formatting text in WordPress)
With the Block Editor, your content is split into blocks. A paragraph of text is one block, an image is another, separate, block, and so on. You can drag and drop the blocks around to reorder them, so if you wanted to move an image further down your post, just drag it into position.
The first block on your post is the title, so go ahead and add that in. Then either click in the next block, or hit enter to move there automatically.
By default, the next block is a paragraph, so you can start typing or pasting in your text. Let’s give the post an introduction:
Once you’ve added some text to the block you have some basic formatting options, like text alignment, bold, italic and link. Plus there are 3 buttons to give you more options.
The first shows you what kind of block you’re currently using (in this case paragraph) and by clicking it you can change the type of block, for example, to make it a heading or a quote.
The next dropdown just gives you a few more formatting options:
And the third, the 3 dots, gives you access to some options for the block. You can duplicate it or edit it as HTML – that’s the equivalent of the Text view in the Classic Editor. You can delete it, or you can Add to Reusable Blocks. That’s a pretty nifty feature; you can use it to reuse snippets of content throughout your posts. Like if you need to add the same call to action, or an affiliate disclosure to multiple posts, you create the block once, save it then just add it to other posts whenever you need it.
Now to add more content, just hit the + icon at the top left. This gives you a list of all the available block types:
The blocks are split into groups. The most commonly needed are first, like paragraph, image, quote etc. But scroll down and you find lots more goodies. Like a table block, which is great as you used to need a separate plugin to add tables.
There are also things like:
- Pullquotes
- Custom HTML (handy for things like email signup forms)
- Buttons
- Columns
- WordPress widgets
- And all sorts of media embeds, like audio, video, Twitter, Spotify, Slideshare, and loads more.
[Tweet “It’s really easy to add tables, buttons, columns, media embeds and more to your blog posts with the WordPress Block Editor”]
It’s well worth exploring the various block types to see just what you can do. For now though, let’s look at the image block. Add that to your post and you have 3 options: Upload an image, select an image from the Media Library, or Insert from URL.
I generally click on Media Library as after that the process is exactly what you’re used to: a pop up window appears where you can either upload a new image or choose one that’s already uploaded.
Once you’ve added you image, again you have basic formatting options along the top of the block. You also have a space to write a caption, and do you see those two blue dots at the bottom and right side of the image? You can use those to resize your image. Just click a dot and drag it to change the image’s size.
Drag and drop editing
Now imagine you want to move the image around your page. It’s simple. Hover over a block and you see the ordering tools appear on the left.
You can either click the up/down arrows to move the block up or down one place on your page, or click the dots in the middle and drag your block to where you want it.
Other tools
Beside the Add Block button at the top you have a few more options:
- Undo
- Redo
- Content Structure (this gives you a word count and shows how many blocks you have and what kind they are)
- Block Navigation (this is a list, in order, of the blocks on your page and you can use it to jump to and select a particular block, rather than scrolling down the screen to find it)
If you need help figuring out what any button is for, just hover over it and its name will appear as a helper tooltip.
Settings sidebar
Block settings
Did you notice that the settings sidebar changed when you clicked on a content block?
The sidebar gives you settings for the whole post, which we’ll come to in a moment, but it also gives you settings for each content block. The available settings will depend on the type of block you’re using, for example with the image block the settings let you input things like Alt text, the image size, and the link.
While the paragraph block gives you options to change the font size, colour and even set drop caps.
Document settings
Let’s look at the document settings now.
First up we have Status & Visibility. This is the equivalent of the Publish panel on the Classic Editor.
- If you don’t want the post to be publicly visible, you can set it to private or password protected.
- Your post will by default publish immediately, but you can schedule it for later by clicking ‘Immediately’ and then setting a date and time.
- You can make it a sticky post (if your theme supports that), change the author, or bin the post.
Next, you can change the permalink of the post by editing the URL Slug, for example, to make it a bit shorter I’d change this one to ‘wordpress-block-editor’.
Just as with the Classic Editor you can set categories and tags for your post to help sort it. This works just the way you’re used to – choose a category from the list or create a new one, then start typing in to select or create tags.
Finally, add a featured image to the post. This also works the way you’re used to – click Set Featured Image and you can upload a new image or choose one from your Media Library.
You can also set an excerpt and turn comments on or off.
Other settings
With the Classic Editor you may have had other options panels below your content. Don’t worry, you still do. While the Excerpt and Discussion panels have moved to the sidebar, things like the Yoast SEO panel are still below your content. Other plugins you’re using on your site may also place options panels down there too, so go ahead and fill any of those you need to.
Time to publish
Now your post should be ready to publish.
You’ve probably noticed that the button for this has moved. Instead of being with the other Status & Visibility settings, it’s now right at the top of your screen.
Here you can save your post as a draft if you want to come back to it later. You can preview it – a good idea to check it over before you publish! And then when you’re ready click the Publish button. And just as before, if you’re editing an existing post the Publish button will change to Update, or if you set a schedule for the post to go live, the button will say Schedule instead.
[Tweet “Time to get to grips with Gutenberg? Find out how to use the WordPress Block Editor”]
Get to grips with Gutenberg
Hopefully this has helped you get started with the new Gutenberg Block Editor. Once you familiarise yourself with and increase your confidence you should find it faster to create posts, not to mention all those lovely new features you can play with.
The process for adding pages with the Block Editor is basically the same (naturally, without the post-specific options like Categories and Tags). But if there’s a feature or setting you’d like to learn more about, let me know and I can put together more tutorials and guides.
Never miss a post
Sign up for actionable WordPress tips and advice, plus exclusive tips and offers, just for subscribers.