An Update on WordPress 5.0, Gutenberg and Meta Box

As you might know, WordPress 5.0 with new block editor - Gutenberg - will be released tomorrow. It's just one day before WordCamp US, where Matt will announce the "State of the Word" 2018. It's also just a few days before the Christmas holiday. So, we do not recommend you to upgrade your production sites at this time. In this post, let's see the current state of Gutenberg and its compatibility with Meta Box.

Table of Contents hide

1. Why Gutenberg?
2. Gutenberg compatibility with Meta Box
3. Gutenberg issues
4. What's next?

Why Gutenberg?

Gutenberg is created for a big vision of democratizing publishing content on the web. It's an ambitious project for WordPress that will change how we create content on our websites.

The 1st phase of Gutenberg focuses on creating post/page content. But in the far future, if it's successful, it can help us to create page layouts as well by integrating to the Customizer. This video shows it in action (conceptually):

CUSTOMIZING THE FUTURE Mel Choyce

Watch this video on YouTube

To understand more about Gutenberg and how it works, please see our earlier blog post.

At the moment, Gutenberg is good for normal users. That means you can create the content with many blocks available. There are also several free plugins on WordPress.org that create advanced blocks for you. I tried this editor and think it's great in most situations. However, for complex websites where your data is not just post content, then there are several issues that I'll write below.

Gutenberg compatibility with Meta Box

9 months ago, I announced that Meta Box is compatible with Gutenberg. Since then, there are not much changed in the compatibility between Meta Box and Gutenberg. You still can use Meta Box to create custom fields and use premium extensions to do more advanced things.

That includes (but not limited to):

Creating meta boxes and custom fields for any custom post types, settings pages, terms and users works really well.
You can also use MB Custom Post Type to create custom post types and custom taxonomies.
You can control where to show the meta boxes with Include Exclude extension.
Or style the custom fields with tabs, columns, tooltips.
You still can use MB Custom Table extension to store custom fields in custom tables.
Any many things.

One big note is that the Meta Box Conditional Logic and Meta Box Show Hide extensions now work with Gutenberg. With Meta Box Conditional Logic, you can show or hide a meta box, a custom field based on another field's value, by post format or by page template. The Meta Box Show Hide now supports showing or hiding a meta box by post format and page template as well.

That said, most of the time, you'll find no problems with Gutenberg.

Gutenberg issues

However, there are still some issues with Gutenberg. One big problem is Gutenberg doesn't guarantee perfect backward compatibility (that's what Matt said in a reply to my comment on his recent post about Gutenberg FAQ)!

Looking at Gutenberg repository on Github, there are 33 issues on backward compatibility. There are also 10 issues on meta boxes component. While most of them are not related directly to Meta Box plugin, there are some issues that affect Meta Box users.

Inconsistent CSS class names

The first problem is Gutenberg doesn't offer consistent CSS class name for panels (meta boxes). I took part in the discussion to provide the use cases of Meta Box. This problem causes one thing to Meta Box users: without a specific CSS class name, we can't target the elements in the settings panels such as categories, custom taxonomies or even page parent. And that make some rules for Meta Box Conditional Logic and Meta Box Show Hide don't work. At the moment, we can only fix for post format and page template as they have unique CSS class names.

Please note that other internal rules such as showing or hiding a field based on another field still work. This problem only affects the rules that target to elements on the settings panels on the right.

It's sad that the issue is closed by a contributor without any helpful action. We're trying to communicate with them to re-open the issue and then, we can work on a PR to fix it.

WYSIWYG field

Another problem I've noticed is sometimes the content of the wysiwyg field is not saved. It's reported on Github here. This problem affects all custom fields plugins, including Meta Box. There's a workaround, but the developers haven't confirmed it yet. So, we have to wait again.

This issue is fixed on Meta Box 4.15.9 and WordPress 5.0.1. Please upgrade if you use older versions.

Meta Box contexts

The third problem is contexts for meta boxes are removed. Since WordPress 5.0 with Gutenberg active, all meta boxes will have only one context - below the editor! No after_title or form_top. Please just don't set the context parameter. This issue is also reported on Github. And sadly, there are no solutions yet.

What's next?

I have to say I have some anxiety for Gutenberg. Because there might be some issues that we haven't thought about before. I know the WordPress development team will do their best and release fixes as soon as they can, but bugs are still bugs. For that reason, I recommend not to upgrade to WordPress 5.0 for production sites yet. Especially at this time, because you might spend your holiday working on fixing the sites.

Or you can just install the Classic Editor plugin to use the old editor when writing new posts (here is a guide). It doesn't disable Gutenberg completely, but give you a choice to write your post either in the classic editor or in Gutenberg. So you can try and test the website before deciding to go with Gutenberg. But if you still want to disable Gutenberg, try this method (without using plugin).

From our side, in this month (and maybe next month), we'll have to work on these issues to make sure all Meta Box plugins work well with Gutenberg and don't break your sites.

Further, we completed a plan to create Gutenberg blocks visually using Meta Box Builder. You can read this instruction.