Ten quick tips for getting started with Gutenberg

Gutenberg is a new editor that is in development for WordPress and is set to replace the current default post and page editor. Gutenberg uses the concept of ‘blocks’ to separate content within the editor, allowing you to move content around easily with a click of a button, making arranging content much easier for writers.

At the moment, Gutenberg is available as a plugin in the WordPress.org repository, so anyone can add it to their site by going to the ‘plugins’ menu. It is worth installing this on a staging, development or test installation before updating your live site to use it, just in case you find yourself wanting to revert at any point.

I recently did an overhaul of one of my WordPress sites, and installed Gutenberg so I could make all my content using the new editor. Because Gutenberg is so different to the usual TinyMCE editor, there were several times I found myself struggling to find the options I needed whilst making my pages.

Most of these options were available in Gutenberg, I just wasn’t sure where to look. Based on this experience, I have created a top ten list of quick tips which might help anyone using the Gutenberg editor for the first time.

1. Familiarising yourself with the new Gutenberg interface

This is just a quick introduction to how Gutenberg will look and feel the first time you use it. With the plugin installed, when you go to create a new post or page you will be presented with a page which looks like the above. This has all the same default content you would be used to seeing in the original WordPress editor.

You can click on the title to set your page title, then click on the ‘Write your story’ text to write your first paragraph. Every time you press your return key it will automatically create a new paragraph block – every paragraph has it’s own block. You can move blocks up and down by clicking the arrow icons to the left hand side of your selected block.

You will also notice sidebar on the right – this is where all your default post or page options can be found. Things like your categories, tags and where to set featured images can all be found in this sidebar.

If you can’t see your sidebar (because like me you accidentally closed it), there is a cog icon in the top right hand side of the editor which will make it re-appear.

2. Different block types – how do I add an image or bullet points?

You will realise as you write your content that previous features like adding an image or list are no longer in a menu bar at the top of the page. This is likely because Gutenberg aims to be a distraction-free writing interface.

Any other content types that are not a simple paragraph block can be easily found with the ‘+’ icon in the top left hand corner. When you click on this icon Gutenberg will bring up a box with the many different types of content you can add to your post. So for example, if you scroll down the list (or use the handy search bar) you will be able to find the ‘image’ block.

This will add a new block which allows you to import an image:

This works exactly the same as adding an image using the media uploader which you might be more familiar with. Simply drag and drop your image directly in to the editor, or click ‘upload’ to browse your computer for the image you want to use.

That is how you add an image block, there are also blocks for adding headers, tables, bullet lists, cover images, and galleries to name just a few. Have a play with the different content types and see how they look. The easiest way to access them is using that ‘+’ icon in the corner.

3. Changing and deleting blocks

Sometimes you might start a new paragraph, when you really wanted to add a header, or any other block type. You can change the type you are using by clicking on the block, and you will see a small editor bar appear above the block. The first icon in that bar will be the icon of the content type. So in the image example that shows the paragraph icon.

If you click on the icon, it will give alternative options for your block, so you can easily switch it to the type of content you need for that section.

Deleting a block

Likewise, when you hover over your content, to the right hand side of the block there is an icon with three dots. Clicking this will show you more options for the block type you are using. You can convert the block to HTML here if you wish, but the feature you are most likely looking for is how to remove the block.

The ‘Remove Block’ option can be found at the bottom of this list, making that unwanted content disappear!

4. Blocks next to blocks! (Adding columns)

One of Gutenberg’s nice new features is the ability to add columns. I don’t think I’m the only one who has struggled to get an image to display nicely alongside text using the classic editor.

The ‘Columns’ block allows you to do exactly this. If you add a columns block using the plus icon in the top left hand corner it will give you two new blank Gutenberg blocks situated next to each other.

By default, the two blocks in the column are set to paragraphs, but if you highlight either of them, the ‘+’ icon will appear and this allows you to change that block in to a different type, such as an image or a list.

Columns are technically two blocks within a larger block, so if you want to remove both your columns you need to make sure you have the larger, outer block highlighted.

As of writing this post the columns block is a beta feature, so after adding your first column I’d recommend previewing your post so you can see how the columns interact with your theme. It is likely they look great, but in some odd cases the formatting can still be slightly unusual.

5. How to undo your mistakes

