Gutenberg compatibility issues with page builders

As we highlighted previously, WordPress released Gutenberg to the public for a pre-release trial in WordPress 4.9.8 on July 31. On December 6, WordPress made Gutenberg the default editor with the release of WordPress 5.0. Use our previous tips to decide if you’re a good candidate to use Gutenberg, but if your site has potential compatibility issues, you’ll certainly want to hold off on using Gutenberg.

The biggest potential compatibility issue for Gutenberg lies with page builder themes and plugins. Because Gutenberg itself is a type of page builder and replaces the classic WordPress editor, themes and plugins that use a different editor will have to be rewritten for Gutenberg. Not all page builders will automatically break, but they could unless they’ve specifically added Gutenberg support. Here’s a look at what some of the more well-known page builders have said about Gutenberg:

Elementor

If you’ve taken the 40 Days to a DIY Website course, you may have installed Elementor per our suggestion. If so, you have no reason to worry as Elementor (2.0 and above) is already compatible with Gutenberg. Here’s what the Elementor team has to say about using Elementor 2.1 and Gutenberg: “For version 2.1, we made it easy to switch between Gutenberg and Elementor, using the familiar ‘Edit with Elementor’ button within Gutenberg.”

Elementor will remain separate from Gutenberg but users will be able to switch between them as they can now. However, be aware that creating a page in Elementor and attempting to convert it to Gutenberg could result in a loss of data, just as creating a page in Elementor and converting it to the standard WordPress editor can currently.

Verdict: No compatibility issues (version 2.1 and above)

Divi

On July 31, Elegant Themes announced what they are calling “initial support” for Gutenberg in Divi 3.11 and above. This update will add a purple “Use the Divi Builder” button to the top of the Gutenberg editor, similar to the current setup on the classic editor. Elegant Themes recommends updating to Divi 3.18 before updating to WordPress 5.0, as the 3.18 update addresses several Gutenberg compatibility issues. With Gutenberg, Divi only supports their visual builder. If you wish to continue using the “classic” backend builder, you’ll need to install the WordPress Classic Editor plugin.

Last December at WordCamp US, I had the opportunity to speak with a few of the people on the Divi team personally and they told me they were working on a solution and would find a way to integrate Divi with Gutenberg. Their ideas were very creative and sounded like a great solution. They hinted at these updates in their announcement, stating, “As the new editor continues to evolve, and as we get closer to the release of WordPress 5.0, we hope to release additional updates that will further improve your page building experience.” These changes could make Divi and Gutenberg work together even better in the future.

Verdict: No compatibility issues (version 3.18 and above)

Beaver Builder

Similar to Elementor and Divi, Beaver Builder offers a choice to use the Beaver Builder editor or the standard editor. When Gutenberg is active, the “standard editor” choice allows you to edit a page with Gutenberg. Beaver Builder also provides the option to convert a page created in Gutenberg to Beaver Builder.

Like Elementor, be aware that creating a page in Beaver Builder and attempting to convert it to Gutenberg could result in a loss of data, just as creating a page in Beaver Builder and converting it to the standard WordPress editor can currently.

Verdict: No compatibility issues (version 2.1 and above)

Themeco: X, Pro, and Cornerstone

Themeco announced support for Gutenberg for Pro 2.3.0, X 6.3.0, and Cornerstone 3.3.0. According to their release notes, “We’re compatible with the current version of the plugin and will continue testing compatibility as Gutenberg is updated. We don’t have plans to integrate directly with Gutenberg or extend it in any way, but we have made sure the “Edit with [Pro/Cornerstone]” buttons function correctly.”

Verdict: No compatibility issues (Pro 2.3.0, X 6.3.0, Cornerstone 3.3.0 and above)

SiteOrigin Page Builder

SiteOrigin has perhaps the best integration we’ve seen yet for a page builder. Instead of simply offering an option to switch back and forth between Gutenberg and its page builder, SiteOrigin offers a layout builder widget as a Gutenberg block. This way, you can build pages in Gutenberg and add Site Origin’s page builder options inside a page built in Gutenberg. For what it’s worth, the Divi team described a similar idea when I discussed Gutenberg with them last year, but SiteOrigin appears to be the first to have officially documented such an idea.

Verdict: No compatibility issues, but use the widget bundle with Gutenberg

Genesis

When it comes to Gutenberg support, the answer for the Genesis framework is very tricky. Genesis is frequently highly customized in the form of first-party and third-party child themes. Many of these themes offer alternate means of building pages, some of which even use simple text boxes on the WordPress backend. StudioPress, the creators of the Genesis framework, state that they “have not seen any issues,” but some Genesis users suggest that changes to some Genesis themes need to be made in order to offer full Gutenberg support.

As of May 2018, another Genesis user noted, “Neither the parent Genesis nor any of the official StudioPress child themes are Gutenberg-ready as of today” without making changes to the theme’s code. In September, Genesis published an article outlining their plans for Gutenberg, but indicated that they’re not ready yet, and highlighted some issues for people using Genesis child themes. More recently, StudioPress announced that they are “Gutenberg ready,” but the article is not dated and doesn’t include a version number. It’s also important to remember that Genesis relies heavily on child themes, many of which are heavily customized, and could potentially encounter issues.

At MPWR Design, we do not use the Genesis framework for any of our sites so we cannot offer firsthand knowledge one way or the other, but out of an abundance of caution, it would be a good idea to test your theme on a staging site to ensure compatibility before installing. Use the Classic Editor plugin if you have any issues.

Verdict: Compatibility announced, but take caution when using custom Genesis child themes

Other themes

For any other themes and plugins, check the developer’s website for details.

Learning WordPress and Gutenberg

If you want to try out Gutenberg now or if you simply want to get a head start on learning Gutenberg for when it becomes the default editor in WordPress 5.0 this fall, we’ve designed a new course to help. Our new Learn WordPress course will teach you how to use the new Gutenberg editor, and it covers all the other WordPress basics as well. The course is now available!

Comments