Meta Box is Now Compatible with Gutenberg

It's almost a year since Gutenberg was born. There was a lot of concerns about this editor, especially the compatibility with meta boxes. We have an in-depth article on this topic half a year ago. Since then, Gutenberg has significant changes and in this article, we want to update the compatibility between Meta Box and Gutenberg so that users are safe using Meta Box in the future.

Meta Box 4.14.0 has been released today and is fully compatible with Gutenberg. Although, there are only two Gutenberg's bugs that cause the file, image and wysiwyg fields not working (updated May 22, 2018 - all fields are now working, see below for details). Unfortunately, these are Gutenberg's bugs and they affects all custom field plugins. Hopefully, they are fixed soon. Details are provided below.

This is the edit screen with both Meta Box and Gutenberg activated (click to enlarge):

Overview Of Issues Between Gutenberg And Meta Boxes

Not only the Meta Box plugin, but any plugin that uses custom fields will also have to deal with Gutenberg compatibility issues. This is the hottest technical issue since Gutenberg was introduced. It got over 170 comments discussed on Github.

Basically, when Gutenberg was born, the development team temporarily removed the area for meta boxes and custom fields. At the time, Gutenberg was the only proof-of-concept for content creation.

Later, there was a UI proposal for the meta box. The meta boxes are rendered at the bottom of the page, below the content section. In Gutenberg version 1.5, meta boxes are displayed via an iframe. However, this approach has encountered objections from many developers.

The developer team then changed the way the meta box was displayed and worked in Gutenberg. And now this method works pretty well.

How Gutenberg Makes Meta Boxes Work?

Gutenberg completely replaces the editing screen and uses JavaScript (React) to render the elements. So the PHP hook for the meta box does not work the same way.

To make the meta boxes work, Gutenberg does the following:

Displaying Meta Boxes

Since there are no PHP hooks running on the page, Gutenberg uses a little trick. It runs the add_meta_boxes and add_meta_boxes_{post post_type} hooks in admin_head so that developers can register the meta boxes. In admin_head the PHP code still works normally. Therefore, developers can register the meta box without any problem.

Then, Gutenberg calls the do_meta_boxes hook to display these meta boxes. Gutenberg will catch their output into its buffer and flush them below the editor.

Saving Custom Fields' Values

The current process of saving custom fields' values is as follows: Press Publish button → the post form is submitted submit → WordPress saves the data and runs the save_post hook → meta boxes hook on that and save the custom fields.

However, in Gutenberg, data is saved via JavaScript thanks to the REST API. There will be no save_post hook in the REST API for meta boxes to hook to.

To fix this problem, after saving the post data via REST API, Gutenberg gets all values ​​of custom fields (thanks to the jQuery.serialize() function) and sends a POST request to post.php, mimic the form submit request. Then WordPress will think that it is a normal submit form request and proceed to save the post data as normal. As a result, meta boxes can store their data.

For technical details about how Gutenberg works with meta boxes, see here.

Meta Box Plugin And Gutenberg

At the beginning time of Gutenberg, when it did not support meta boxes, we encountered many difficulties in ensuring backward compatibility. At that time, the Meta Box development team chose to learn at JavaScript ES6+ and React deeply before coding.

When Gutenberg supported meta boxes without using iframes, we made a small test and found that the custom fields of Meta Box worked very well with Gutenberg. We have published this video on Facebook and Twitter and received a lot of positive feedback:

https://twitter.com/rilwis/status/956114579330809857

We then proceeded to check all custom fields and Meta Box features. The results are really good - Gutenberg works well with most custom fields. And we are pretty sure that in 90% of cases, Meta Box and Gutenberg work well together.

Here are some technical issues we encountered when working with Gutenberg.

Styling For Gutenberg

The main problem Meta Box encountered with Gutenberg is the style of custom fields. Gutenberg has some different styles, so some CSS need to be updated.

Updating CSS for the custom fields is now completed and it works both with the classic editor and Gutenberg. This screenshot demonstrates some Meta Box's custom fields in the Gutenberg editor:

File Upload Field

Another problem with Gutenberg is the file and image fields. These fields use <input type="file" /> and do manual processing of the file upload, not using the Media Library (do not confuse them with file_advanced and image_advanced which use Media Library for upload).

Unfortunately, Gutenberg has not yet supported the file upload via <input type="file" />. The reason is that Gutenberg only collects data of custom fields through jQuery.serialize() and sends it via POST. Therefore, it only handles the normal fields without processing the upload fields.

This is a Gutenberg bug and we have created an issue on Gutenberg repo. Hopefully, the development team will fix this soon.

Editor Field

Another problem we discovered during testing was that Gutenberg completely removed TinyMCE from the editing screen. Therefore, the custom field wysiwyg (editor) doesn't work because the JavaScript is not working.

We think this is a Gutenberg bug because these editors are rendered through the WordPress wp_editor() function. So we also created another issue and hopefully it will be fixed soon.

Other features of Meta Box such as clone, groups, columns, tabs, etc are all working well.

Conclusion

With this update, we hope Meta Box users will be able to use the plugin in the long term. Although there are some bugs, we hope the Gutenberg team will fix them soon so that it does not affect our code.

As planned, there is a month until Gutenberg is merged into the core, but you can install it now and try it with the Meta Box plugin. If you find any bug, please let us know so that we can fix it as soon as possible. And don't forget to update Meta Box today!