Your guide to the brand new WordPress Gutenberg Editor

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 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 block…you 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:

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

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:

• A – lets you add new blocks.
• B – undo/redo buttons
• C – view a list view (outline) of all your blocks – helpful for quickly navigating between blocks
• D – gives you access to document settings, covering things like categories & tags, featured images, etc. This is similar to the current sidebar in the WordPress editor
• E – when you have an individual block selected, this gives you access to settings that are specific to that block
• F – lets you access a live preview of your post or publish/update your post
• G – once you add some blocks, this is where you’ll actually work with your post’s content

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:

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).

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:

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

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

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:

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.

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.

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
• …you 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:

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

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:

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:

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:

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!):

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:

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.

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:

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:

• Stackable from Gambit
• Atomic Blocks from Array Themes
• Advanced Gutenberg from Joomunited
• CoBlocks from Rich Tabor and ThemeBeans
• Kadence Blocks from Kadence Themes
• Caxton from PootlePress

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:

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

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:

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.

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.

This was originally published on Bibblio and republished here with their permission.