Preparing for the WordPress Gutenberg Editor

If you use WordPress, a big change is coming. The impending release of version 5.0 will bring along with it the new Gutenberg editor. It’s poised to become a major step up in terms of the ability to customize the look of your content in a default WordPress installation.

It’s a very different experience in that this new editor will break content sections down into “blocks”. Blocks will enable you to, say, add a full-width image right in the middle of a blog post. Or you might build your own custom blocks that allow users to implement different layouts.

In short, Gutenberg brings a little bit of what page builder plugins have been doing for years – without some the fancier bells and whistles. It’s a more unified way to mix text and multimedia into your content. And it promises to be a much more user-friendly and visual way to do things.

This evolution has brought about a ton of debate and, naturally, a good bit of concern. WordPress boasts an enormous market share and designers/developers/users are rightfully wary of such a big change. The team responsible for Gutenberg is taking steps to assuage concerns, but the bottom line is that we won’t know the full effect of things until the official release.

While WordPress 5.0 will be released sometime in 2018, you can try Gutenberg now in the form of a plugin. If you want to get a behind-the-scenes look, check out the 2017 State of the Word Address, which features a live demo.

Gutenberg is something that all of us should be aware of. In order to take full advantage of the new editor, there are some steps we’ll have to take. Plus, some may decide not to use it at all as the “classic” editor will still be available as a plugin for the foreseeable future.

With that in mind, let’s take a look at how to prepare for the big change. We’ll look at the considerations and share some helpful resources that can guide you along the way.

The Gutenberg Editor

The Decision to Switch (Or Not)

Major changes to any software usually lead a healthy portion of users to avoid upgrading. Operating systems are a great example as many larger companies are still a version or two behind. Of course, for security and compatibility reasons, it’s never recommended that we run outdated versions of WordPress. So, in that way, upgrading to 5.0 isn’t really optional.

But since we can decide to continue using the classic editor via a plugin, the decision of whether to utilize Gutenberg is one we’ll all have to make. Depending on the setup of your site, switching could be kind of a big deal. Developers will have to consider:

Any potential complications with existing themes, plugins and customizations.
If a client is responsible for managing content, some training may be required.
The increased demand for customer support, should something unexpectedly break.
If you’re already using a page builder plugin, does it make sense to change?

One thing is for sure, it will be a process for many of us. For mission-critical sites, it might not be a great idea to implement changes without testing them first within a development environment. If you manage multiple sites, that can be a whole lot of work.

I would suspect that some developers would choose to hold off on switching for some time – at least for existing sites. On the other hand, if a site could really benefit from the added capabilities of Gutenberg, then it might make sense to take the plunge.

Your Theme and Gutenberg

By default, your theme should work with Gutenberg just as it does now with the classic editor. But you do have the ability to add in extra styling for the various available blocks. For example, the image block places code similar to the following into a published page:

<figure class="wp-block-image"><img src="your-image.jpg"></figure>

So, you could provide some CSS for .wp-block-image to jazz things up a bit – although it’s not required.

But where the editor really holds promise with themes is the ability to create your own custom blocks. Think of the potential to add site-specific layouts and content directly into the editor. Then add in the fact that you can pass styles on to the back end of your site, providing users with a more accurate WYSIWYG experience. This could be quite the game-changer when building a site. Check out the resources section below to learn more.

Your Theme and Gutenberg

Plugin and Customization Compatibility

This is where much of the concern lies with both developers and site owners. Untold numbers of websites have had their back end customized in some shape or form. And just about everyone with a website that runs on WordPress uses plugins. So yes, there is the potential for something to go wrong.

However, this is an area where the folks behind-the-scenes are really working diligently. Backwards compatibility has always been a key part of WordPress and that doesn’t figure to change now. And the larger plugins out there all have an incentive to make sure that their products work with the new editor. There’s simply too much to lose for everyone involved for this not to work.

But, as mentioned earlier, testing everything out in a development environment is the best way to know how Gutenberg will affect the setup of your site. From there, you can figure out what (if any) issues you might need to clean up.

While it certainly sounds like most configurations will work just fine, there is always that chance that something doesn’t play nice with the new editor.

Client Considerations

One other area of interest is how Gutenberg may affect your clients. The way it stands, not everyone knows that an entirely new editing experience is on the way. Casual users probably aren’t paying close attention, even though recent WordPress upgrades have mentioned the coming changes. So they may be in for a bit of a shock when 5.0 drops.

But this is where we can take it upon ourselves to make a difference. Engage clients and let them know that Gutenberg is on the horizon. Provide a general background and maybe a few user-friendly links that might help them become more familiar with the UI.

A little bit of education now can (hopefully) save you from a few panicked calls later on.

Client Considerations

Resources

As Gutenberg continues to evolve, there are more valuable resources coming out to help you learn and prepare:

Gutenberg Handbook
There is a process behind creating custom blocks. To learn more, check out the Gutenberg Handbook. It takes an in-depth look at how the editor works and provides some tutorials on block creation.

Gutenberg Boilerplate
Ahmad Awais has created a boilerplate for building custom blocks for Gutenberg. He has included a few different scenarios that can serve as a great learning tool.

Gutenberg Theme
If you want to see an example of how a theme can take advantage of Gutenberg, take a look at the free Gutenberg Theme over on GitHub. It was built by Tammie Lister, who is the head of the team working on the new editor. The theme isn’t necessarily meant for a production environment, but provides a useful playground for interested developers.

WordPress Gutenberg Guide
Codeinwp has put together an illustrated guide that will get you familiar with the basics of Gutenberg, along with some more advanced tricks.

Development Updates
The official source for Gutenberg Development Updates is a great way to keep up with new features, along with thoughts from the developers themselves.

Block Party

The full release of Gutenberg will be a watershed moment in the history of WordPress. And, overall, it looks to be a change for the better. There will certainly be an adjustment period and some bumps in the road. But that is only more the reason to dig in now and see how everything works.

You’ll get a sense of how you might benefit from Gutenberg and valuable knowledge on how to handle the transition ahead.