Don't Get Gutenborked: Testing Real Sites with Gutenberg on Pantheon

There's a new WYSIWYG editor coming to WordPress. Many developers, including me, got their first good look at this Gutenberg editor at WordCamp US. And like many others, I found myself wondering "will Gutenberg break existing sites?" If I take a site that was built a few years ago, add Gutenberg, and call it a day, will something break? If the site owner takes a pre-existing post and loads it up in Gutenberg, will it get Gutenborked?

I talked with one of my teammates, Tessa Kriesel, and she was wondering the same thing about a site she made a few years ago that is not (yet) on Pantheon. It was a relatively simple restaurant website. It had just a few posts, Advanced Custom Fields for the food menus, and a contact form or two. But would it work with Gutenberg?

Anchorage Inn homepage screenshot

Guided Migration to a Free Pantheon Sandbox Site

Since this site was not on Pantheon, it didn't have a safe testing environment where we could try Gutenberg (version 2.1). Tessa and I agreed that cowboy coding, just turning on an experimental plugin in the Live site would be a bad idea. By moving it over to a free Pantheon sandbox site we'd get a development environment where we could experiment.

Luckily, Pantheon offers a plugin that makes migrating a live site to Pantheon incredibly easy. The dashboard shows how to get started:

Pantheon site migration

Then our Pantheon Migrate plugin uses Blog Vault to bring over the code, database, and file uploads.

Blog Vault

After a few minutes, we had a working copy in a Pantheon Dev environment. We clicked around to make sure the site was functional after the move. No surprises there; everything had migrated just fine.

Adding Gutenberg

We added Gutenberg just like any plugin through the WordPress admin interface.

Gutenberg plugin install

Clicking around the public facing side of the site, everything still looks good. Jumping over to a page, we see the Gutenberg editor in action.

Gutenberg basic paragraph

And it is slick! Use Gutenberg for just a few moments and you'll see what the excitement is all about. Compared to the "Classic Editor" Gutenberg feels like the future.

Moment of Truth

But Tessa and I weren't worried about the vanilla post type. What about ‘Dinner Menu’ and ‘Breakfast Menu’ that are driven entirely by Advanced Custom Fields?

breakfast menu

Blorg. If we switch over to the classic editor we see that the original configuration suppressed the body field entirely. ACF does all the work here.

classic editor GIF

Similarly with contact forms, the classic editor experience has buttons for generating and inserting the right short codes.

Advanced Custom Fields

Over in Gutenberg we didn't yet have an equivalent button but we could at least manually move the shortcode to a separate block. That gave some nice visual separation in the editor between the paragraph text and the shortcode.

share your experience gif

This step isn't strictly necessary as the shortcode will still render the same regardless. But it is nice to see the shortcode in its own Gutenblock.

Adding a Google Map embed

Without yet having built-in Gutenberg integration for the fields and forms, this change is feeling like a net downgrade in usability. That will flip once those plugins update for Gutenberg. In the meantime, Gutenberg does already handle some meta boxes already in an "Extended Settings" area of the sidebar, just not the ones from ACF that were the only non-core meta boxes on this site). And there are already some Gutenberg-specific plugins that could help out this restaurant website.

Our colleague Andrew Taylor wrote the Gutenberg Block For Google Maps Embed plugin. This plugin makes it exceedingly easy to add a Google Maps embed using Gutenberg.

Google Maps functionality GIF

More to Come

More plugins are adding Gutenberg compatibility all the time. The new mental model Gutenberg provides for mixing types of content in series with each other is a seachange in WordPress site building and content creation. We can't wait to see what is available once Gutenberg is fully released. Until then, this simple restaurant site will keep it classic.

For those interested in following the Gutenberg/Metabox question more closely (or jumping in to help!) check out these links:

You may also like:

Topics Website Technology, WordPress