Sometimes you can be making your content, make a mistake and clear it away, but it can be easy to accidentally click and delete the wrong piece of content.

To undo any mistakes like this, you can use the undo icon at the top of the Gutenberg editor, or use the usual keyboard shortcuts: ‘CTRL and Z’ for Windows users, ‘Command and Z’ for Mac users. This reverts the most recent changes without being block specific, so don’t worry about having to re-write your content.

6. Plugin blocks and shortcodes

Because Gutenberg is still a fairly new feature for WordPress, you might struggle using some of your content related plugins. For example, the Jetpack plugin had a contact form button in the old editor, but that is no longer visible within the Gutenberg editor.

There are many plugins this will apply to. For some plugins adding their features might be more difficult, but on-the-ball developers are working to make this easier for us.

Some plugins have already created their own Gutenberg block type. As an example, the ‘Caldera Forms’ plugin has its own Gutenberg block so when you activate this plugin and go back in to your editor, you can search the block menu for the plugin name and find it in there. In this example, clicking the ‘Caldera Form’ block will add a contact form I have created to my post or page.

Different plugins will have different blocks, some might come with several for you to use.

If a plugin does not have a handy Gutenberg block yet, most plugins which allow you to add features to a post or page come with ‘shortcodes’.  These are little strips of code contained in square brackets, for example: [mygallery-shortcode] might be provided and you can use that shortcode in a paragraph block to put this content wherever you want it.

Shortcodes work in the same way they always have done, so don’t worry too much; if you need to add content like a contact form or gallery from one of your plugins, their shortcode should still work fine.

7. Changing the URL (permalink) of your post or page

At first, I thought this option had disappeared, but fear not – you can still edit your post URL (also known as the slug or permalink) within the Gutenberg editor.

WordPress automatically generates a post or page URL after you have written the title – this behaviour was the same in the classic editor. Sometimes we want to change this when WordPress generates a URL which is not quite to our liking.

To change the URL of your post or page, click on your title block, and the ‘Permalink’ option will appear above it. There is an ‘Edit’ button to the right hand side of this pop-up allowing you to change the link to whatever you see fit.

8. Additional block options

Earlier in this list I mentioned the sidebar to the right. This sidebar has two tabs: The first tab, labelled ‘Document’ is your default post or page settings, categories and tags.

The second tab is your ‘Block’ tab. This provides some additional settings for the block you are working on and will change depending on the type of that block. In the screenshot I have my paragraph block in use, and the ‘Block’ tab is showing me some options for text size and colour settings.

There are some handy hidden features in this Block tab; you can change your columns from two to three or more, you can edit alignment of your headers, and I’m sure you will find plenty of other new options in this section.

9. Make use of the keyboard shortcuts!

WordPress has been making use of keyboard shortcuts for a while, but Gutenberg has a handy cheat sheet built in, allowing you to see a list of them as you make your content.

To view the keyboard shortcuts just click on the three dots icon in the top right hand side of the Gutenberg editor. There is a ‘Keyboard Shortcuts’ link there.

Of course it doesn’t save you time to keep clicking between your editor and the keyboard shortcuts list, so it might be worth taking a little time to remember a couple of the ones that will come in handy to you the most. You’ll be creating content much faster by the end of it!

10. Installing the ‘Classic Editor’ plugin.

As mentioned, Gutenberg is set to become the new default WordPress content editor, but it might not be for everyone. Perhaps you want to try Gutenberg, but you haven’t found the time leading up to the release of WordPress 5.0 and you want a little more time to just keep things as they are.

Whatever the reason, it is still an option to keep your website on the classic editor. When WordPress 5.0 is released and Gutenberg along with it, you can add a plugin to your site called ‘Classic Editor’.  Simply install and enable this plugin and it will revert you back to TinyMCE for the time being.

 

Gutenberg introduces a huge change to one of WordPress’ core features, and has been met with some mixed reviews, but I have found it to be reasonably user-friendly and most issues I encountered were a case of just learning where things are and how to use the new editor.

These tips cover how to overcome several of the questions I found myself asking whilst using Gutenberg, and I hope they offer some assistance when you come to use Gutenberg for the first time. If you find yourself unsure how to add anything which was not covered in this guide, feel free to contact our support team and we will be happy to talk you through it.