It’s been a while now since WordPress 5.0 came out, including its new editor, Gutenberg.
With the added security updates in 5.0, along with new PHP support and plugins that only work with 5.0+, everyone should be on to this latest version by now.
(If you’re not – then it’s time to see me about a software upgrade!)
WordPress introduced a plugin, Classic Editor, to help keep the old editing interface for a while. It made the transition easier and if you’re used to the old way of creating posts and editing pages, then you can install it and keep on your merry way.
But WordPress won’t support Classic Editor forever (right now, they are saying they will support it through to the end of 2021). So you’ll have to learn Gutenberg at some point.
And more importantly – Gutenberg is actually pretty fun once you get the hang of it. It’s really quite different than the old editor – but it’s flexible and cool and lets you create a wider variety of layouts with ease.
Nervous about going Gutenberg? Here’s a quick intro to what you can expect to see and how to build a basic post using the new options.
Think in Blocks
Gutenberg is a block-based editor.
This means that every “chunk” of content that makes up your new blog post or page is its own “block.”
A paragraph is a block. A list of items is a block. An image is a block. A heading is a block.
When we’re creating a new blog post or page using the new Gutenberg editor, we’re going to be building that post using a series of blocks. Every chunk of content we want to add will be a new block that we insert.
Let’s make a new blog post in the Gutenberg editor.
First! If you are running the Classic Editor plugin, you’ll need to deactivate it. On your dashboard, go under Plugins and look for Classic Editor; then click the “deactivate” link that appears below its title.
Now select Posts > Add New to bring up the new post editor screen
The first thing we’ll do is enter a title where it says “Add title.”
Then, click where it says “Start writing” and enter the text for your first paragraph.
You can press enter while working on a paragraph, and it will automatically insert a new paragraph block. So if you have a string of paragraphs to enter, you can just type away and hit enter between each one.
For subtitles, we can hit enter to create a new paragraph block, and then enter our subtitle. Then, use the Block Type option – in the top left of the block – to “flip” it over to being a subtitle type of block.
Click the Block Type button – the thing with double arrows in the top left of the block – and a set of common block types will pop out. Choose Heading to change it to a subtitle.
You can move blocks around, too, to change their order. Each block has a little arrow up and down thing on the left hand side (when your cursor is inside that block, it will appear).
Use the up and down arrows to the left of the block to bump it up or down in the block order.
For most blocks, there are also cool additional settings available on the right hand settings area. For example, for a paragraph or heading block, you can set a custom text colour. Just make sure your cursor is inside the block you want to work with, and the sidebar settings will change to match that block.
Pro tip! The settings block might be toggled off. You can toggle it back on again using the gear icon in the top right hand corner.
Another pro tip! If you still can’t see the settings sidebar, then it might be below your main editing area – for narrow windows and screens, it wraps below the main area.
A third pro tip! Setting custom colours is fun but remember that you want your site to have a uniform look and feel. Using custom colours and fonts for a specific title or paragraph will override your site-wide design settings so tread carefully and use this sparingly.
Add some images
Let’s add an image by adding an Image Block.
In the top left hand corner of the new post window is a plus sign inside a circle.
This icon is the “add a new block” button. Click it to see a pop-out of all the available blocks. There are lots of choices, but you should see Image as one of the top selections as it’s one of the most common blocks.
Click on the Image option to insert an Image Block.
From inside the new Image Block, you can click Upload to upload a new image from your computer, or Media Library to access existing images. Either way, the Media box will appear with some choices and when your image is done uploading (if you uploaded one), then click on it, and click the blue Select button in the bottom right hand corner.
Once the image is inserted, you can play with its configuration in a couple of different ways.
At the top of the Image Block, you can indicate whether you’d like this image to be left, right, or center aligned. Some themes also allow for wide or full-width images, but these don’t always work well on sites that have a sidebar.
In the settings column on the right hand side, you can choose a size for this image, if you’d like to load a smaller or larger version.
Pro tip! You can also add Image Galleries, which are their own type. Select Gallery when inserting a block and you can add a group of images that will be displayed in a very nice block layout, with lots of options.
Create some links
To create a link in your new blog post, start by highlighting the actual text you want to see become clickable.
Then click the “link” button, which is in the menu bar at the top of the paragraph block. It looks like three little links in a chain.
This will pop out a little link information box, where you can enter the URL of the site to link to. Click the down arrow at the right of the box to access the “open in new tab” button.
Click the carriage return icon (a bent arrow pointing left) to finalize the link.
Pro tip! If you are linking inside your own site – say, to your contact page or to an older blog post – you can just start typing the name of that page/post in the link box, and WordPress will search and find it, creating the link for you.
Set up your meta data
Lastly, we’ll add a few pieces of information about this post as a whole using the settings bar, to the right of the main editing/blocks area.
At the top of your settings bar are two tabs: Document and Block. We want to work with the document-wide settings now, so click the Document tab to load those.
There are several document-wide settings we can set here. Some common ones are Categories, Tabs, and Excerpt – click on any of these in the settings area to fill in the deets.
You probably should set a Featured Image over here too. It can be an image from your post, or any other image. Social media sites like Facebook and Twitter pick up this image when the post is shared, and it also may be used in your website layout to feature the post. Just open the Featured Image tab by clicking on it, then click the button to access the Media Library and add a new image.
Lastly, think about when you’d like this post to be published. If it’s immediately, then yay! Go on to the next section.
But if you’d like to schedule it for future publication, click on the “Immediately” link next to the “Publish” heading near the very top of the document settings. This will pop-out a calendar where you can set the day and time for publication.
Hit that publish button!
Now hit the blue “Publish” button in the top right hand corner to make your post live on the site. This button will say “Update” if you are editing an existing post or page.
That’s it! Working with Gutenberg requires a bit of a learning curve, but once you get the hang of blocks, you’ll never look back. We’ve barely scratched the surface of the kinds of blocks you can insert – there’s lists, spacers, dividers, along with tons of custom blocks created by plugins – so play around and try different styles of content.
One last note! When opening an older page or post, all the old content will now show up in a single “Classic” block; you can use the “convert to blocks” button in the top right hand corner of this single block to flip it over to Gutenberg mode, then edit away, you Gutenberg pro, you!