By Steve Persch February 22, 2018
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?
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:
Then our Pantheon Migrate plugin uses Blog Vault to bring over the code, database, and file uploads.
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.
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.
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?
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.
Similarly with contact forms, the classic editor experience has buttons for generating and inserting the right short codes.
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.
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.
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:
