Your guide to the brand new WordPress Gutenberg Editor

< Blog home

As early as mid-November, the way that you create content with your WordPress site is going to drastically change with the release of WordPress 5.0.

The focus of this major release is the WordPress Gutenberg Editor, which is a complete relaunch of the current text editor that you use to create posts and pages.

It's not just a redesign - Gutenberg will change your WordPress content creation experience at a fundamental level, which is why it's essential that you understand how Gutenberg works to avoid any interruptions to your WordPress workflows.

While Gutenberg will require some adjustment in the short-term, the long-term effect is that you'll gain the ability to create more engaging content for your readers. As creators of an engagement-boosting related content tool, that's definitely something we can get behind!

To help make the transition to Gutenberg as painless as possible for you, we created this comprehensive WordPress Gutenberg Editor guide.

First, we'll share a brief introduction to how the WordPress Gutenberg Editor works and what it's changing. Then, we'll show you hands-on how you can effectively use Gutenberg to create content.

What's different about the WordPress Gutenberg editor?

The biggest change with Gutenberg is its new block-based editing approach. To explain block-based editing, let's first take things back to the current text editor.

The current text editor is a lot like a Microsoft Word document. It's one single unified field where you add your text, images, and any other content. You have one toolbar at the top, and that's where you do all of your formatting.

Here's what the introduction to this post looks like in the current WordPress Editor:

Gutenberg Editor Guide

Gutenberg changes this approach by separating every element in your post into its own block (sort of like the Medium editor).

Now, each paragraph is its own block, each image is its own block, each video is its own get the idea.

Similarly, as third-party developers start adding Gutenberg compatibility, content from your plugins will also get its own block. For example, our roadmap includes a dedicated Bibblio Gutenberg block that will let you insert related posts from Bibblio as their own block.

So what does Gutenberg look like with separate blocks? Here's what that same content looks like in Gutenberg:

Gutenberg Editor Guide

If you want to experience this block-based approach in action, you can use the live Gutenberg demo at

What are the benefits of Gutenberg and block-based editing?

So why is using blocks like this better? Well, there are a few ways in which this new block-based approach is going to unlock new functionality for you.

  • A more visual experience. While editing, you'll be able to see how blocks will actually look to your visitors, which offers a much more visual design experience.
  • Easier to work with plugin output. Rather than using shortcodes to insert plugin content, plugin developers will be able to create their own visual blocks that you can use in your designs.
  • More layout and content flexibility. Gutenberg includes blocks that let you add new content (like a button) or create more complicated layouts (like columns) without the need for any custom HTML.

Finally, on a more technical level, the Gutenberg Editor is built with React. This will allow third-party WordPress developers to use more modern technologies, which the current text editor doesn't allow for.

Rapid-fire rundown of important Gutenberg facts

  • Gutenberg is scheduled to be released as part of WordPress 5.0 around November 19th, 2018, but that could be pushed back as late as January 2019 depending on how the testing goes.
  • Gutenberg will work with any WordPress theme, but theme developers can add special compatibility for things like block styling and full-width image alignments, so you will see the term "Gutenberg-compatible theme" marketed soon.
  • All your existing content will use Gutenberg as well, but in a special way. We'll show you how it works at the end of this post.
  • Third-party plugin developers will be able to add their own blocks to the Gutenberg interface.
  • You don't have to use the Gutenberg editor. While it will replace the current text editor in WordPress 5.0, you can disable it by using the official Classic Editor plugin.

WordPress Gutenberg Editor tutorial: How to use the new editor

Now that you know what the WordPress Gutenberg Editor is, how can you actually use it to create content?

The goal of this section is to give you the knowledge that you need to keep creating great content once WordPress 5.0 launches.

Explaining the Gutenberg interface

Here's a quick summary of the most important parts of the Gutenberg Editor interface:

Gutenberg Editor Guide
  • A - these two buttons let you add new blocks.
  • B - this is the body of the editor.
  • C - this sidebar lets you control overall document settings, as well as settings for individual blocks.

Adding content (blocks) to Gutenberg

Adding text content to Gutenberg is simple - you just click and type like you would in the current editor.

The only difference here is that each time you hit Enter, Gutenberg will create a new paragraph block:

Gutenberg Editor Guide

If you'd like to insert something other than a paragraph, you can use one of the two + icons.

Clicking those icons will open up an accordion interface where you can browse all the available blocks (you can also search for blocks by name):

Gutenberg Editor Guide

Once you insert a block, you'll interact with it in the editing interface, as well as the sidebar. For example, if you insert an image block, you'll be able to access your WordPress Media Library to insert images. And then once you've inserted an image, you can add alt text and modify other settings in the sidebar:

Gutenberg Editor Guide

Similarly, if you add a button, you can click and type to add the button text and then configure colors in the sidebar:

Gutenberg Editor Guide

Finally, not all blocks offer sidebar options. For example, the YouTube block just has you paste in a URL and that's it:

Gutenberg Editor Guide

Rearranging content in Gutenberg

In the current WordPress editor, you do all your (re)arranging with cut and paste. While Gutenberg still lets you use cut and paste, you also get a few new options.

When you hover over any block, you'll see two arrows, as well as six dots, on the left side:

Gutenberg Editor Guide

To move the block up or down one spot, you can just click the up or down arrow.

Alternatively, you can also use drag-and-drop to move blocks by clicking on the six dots and dragging the block to its new spot:

Gutenberg Editor Guide

Finally, you can also rearrange blocks into different layouts. If you add the Columns block, you'll be able to insert new blocks inside each column or drag existing blocks into the column layout:

