A Tour of the Gutenberg Editor for WordPress

It’s the year’s hot topic – Project Gutenberg. If you haven’t tried it out yet, you may be wondering what all the fuss is about.

If you’re not already aware of it, Gutenberg is a new interface for editing posts and pages in WordPress. It’s currently a plugin, but there are plans to integrate it into WordPress core. So it makes sense to familarise yourself with it as soon as possible.

In this post I’m going to give you a guided tour of Gutenberg and work through some of the tools and features it provides.

Note: Gutenberg is still under active development, and the project team is inviting feedback. This means it is likely to undergo some changes before it’s incorporated into core. However, the main features will remain.

The project Gutenberg website

The Heart of Gutenberg – Blocks

Gutenberg is based around the block. This is a section of content within each post or page that is used to create, edit and output content. A block can contain text, one or more images (including galleries and slideshows), video and more. In the case of text, each paragraph, list or heading has its own block.

Each block can be moved around within your content, making it easy to change things around when you’re editing a post. You can also adjust settings for each block such as styling and layout.

Gutenberg also changes the look of the post editor. Instead of the tabs for layout and text (or code) view, you see a cleaner editing interface and can switch views for an individual block. And instead of the familiar metaboxes on the right hand side, there’s an interface that is reminiscent of the Customizer.

When opening up a new post, things look very bare:

A new post in the Gutenberg editor

Let’s take a look at some of the specific elements of the screen, while working through a new post.

Adding Content

Adding content with Gutenberg may at first look a little daunting. How do you create all those blocks so you can insert content?

Text Content

The answer is that you don’t. Just start typing as you normally would. If you want a new paragraph, just hit the Return key – the system will automatically create a new paragraph for you, in a new block.

To create a list, start typing and then select the paragraph symbol above and to the left of your block. From the dropdown menu, select list. If you’re a touch typist like me and prefer to use the Tab key on your keyboard, you can’t with Gutenberg, as the Tab key is used to navigate between blocks – but it seems they’re working on this.

A post in Gutenberg with text blocks added

To create any other kind of block, you can click the + icon in the relevant place in your post, or if you don’t have any blocks below the one you’re currently working on, pressing the Tab key will create and navigate to a new block below the existing blocks. This only works if you’re in a text block. Once you’ve created the block, click on the icon for the type of block you’re creating – there’s one for each of text, heading and image.

To create a heading, click on the H icon and then type in your text. You can also select what level of heading it is.

In addition, you can create quote and subhead blocks by selecting those options after clicking the + icon to add your block. As you’ll see, the most commonly used block types are accessed via this + icon, while the common ones are accessed via direct icons on the right hand side.

Selecting a block

Images

When you select the image icon, you’ll be presented with the interface to upload your image right in the block, without entering the media uploader:

adding an image

You can then edit the caption right in the block, and there are buttons you can click for links and to format the caption. You can also set the alignment using the icons above the image as well as editing it. Instead of selecting a size from small, medium and large, you can use the resize tool to manually resize the image (with your mouse) to whatever size you want. This has the benefit of flexibility but could mean that your layout ends up looking messier than with standard images sizes. And there are accessibility issues, which the project team is currently working on.

If you align an image to the left or right, a text block will automatically appear next to it so you can add text that wraps around it.

Text wrapping around an image block

And if you add a smaller text block next to an image and then add a second one, they will both float over correctly:

two blocks aligned next to an image

Creating these is a little tricky right now – you can’t use the Tab key but instead have to hit the + icon to add a new block, or the icons to the right of the image. And it seems that you can’t choose to put text under a right or left aligned image – you just have to keep going until you get to the bottom of the image. There are still some bugs with this, so keep coming back to see when they’re ironed out!

Galleries

You can convert an image block to a gallery by clicking the image icon to the top left of the block and then selecting Transform into: Gallery. You can also use the same icon to transform it back.

creating a gallery block

