WordPress Gutenberg Editor

WordPress’ visual editor is a staple for the millions of content creators who rely on WordPress to keep their websites and blogs running. However, the default editor isn’t always the easiest for users to navigate. This is especially true for beginners, or those looking for more custom features.

With this in mind, WordPress is hoping to roll out a new editor – one that’s more intuitive and functional for beginning and advanced users alike. Known as Gutenberg, the new approach to editing within WordPress is currently in beta, with development currently ongoing.

In this post, we’ll introduce you to the new Gutenberg editor. This will include a look at its main features, pros and cons, and what its use may mean for the future of WordPress. Let’s get started!

What Is the Gutenberg Editor?

Beginning development in 2017, Gutenberg is the current name for a new editor that will be incorporated into a future WordPress version. As such, it would be a replacement for the current visual editor that hasn’t changed much at all in recent years.

While the current editor doesn’t take into account article design structure, Gutenberg is focused on ‘blocks’ of content, which can be manipulated like third-party page builder plugins.

Finally, it is important to note that the editor is currently in beta, and it should not be used on production sites. Instead, a sandbox or test site is your best bet.

Why Gutenberg?

At this point, you may be asking yourself the following question: If WordPress already has a default editor, why does Gutenberg even exist? There are a few reasons, but it all comes down to changing trends.

Of course, there’s nothing inherently wrong with WordPress’ current visual editor. However, some people find that it is lacking the options they need, and turn to alternative solutions. There are plenty of plugins out there that offer a different type of editing experience, such as Visual Composer and The Divi Builder.

What has become clear is that a lot of WordPress users prefer to create content through these kinds of drag-and-drop editors. After all, they can be more intuitive and flexible than the default visual editor. The hope is that with the addition of Gutenberg, users will no longer need to seek out a plugin to add this functionality to their sites. Instead, it will be built right into the platform.

How to Install the Gutenberg Plugin

To learn more about Gutenberg, we recommend test driving the plugin by downloading and installing it. The automatic method takes a few clicks, although if you’d like to install it manually, navigate to the WordPress.org Plugin Directory and search for the plugin. Once you’ve found it, click Download:

how to install the Gutenberg plugin

The plugin’s .zip file will automatically begin the download process. Once complete, go to Plugins > Add New in your WordPress dashboard, and click Upload Plugin on the top left corner of the page:

upload wordpress gutenberg plugin

Click Choose file, or drag and drop the Gutenberg .zip file into the plugin uploader. Then, click Upload Now. Select the blue Activate Plugin button, and your plugin is now installed, activated, and ready to go!

Gutenberg Features

To access the Gutenberg editor, navigate to either your Posts or Pages screens. Mouse over the post or page you’d like to edit, and you’ll see a small menu appear. Select Edit to use the Gutenberg editor, or Classic Editor for the WordPress default editor:

wordpress gutenberg features

Upon first glance, Gutenberg can be overwhelming. Here’s a breakdown of the main features:

features of wordpress gutenberg

At the very center of the editor you’ll see your main content area. As you mouse over each section, you’ll notice a faint outline appear. This indicates that the section is a block, and once clicked, can be edited as such:

gutenberg features

Here, you can choose the block’s format (Heading, Quote, List, Preformatted, or Verse), add links and other HTML elements, and perform basic editing tasks. To add another block, click the Plus icon and select from one of the many options:

Gutenberg editor features

If you’d like to rearrange the content blocks, no problem! Simply select the block you’d like to move, and use the Up and Down arrows to the left of the content:

editing with the gutenberg plugin

Along with written content, you can also upload images and videos. Just like WordPress’s default editor, you have the option to Upload, Insert from Media Library, or drag and drop media in:

Gutenberg editing options and features

As basic features go, Gutenberg seems to have it all figured out. Now let’s take a look at a few more advanced features.

The most interesting is the ‘slash autocomplete’ feature. Essentially, autocomplete enables you to create a new block without having to use your mouse. Simply press Enter on your keyword, then enter a forward slash (/) followed by the type of block you would like to create. For example, you would use /heading to create a new content block with a heading format:

Gutenberg editor and plugin features

Other advanced features include document outlining (which appears when you have two or more headings within your content) and the ability to add a content button:

add content button with wordpress gutenberg

With Gutenberg you can even embed content from an array of other platforms. These include YouTube, Facebook, Instagram, Twitter, and more.

Gutenberg Pros and Cons

In our opinion, the main positive of the Gutenberg editor is the intuitive interface. Even those with very little experience can put together cohesive and beautiful content.

In addition, Gutenberg provides a distraction-free experience. With blocks, users no longer need to rely on menu bars. Instead, the entire content creation process – including writing, editing, and formatting – can be handled on the white, minimal screen.

Perhaps the biggest con is that Gutenberg doesn’t currently support custom plugin meta boxes. These are common for plugins such as Yoast SEO, CoSchedule, and Jetpack. Essentially, this makes those kinds of plugins ineffective, as much of their use occurs in the content creation stages. However, given that the plugin is still in beta, we’ve no doubt these features will be added in due course.

What Does Gutenberg Mean for the Future of WordPress?

For plugins and their developers, Gutenberg may be a bit of a headache, as backward compatibility doesn’t seem to be available. As such, developers will need to update their plugins and themes to ensure they are fully compatible with the new editor.

However, on the upside, developers would be able to create custom blocks for their themes or plugins. This translates to further customization options and improved usability as Gutenberg evolves.

How to Contribute to Gutenberg

As a WordPress user, you have a unique opportunity to contribute your own thoughts and ideas to Gutenberg’s developers. This can improve the plugin, and your work may even become part of a major WordPress feature.

For non-technical users of WordPress, feel free to report any glitches or bugs while using the editor. This alerts developers to the issue, and it could even give them insight into typical usage.

For those interested in technical contributions, you can check out the Gutenberg contribution guide. Here you’ll learn how to test the plugin, collaborate with developers, and even contribute to the documentation.

Get started.

Build faster, protect your brand, and grow your business with a WordPress platform built to power remarkable online experiences.