WordPress’s announcement of its new Gutenberg editor replacement for TinyMCE set off a ton of debates still raging to this day. A lot of articles center on whether Gutenberg will end up destroying WordPress or taking it to new heights. Gutenberg’s scheduled to be part of the WordPress 5.0 release at some point in 2018.
We’re looking to provide potential Gutenberg converts with tangible information on its effects for current development. This article focuses on Gutenberg’s compatibility with the popular page builders Beaver Builder and Visual Composer. We’ll also investigate different ways to troubleshoot issues with page builders built into current site themes as well as plugins in general.
Gutenberg and Beaver Builder
Those currently testing the beta version of Gutenberg with the Beaver Builder plugin installed have the option of switching between them when creating a new page. You get this same choice when going into a page originally built with Beaver Builder.
Pages started with the Gutenberg editor give the option of being converted to Beaver Builder when you click the “More” icon at the top of the editor screen. Be aware that data loss can occur if you go back and forth between them too often.
Gutenberg and Visual Composer
Visual Composer has fully embraced the upcoming changes by making itself fully compatible with Gutenberg. You can use Gutenberg within Visual Composer by installing it as a plugin. You then download it as an individual element and add it to your elements list. Visual Composer also gives you the option of disabling Gutenberg within your admin controls if you decide it’s not for you.
Gutenberg and Page Builders Within Themes
Here’s where things get really challenging. WordPress offers many themes controlling the rendering of different content blocks. That means the way Gutenberg renders a div block could be completely different than the page builder your theme relies on.
Theme owners should be working with the beta version of Gutenberg to find places where their custom themes end up overridden. Look for CSS selectors focused on specific HTML elements and make sure you’ve set them up to take precedence over those of Gutenberg. You also need to account for new code blocks in Gutenberg within your page builder.
Customization Tips
- Make changes to your own code and not Gutenberg
- Check for styling issues in the admin area
- Use child themes when making your adjustments
Gutenberg and WordPress Plugins
Many popular plugins like Gravity Forms contain shortcodes within the content affecting the appearance of the page. Check the block with the shortcode and make sure it’s not being rendered as text. You may need to end up moving it to a different block to make the plugin functional with Gutenberg.
Plugins creating elements without the use of shortcodes can also give you problems. Mismatched blocks can lead to incorrect rendering of various page elements. You’ll need to check every block and confirm that elements are being added to the correct block.
Keep Gutenberg Informed
There will be challenges as the release nears and builders’ race to make their plugins and page builders compatible with Gutenberg. Document your errors and send them to the Gutenberg team if you’ve gone through all your code and still find yourself running into problems. Watch their release notes and see if they end up addressing your issue.
For Those Who Prefer the Classics
WordPress created a plugin for those of you who just can’t get used to the new Gutenberg editor format. The Classic Editor plugin can immediately restore the old Edit Post screen and remove all traces of Gutenberg from your view. You also stop getting those pesky reminders imploring you to give it a try.
What’s even better is that your old plugins used to extend the original editor will still be compatible. Say hello to meta boxes again. That’s great for those who would have to go through a lot of trouble getting legacy WordPress sites compatible with Gutenberg.
Now, if you don’t completely dislike Gutenberg but still want access to the original edit screen, the Classic Editor plugin also comes with a mode letting you use them both. You’ll see “Edit” links appear on your Posts and Pages screens. Clicking them will open the page or post you’re currently working on within the Classic Editor.
You can change the mode you wish to use by going into your Settings, then selecting the Writing Screen. You’ll see two radio buttons allowing you to choose the mode you wish to go with. That means those deciding to stick with Classic Editor for the moment have the option of trying out Gutenberg again when they find themselves getting curious about how well the current version’s functioning.
For more information on WordPress updates or if you’re looking to build a website, contact Zero Gravity Marketing, today.
