View Categories

An Introduction to the WordPress Gutenberg Editor

The Gutenberg printing press.
  • Jul 13, 2018
  • 0
  • by A2 Marketing Team

Thanks to its open-source nature, WordPress is always improving. Most of the changes made to the platform are gradual in nature. However, that’s not always the case, as we’ll see with the upcoming release of WordPress 5.0.

With this new version, the default WordPress editor will receive a major makeover. This is currently known as the Gutenberg editor and will result in some significant changes to the way you create content on your WordPress site. It’s an important development that you need to be prepared for.

In this post, we’ll introduce you to Gutenberg and how it works. We’ll also discuss why it exists and what it means for the platform. Let’s get started!

What Is Gutenberg (And Why Does It Exist)?

If you’ve spent any time with WordPress, you’ll be very familiar with the default editor:

The default WordPress editor.

While it’s received some tweaks here and there, this editor hasn’t changed much for a long time. Some users are still happy with the editor’s functionality, but others have become dissatisfied with it as online content creation has evolved.

For instance, consider the current popularity of page builder plugins, which help you create pages and posts more intuitively. They provide lots of pre-built elements to get you started, and let you arrange and customize them directly. For example, here’s what the visual editor feature looks like in the popular Divi Builder plugin:

The Divi Builder plugin editor.

The Gutenberg project is an attempt to add this functionality directly into WordPress. Like a page builder, it provides pre-built elements – called ‘content blocks’ – that you can add to posts and pages. You can then organize and tweak these blocks individually to create your content.

Gutenberg’s goal is to make this process as simple and intuitive as possible. However, opinions are split as to whether it accomplishes this or not, which we’ll talk about more in a moment. First, let’s take a closer look at how Gutenberg actually works.

How Does Gutenberg Work?

The best way to understand how Gutenberg works is to try it out yourself. While the final version is still a ways off, there’s a beta version you can test:

The Gutenberg plugin.

To use Gutenberg, simply install and activate it like any other WordPress plugin. However, it’s important that you keep in mind that Gutenberg is still under development. For that reason, you should only install it on a testing site.

Once the plugin is installed, create a new page or post. Right away, you’ll see that things look very different:

The Gutenberg page editor.

To start out, hover over the text Write your story and click on the plus sign:

Adding a content block in Gutenberg.

Here, you can add your first content block, with plenty of options to pick from. Let’s keep things simple, and start with a Paragraph block:

A paragraph block in the Gutenberg editor.

As soon as you add the block, new options will appear in the sidebar on the right side of the screen. These options will vary depending on the type of block you’re editing. With a paragraph block, you can change text size, color, alignment, and so on. If you click on the Advanced section at the bottom, you can also add custom CSS classes.

Type something into your text block, and hit Enter. Just below, you’ll be able to add another content block. This time, let’s insert an Image block:

An image block in the Gutenberg editor.

As you can see, this new element looks quite different. You can upload an image directly to the block, or add one from your Media Library. Once you do that, new options will appear in the right-hand sidebar:

Image block settings in the Gutenberg editor.

You can add alt text for your image, change its dimensions, and so on. By continuing this process, you can build out your content piece by piece.

Most of Gutenberg’s existing options are self-explanatory, so we encourage you to play around with the plugin and explore everything it has to offer. However, before we wrap up, let’s talk about the implications this upcoming change will have for WordPress.

What Does Gutenberg Mean for the Future of WordPress?

As you’ve seen, Gutenberg is quite the change from the current WordPress editor. The editor is meant to be easier to use and more beginner-friendly. It’s supposed to make it simpler to customize your content without requiring any coding. Plus, the visual nature of Gutenberg means you’ll get a more accurate picture of what your content will actually look like.

However, not everyone is on board with the idea of Gutenberg or happy with its current state. In fact, Gutenberg has been very controversial since its announcement. There have been plenty of think-pieces outlining both its pros and cons. You may also have noticed that the reviews on the Gutenberg plugin are rather mixed.

Some people feel that it is actually less intuitive and more confusing than the default editor. It’s also currently lacking certain features that are important to more advanced users – such as markdown support. There are also plenty of concerns about Gutenberg’s accessibility (or lack thereof), and the compatibility problems it’s sure to encounter with existing themes and plugins.

Whether you like Gutenberg’s changes or not, it will be added to WordPress core. As a result, the way we all use WordPress will be changing in a fairly significant way.

So, how can you prepare for Gutenberg’s release? Along with learning the ins and outs of the editor, as we’ve already discussed, here are a few other things you can do:

If you have any doubts about Gutenberg, the best thing you can do is get involved to help shape its development. That way, we all stand a better chance of getting a new editor that improves the WordPress experience.

Conclusion

There’s no doubt that it’s an exciting time to be a WordPress user. The platform is undergoing some changes, as it evolves to keep up with the rising popularity of website builders and similar tools. Gutenberg isn’t the only development in the works – but it stands to have the biggest impact.

As we’ve discussed, Gutenberg uses page-builder functionality to make the process of creating content more visual and intuitive. You can try out the beta version of this editor for yourself right now (just remember not to install it on a live site). What’s more, there are plenty of ways to keep up-to-date on Gutenberg developments, and to get involved with the project.

Image credit: Patrice_Audet.