The Gutenberg WordPress Editor: Making the Switch

WordPress is the most popular content management system out there, currently powering over 30% of the entire web. At the time of this post, we have just passed the threshold of WordPress 5.0, which marked the release of Gutenberg. In this blog, we’ll talk about what Gutenberg is and how you should prepare your website for it.

What is Gutenberg?

Gutenberg is the new WordPress text editor, which released in WordPress 5.0 on December 6, 2018. This new editor takes a block approach to create content, making the fusion of content and design possible for those without coding experience.

It’s a pretty big leap from the current text editor, and it has already begun to shake things up in the short three months it’s been out. Instead of having to fill multiple meta boxes with content, you can add several different types of content within one interface, and tweak the design to your liking. Think of it as a page-builder, but much smoother and less bloated.

Here’s a quick snapshot of the new editor and gallery block, where you can collect images and arrange them into any format:

From a content management perspective, the most exciting feature is the ability to see style changes in real time. Often times, I’ll play around with content and styles, save as a draft, preview, and repeat indefinitely until the page looks good. With Gutenberg, you see all the style changes in real time as you’re editing, meaning there is less back and forth – and less time spent making or editing pages.

Some themes can also edit content in real time, but I’ve found that those are typically slow and buggy (I’m looking at you, Visual Composer). The new content editing experience should prove to be both enjoyable and more time efficient. The best way to see what it has to offer is to check out WordPress Gutenberg demo and play around with it a bit.

Why introduce Gutenberg?

With the advent of many DIY website builders like Wix, Squarespace, and Weebly, WordPress needed to update its content creation experience. The Gutenberg WordPress editor will have some similar aspects to DIY website builders, but as our senior developer Edwin Cromley points out, “things are less about competing with a particular platform and instead are more focused around creating a superior product for any platform.” So it’s not necessarily about competing with Wix or Squarespace, it’s about making the simplest and most enjoyable content experience possible. The people at WordPress believe that a block-first approach is the way to achieve that.

Gutenberg is officially here, despite some resistance. It’s no surprise that many companies and businesses have delayed upgrading their WordPress version, in fear that Gutenberg will break their site. If that describes you, check out then check out the section below that will go over how to make the transition to Gutenberg.

Preparation is necessary

The main critique surrounding Gutenberg is that it’s now part of WordPress core. That means that in due time, everyone on WordPress is going to have to adopt Gutenberg. You could, of course, wait to update your core files, but that may leave you vulnerable to security risks.

Teams with experienced developers might be comfortable with putting off core updates, but most likely you’re going to end up on Gutenberg. So, how will it affect what you already have on your website?

Blocks for everyone

For basic websites that use the classic editor to house their content (like blogs, for example), the transition should be relatively painless. What Gutenberg will do is convert all of your text and media into a single HTML block. From there, you can either edit that block as HTML or convert all the content into separate blocks.

Gutenberg will detect different paragraphs and components and treat them as their own block, giving you more control over the content structure in the backend.
The good thing is that while content will appear differently in the backend, it will still look the same to front-end users, regardless if you leave it as an HTML block or split it to separate blocks. So, there isn’t necessarily a need to go back into your existing content and make changes.

What kind of Gutenberg blocks are there?

There are a bunch of different Gutenberg blocks you can utilize, ranging from text blocks to image blocks and design blocks. Combining these blocks lets you achieve a basic, clean, page design. However, if you want to create something more advanced, you can always use the HTML block and drop in your own code.

Here’s a list of the currently available Gutenberg blocks. We imagine they’ll be adding even more in the future.

• Text
• Heading
• Subheading
• Button
• List
• Single image
• Cover image
• Image gallery
• Audio embeds (Spotify or Soundcloud)
• Video embeds (YouTube or Vimeo)
• Quote
• Pullquote
• Custom HTML
• Columns
• Separator
• Shortcodes

What about advanced custom fields and custom post types?

Things get a little more complicated for more robust websites that utilize custom post types and the ever-popular advanced custom fields (ACF) plugin.

Unfortunately, Gutenberg won’t work with ACF right out of the box. However, there are some solutions to make sure your content won’t break.

One option is to code something that would understand your existing ACF or CPT data. By setting up a system for Gutenberg to read the metadata, you would ensure that all of your content appears correctly on the frontend. Another alternative is to set up a block template that lays out a list of blocks when you create a new post or page. You can “lock” templates so that blocks can’t be added or removed, or leave them unlocked to allow for more flexibility. This essentially creates the same benefit as custom field plugins – structuring the appearance of post data. Riad Benguella made a simple plugin and video demonstrating this exact process.

So, what do I need to do?

When you update WordPress core to 5.0 (and inevitably install Gutenberg), website maintenance will come down to what types of content you have. For simple blogs or websites that contain most of their content in the default text editor, you shouldn’t see any issues on the frontend. You’ll notice that Gutenberg will turn your content into an HTML block, but you only need to touch it if you want to organize the content in the backend. For those of you using ACF or CPT, you’ll likely need the help of a developer to allow Gutenberg to understand your metadata. And if you simply want to update core but not use Gutenberg at all, you can install the classic editor plugin, but beware that there will probably be bugs in the early stages.

Use the Classic Editor plugin on your live site

If you aren’t keen on moving to Gutenberg immediately, the Classic Editor is a good way to update to WordPress 5.0 while still using the editor you’re accustomed to. The Classic Editor plugin is being developed by WordPress contributors, but it’s uncertain how long support for it will last. It’s more just to help developers buy some time so they can figure out solutions for different content types. So, if you need more time to figure out the logistics of updating your website, this is a good option.

Create a staging/dev environment (if necessary)

For some websites, your hosting provider may already have you set up with a development environment. For instance, we typically use Siteground and Pantheon for our WordPress sites, and they come with development environments out of the box. If you don’t have one, set one up so that you can test out Gutenberg and make sure no content or functionalities break. Having a dev environment is also just generally a good practice to prevent things from breaking on your site and testing new elements.

Install Gutenberg on your dev environment

So while you have the Classic Editor installed on your live site, go ahead and install Gutenberg on your dev site. Now, go through both the backend and frontend to see if things are working properly. The main thing you’ll notice is styling, as blocks look much different than the current editor. Simple content should appear fine, but anything with meta boxes will probably have to be looked at. It’s important to be thorough in this stage because this is essentially your last chance to review changes before they go live.

Fix any issues, then go live with Gutenberg

After you sift through your website and convert content to blocks, go through the frontend one last time and make absolutely certain that everything is working. Once you’ve done the final run-through, go ahead and push your dev environment to the live site. Viola! Now you’re officially on Gutenberg!

Gutenberg Ramp

Another viable alternative is a plugin that Automattic released called “Gutenberg Ramp.” This plugin essentially lets you select what post types will and will not show the Gutenberg editor. With control over what posts use Gutenberg, you are afforded the opportunity to learn and adopt Gutenberg at your own pace. If you don’t want to use the Classic Editor or go to full-blown Gutenberg quite yet, Gutenberg Ramp is a nice alternative.