Gutenberg for WordPress and Compatibility with Advanced Custom Fields

Introduction to Gutenberg for WordPress

Gutenberg is a new page builder being added as an integral part of the new WordPress version 5.0. In a nutshell, rather than using shortcodes and HTML to customize page and post content within the editor, Gutenberg provides an easy-to-use interface that helps newer or less technical users to create custom layouts more easily. The purpose of this post is to give you insight into some of the changes that are taking place, specifically focusing on integrating Gutenberg with Advanced Custom Fields. Advanced Custom Fields is an extremely useful and widely used plugin that allows you to add extra content fields to your WordPress instance. Its core purpose, similar to Gutenberg, is to allow you to build sites more quickly and efficiently.

Opinions on Gutenberg’s potential from a content standpoint

At the heart of Gutenberg is a desire to make writing a content-rich blog post much easier, and without the need to add a page builder like Visual Composer or Divi to assist with formatting. You’ll also be able to bypass the current visual editor which we all know can be a little (ahem) challenging for precise formatting. Gutenberg is not a front-end builder per se, but it visually helps you see where things will line up on a page or post right from the back-end of WordPress.

Integrating Gutenberg with Advanced Custom Fields

Okay, so why is the integration between Gutenberg and ACF such a big deal? Again, Advanced Custom Fields, often simply referred to as “Custom Fields,” is one of the most broadly used plug-ins in the WordPress repository today. It gives you the ability to extend your WordPress site by adding custom functionality, fields, and much more.

Since the new Gutenberg page builder lands this Summer if you’re already using ACF you need to be prepared for what could happen to the custom fields on your site already. Even if you’re not using ACF today, but your job is impacted by the ability to customize a WordPress-based site, this is well-worth understanding.

For most, the native WYSIWYG editor in WordPress has been sufficient to produce a quality website and to add clean, visually rich content. However, with Squarespace, Wix, and other even simpler “drag and drop” style website builders grabbing an increasing share of the web, WordPress contributors rightly saw a need for a more intuitive, component or “block-based” builder. One that would allow more users an opportunity to see visually how a webpage will lay out while editing, without significant effort or additional plug-ins.

But again, what does this do to our past hard work to get the right custom functionality built into our sites via ACF?

My experience testing Gutenberg for WordPress

Like any new technology, Gutenberg warrants significant testing to understand how it will impact your configuration, especially if and as you’ve customized WordPress.

I personally found that IF you are on the latest version of Advanced Custom Fields, there were no issues using the plugin. It works the same way that it did with the more familiar WYSIWYG editor. If you’re worried about what might happen to your site, it would be worthwhile to go to WordPress.org and download the Gutenberg beta plugin from the repository.

I found that Gutenberg integrates quite well so far, and I currently have no issues building out my Custom Fields. ACF was in widespread use the entire time that Gutenberg was in dev, which means the team was very likely aware of the developer community’s concerns around compatibility and integration with existing sites. In following the Gutenberg and WordPress blogs, I can tell you they’re doing everything they can to make sure the transition is as seamless as possible.

My strongest advice to webmasters at this point is to make sure your site is up to date with the current version of Advanced Custom Fields, which will surely be the most likely to integrate seamlessly.

And while we’re on the topic:

A few tips when updating to WordPress version 5.0

• Make sure all plugins are updated before you update to WordPress 5.0
• Test your site by downloading the Gutenberg plugin that is available on the WP Plugin Repository
• View the Changelog/reviews for the Gutenberg plugin
• Repeat for any other plugins that are core to your WordPress configuration

All of this will give you the best possible insight into the current issues people are running into, and let you see how the developers are responding or working around specific challenges.

Gutenberg Compatibility – Q&A – A great interview from the ACF Blog

Eric Karkovac recently interviewed ACF developer Elliott Condon about progress in integrating the two technologies. The interview originally appeared on the ACF blog, which you can read in its entirety here, but there are a few especially useful bits we wanted to highlight. (Eric’s questions are in bold, with Elliot’s responses in blockquote.)

[How has testing gone so far] with ACF and the new WordPress Gutenberg editor?

“Testing ACF with Gutenberg is going great. I’m happy to see how well Custom Meta Boxes are being supported in this new JS powered edit screen – everything seems to be working out of the box! The only issues are due to changed actions and filters, which will require some minor compatibility patches. As the Gutenberg project continues to develop, we will continue to test and roll out updates.”

Gutenberg is really changing the way Custom Meta Boxes are displayed on the WordPress Edit Screen. How will ACF adjust to this new UI?

Visually, the new editor is very different, but the relationship between ACF and “Post Content” has remained the same.

Field groups will continue to sit below (and around) the “Post Content” area in a similar fashion. They’ll require only a few minor CSS tweaks to integrate with Gutenberg’s minimal style.

What are the plans for the free versions of ACF when it comes to Gutenberg – will they be compatible?

Yes, both free versions will be made compatible with Gutenberg – which is the reason behind our slow release date and Early Access program.

We plan to release our major version a few months after WordPress 5.0 comes out, ensuring that all websites powered by ACF continue to work 100% with the new editor.

— Elliot Condon

Summary

We believe Gutenberg is going to be a great addition to WordPress, and at this point, I don’t believe devs need to worry excessively about interoperability. But as always, you should make testing this with your site a priority sooner rather than later. WordPress contributors wouldn’t push something to core that was going to break everyone’s site. With WordPress 5.0 you’ll continue to have the option to use the classic editor, or you can elect to jump up to Gutenberg. Heck, your content teams may already be asking for this.

As of this original writing, there are three planned implementations, which may change over time. The first is intended to be part of the WordPress core update version 5.0, focused on the post & page editing experience, as well as the use of a block or componentized base. Ultimately this will help users present their content in a more engaging, visual, and direct way. Eventually, in phases 2 and 3, you’ll be able to go above and beyond the editor by allowing for full site customization. Think page templates, post types, etc.

And as far as Advanced Custom Fields go there are still over 1 million active installs for this plugin, and I’d expect that number to keep growing. ACF will still have a significant part in extending the functionality of your WordPress site, and as long as you stay up to date, you should see pretty clear sailing.

Let us know in the comments if you do run into issues with Gutenberg, WordPress 5.0, and ACF. We’re always eager to hear how this is playing out for others responsible for the upkeep of multiple major sites.