Once you’ve created a gallery, you have the option to upload more images, although I was only able to add uploaded images this way – I couldn’t persuade it to let me add more images from the media library. If you want to add multiple images at once, either from your computer or from the media library, the best way to do this is by using the + icon to create a new gallery (instead of hitting the Tab key), selecting gallery, then adding your images. If you convert an existing image, you won’t have the option to add more images from the media library and it will be harder to add multiple images at once. This is another bug that I’m sure will be ironed out!

Editing Your Blocks

To edit a block, simply click into it and start editing. You can edit text, change images, and more. You can also delete a block by hovering over the right hand side of the block and clicking the trashcan icon that appears.

To reorder blocks, drag them around the screen with your mouse or use the arrow keys that appear when you hover over the left hand side of each block:

moving blocks with the up and down arrows

You can convert a block to another block in the same group of block types by clicking the icon at its top left or the ellipsis on the right. You can’t change a text block into an image block, for example, but you can change a paragraph into a list, heading or quote, and switch image blocks into galleries and vice versa.

By hovering above the block you can also access the formatting bar, which gives you access to some basic formatting according to the type of block. So for a text block you can format alignment, text weight etc., and for an image you can edit the alignment and add links. This formatting bar also gives you access to the links icon:

formatting text in a block

Clicking the ellipsis to the block’s right gives you access to more options including the code view, duplicating the block, and converting it to a shared block.

Shared Blocks – Duplicating Content across Posts

A feature of Gutenberg which I think is really exciting is the shared block. This is a block that lets you easily duplicate content across posts and pages in your site. If you’ve ever used a plugin to create call to action buttons at the bottom of each post, or maybe to add a snippet of information about the site to multiple pages, this new feature is for you.

To create a shared block, simply create a block of any type in a post where you want that content to appear. Then hover over the ellipsis to its right and select Convert to shared block. Give your block a unique name (you’ll see from the screenshot below that I didn’t do this and it leads to confusion). Then when you open another post and click the + icon to add a new block, select the Shared option, and select the block you want to add.

The shared blocks you add don’t even have to be from published posts. So you could create a draft post with all your shared blocks in it, then add them to your other posts when you need to. Sweet!

Document Settings in Gutenberg

When you’re in the post editor in Gutenberg, you’ll notice that on the right side, the familiar metaboxes have been replaced with a menu that looks a lot like the Customizer menu. You can use this to work with the block you’re currently editing by selecting Block at the top, or edit settings for the post by selecting Document.

the tabs in Gutenberg

Options you have in the Document view include everything you’re used to seeing in metaboxes and more:

  • Status and Visibility – use this tab to publish your post or to edit its status and/or visibility. This is equivalent to the Publish metabox. You also access revisions from here.
  • Categories – assign categories to your post and add new ones, just as you would with the Categories metabox.
  • Tags – this works with tags in the same way, and again is equivalent to the Tags metabox.
  • Featured Image – this works in the same way as the Featured Image metabox.
  • Excerpt – use this tab to edit the excerpt. Personally I think this is in a much better position than the current metabox, which is hidden below the content.
  • Discussion – mange comments here; again this has moved from below the content.

Saving Your Post

It’s worth highlighting a key difference when it comes to saving and publishing your post.

Because Gutenberg is built in JavaScript and not PHP, it is dynamic. This means that your changes will be saved automatically as you work. You no longer need to hit a button to save your post as a draft because Gutenberg will do it for you.

When you come to publish your post, Gutenberg will prompt you with a check that you’re ready to publish:

checking you're ready to publish

This is a handy check and I can already envisage adding extra checks to it via a plugin.

Gutenberg: Still a Bit Buggy but Certainly Promising

There are aspects of Gutenberg that I’m still concerned about. It’s still got plenty of bugs that need ironing out, and for me as someone who uses the keyboard as far as possible, I look forward to being able to create lists without using the mouse.

But there are some features which I think are great. Shared posts present a lot of potential for avoiding extra code or manually duplicating content, and I like the way Gutenberg makes it easy to reorder content. I also think the tabs on the right hand side are an improvement on the current metaboxes. I wouldn’ t install it on a live site just yet but I look forward to doing so in the future, and to seeing it as part of core.

Rachel McCollin
Have you tried using Gutenberg yet? We would love to know what you think. What's your overall feeling about the new WordPress editor?