Gutenberg Editor Guide

Configure backend post settings, like categories, SEO, etc.

There's a lot more to creating WordPress content than just the content...

By that, I mean you have a lot of backend "stuff" that you need to configure for each post:

  • Categories and tags
  • URL slugs
  • Featured images
  • SEO settings
  • Social media settings
  • Whether or not to include a post in Bibblio's related content suggestions
  • get the idea!

Don't worry - you'll still be able to control all of that with Gutenberg.

For most of the core WordPress settings, you can use the Document tab of the Gutenberg sidebar:

Gutenberg Editor Guide

The only thing missing is your content's URL slug, which you can set by clicking on the title:

Gutenberg Editor Guide

As for settings that you use a plugin for, that will depend on the plugin.

Some plugins - like Yoast SEO - have already added Gutenberg compatibility. So if you're one of the millions of webmasters who use Yoast SEO, you'll be able to configure your site's SEO from that same Document sidebar:

Gutenberg Editor Guide

For other plugins, you'll still be able to use meta boxes like you can with the current WordPress editor. For example, here's what it looks like to add a review box using MyThemeShop's popular WP Review Pro plugin:

Gutenberg Editor Guide

Each meta box gets its own accordion tab, which helps declutter the interface.

Five tips for working more productively with Gutenberg

From the tutorial above, you might've noticed that using Gutenberg involves a lot more mouse clicks than the current WordPress editor. That might seem like an odd thing to point out, but it's important because it can slow down your content creation process.

It doesn't have to be like that, though.

Once you've mastered how Gutenberg works at a basic level, there are a number of techniques that you can implement to work more productively with Gutenberg.

Here are some of the most helpful shortcuts and tips…

1. Use slash "/" to add new blocks more quickly

Rather than clicking the + icon every time you want to add a new block, you can insert blocks more quickly by typing "/" in an empty block.

After the "/", start typing the name of the block that you want to insert. Gutenberg will automatically suggest blocks that match, and then you just need to hit Enter to insert the block:

Gutenberg Editor Guide

2. Drag images into Gutenberg from your desktop

Rather than manually adding an image block every time you want to insert an image, you can save time by dragging images straight from your desktop into the Gutenberg interface. Gutenberg will automatically upload them to your WordPress Media Library and insert them at the proper spot (that second part is what saves the most time!):

Gutenberg Editor Guide

Just make sure you see the blue line - otherwise, the upload won't work.

3. Use Gutenberg keyboard shortcuts or markdown

Beyond working with generic keyboard shortcuts (e.g. Ctrl + I for italics), Gutenberg comes with its own special keyboard shortcuts, as well as some support for markdown syntax.

To view a full list of keyboard shortcuts, use the Shift + Alt + H shortcut:

Gutenberg Editor Guide

And here's some of the markdown syntax that you can use:

  • ## to insert headers (## is H2, ### is H3, etc.). This will automatically create a Header block.
  • > to insert a quote. This will automatically create a quote block.
  • * to start an unordered list.
  • 1. To start an ordered list.
Gutenberg Editor Guide

4. Explore the different editor modes (like using a unified toolbar)

Gutenberg offers a number of different modes that you might prefer to the default experience:

  • Unified Toolbar - fixes the formatting toolbar to the top of the interface.
  • Full-Screen - hides the WordPress dashboard sidebar to give you a true full-screen editing experience.
  • Spotlight - fades out all blocks except the block that you're currently working on.

You can enable them by clicking on the three dots icon in the top-right corner. For example, here's what the Unified Toolbar mode looks like:

Gutenberg Editor Guide

You can use multiple modes at the same time. And you can also switch to code editing mode from this same drop-down.

5. Use Gutenberg plugins to add helpful new functionality

Just like WordPress as a whole, the Gutenberg Editor is built to be highly extensible, and developers are already hard at work building extensions that add functionality to Gutenberg.

This new functionality comes in a few forms.

First, as you already learned, many developers are adding new blocks for their existing plugins, and we have our own plans to create a Bibblio block for our WordPress related posts plugin.

But beyond that, developers are also creating new plugins that are exclusively focused on Gutenberg. These plugins can help you add both content blocks (pricing tables, testimonials, etc.) and layout blocks (more flexible column structures, etc.). Some good examples to start you off are:

Here's what will happen to all your old content once WordPress 5.0 is released

Now that you have a good understanding of how the WordPress Gutenberg Editor works, let's end with a quick look at what's going to happen to all of your existing content once WordPress 5.0 is released.

Here's a simple test post in the current WordPress editor:

Gutenberg Editor Guide

And here's what it looks like after activating Gutenberg:

Gutenberg Editor Guide

Notice how it's all in one single Classic block, rather than separate blocks? This is done to ensure that the shift to Gutenberg doesn't cause issues with your existing content.

You can still interact with your content in the Classic block just like you would in the current editor. For example, you even get the same TinyMCE toolbar:

Gutenberg Editor Guide

And if you do want to move your old content to Gutenberg, you just need to click the three dots icon and choose Convert to Blocks. Gutenberg will then automatically break up your existing content into blocks and you'll be able to interact with it like any other Gutenberg post:

Gutenberg Editor Guide

And that should be all you need to get up and running once WordPress 5.0 is released in November (or maybe January…)

And remember - if you're already using the Bibblio related posts plugin, keep an eye out for a Bibblio Gutenberg block. And if you're not, learn how Bibblio can help you display better related content on your WordPress site.

Recommended for you

Interested in this topic? Get in touch to talk more