Make Sure You Test Gutenberg

October 4, 2018

Soon, the WordPress content editing experience is going to undergo the biggest change it’s ever gone through since 1.0 was released at the beginning of 2004.

I’m referring to Gutenberg, which is WordPress’s name for a brand new editor that’s in the works. This new “block”-based editor will be the default experience starting with WordPress version 5.0. If you’ve kept your WordPress installation current (and we hope you have!), you’ve likely seen this screen in the admin introducing this new editor:

Gutenberg represents a quantum leap forward for the WordPress editing experience. But, as with all big changes, it also poses a number of challenges. Because of this, the WordPress community has been unusually divided in its stance toward Gutenberg’s forthcoming inclusion.

How Gutenberg is Different

Since the beginning, WordPress has assumed that the “content” of a post or page is just a giant blob of text, perhaps with some images or videos sprinkled throughout. But as the web has evolved, content has gotten much more sophisticated, containing not just words and images but actual layout, such as multi-column text, images with text, buttons, and much, much more.

As demand for more sophisticated content has grown, a number of approaches have been developed to meet these greater needs. One approach has been the rise of shortcodes, special markup that can be processed by WordPress as it is delivered to users. Another approach has been the rise of “page builder” tools, including tools like Visual Composer, Divi, and Beaver Builder.

WordPress has remained useful and competitive because of these diverse options, but since none of these approaches were included in the core code of WordPress, widespread adoption and standardization was prevented.

Gutenberg aims to fix that by bringing powerful editing tools right into WordPress itself, with no need for third-party plugins or ugly shortcodes.

Instead of offering one giant “WYSIWYG” editor area, Gutenberg organizes your content into separate “blocks,” each of which has its own unique options and properties. Blocks come in a variety of types, such as text, pullquote, multicolumn text, gallery, and so forth.

Some blocks, like the text block, are pretty simple and straightforward. Others offer extensive layout controls for adjusting how the content is structured and organized. Watch this demo of Gutenberg to better understand how blocks work, or just try it yourself.

Gutenberg’s new “block” based editing experience puts a lot more power in the hands of content editors, making it much easier to build more varied and visually engaging pages on your website.

The Downside

While Gutenberg promises to open up new possibilities for editors — which is great! — it has caused some gnashing of teeth for a number of reasons.

The first issue is that, since Gutenberg is somewhat “late to the game,” many site administrators and developers have already put time and energy into developing and using other tools that accomplish similar things.

At best, Gutenberg makes all that work moot, as we all transition to the “official” way of handling sophisticated content. At worst, however, Gutenberg and those other approaches (such as Cornershop’s custom “Sections” infrastructure) may actually conflict with one another, causing the post editor as well as the display of pages to no longer look or function correctly. Yes: Gutenberg could break your site!

Gutenberg brings about other technical issues as well, such as the way it actually stores block information in the database and how that can affect things like search and migrating content into other non-WordPress systems.

So Now What?

Recognizing that the rollout of Gutenberg poses significant problems for some users and sites, particularly those using other Gutenberg-like tools, the WordPress community has developed a Classic Editor plugin, which will effectively “deactivate” Gutenberg on WordPress installations that would normally have it as the default editor (meaning the soon-to-be-released 5.0, and anything after that).

Anyone running a WordPress site that was developed prior to the rise of Gutenberg should spend some time figuring out if your site will work with Gutenberg.

  1. Important note: It’s best if you can do your tests in an environment that won’t impact your live website, such as a  staging environment.
  2. Install the Gutenberg plugin. This is available now, in advance of its inclusion in the forthcoming WordPress 5.0.
  3. Also install the Classic Editor plugin.
  4. Experiment with each editor options to see what effects they have on your site.

We suspect most people running highly customized and/or sophisticated themes will wind up needing to install and enable the Classic Editor plugin to ensure that when WordPress updates to 5.0, nothing breaks.

We hope that over time everyone can eventually move over to Gutenberg. Though not yet perfect, Gutenberg opens up a whole new editing world that promises to provide a lot more power as the web continues to grow and evolve.

Worried about Gutenberg and its affect on your site? Let us know how we can help!

By Ben Byrne

Ben is our very own designer/developer unicorn. He’s been designing on the web professionally for over 17 years, but he’s also been a developer for almost as long, building up extensive experience with languages such as HTML, CSS, JavaScript, and PHP, and putting them to good use implementing his designs on several CMS platforms, including WordPress and Drupal. In addition to his own work, Ben oversees the design and development the rest of our team does, ensuring it’s up to our high standards. He enjoys sharing his knowledge, and has presented to groups of varying sizes on topics like the difference between print and web design, web typography, WordPress widgets, and front-end performance.