The WordPress block editor brings a new JS API that allows us to register meta boxes in a different way than what we did a few years ago.
register_post_meta and register_meta are 2 PHP functions that makes possible to insert data in DB using the javascript methods from the block editor. As an example we have the following fields:
register_post_meta('wp_block', 'my_field_1', [
'type' => 'boolean',
'show_in_rest' => true,
'single' => true,
]);
register_post_meta('post', 'my_field_2', [
'type' => 'string',
'show_in_rest' => true,
'single' => true,
]);
We have 2 fields.
my_field_1 attached to wp_block post type. This is the post type which holds the resusable blocks in WordPress.
And my_field_2 attached to the default post type post.
The first field saves a boolean value and the second a string.
How would you register these UI fields in javascript is not something that I’m going to cover in this article. But Block Editor Handbook has a good tutorial.
What I’m going to cover, is what you should do when the meta value fails to be saved in DB.
A universal solution does not exist, but one of the main issues is when the post type does not support the custom-fields. Yes, this is just as simple, and even that I know this since the first days when I migrated to block editor, I still forget that I must enable this support.
How to enable custom-fields support?
When you register a new post type is easy. Just add the custom-fields under the support property, in an array. Example:
register_post_type('book',[
// ... Other args
'support' => ['title', 'editor', 'custom-fields', /* ... other support values ... */]
]);As you can see just an additional keyword.
How to enable custom-fields support in an existing post type?
When you want to add custom fields support to a post type that you don’t control, another method should be used instead.
The good news. It’s simple as well. 🙂
For example, in the first code block above, we used wp_block post type. It does not support custom fields by default, but we can enable it, because we need our meta to work. How we do it? Here is the code snippet:
add_action('register_post_type_args', function ($args, $postType) {
if ($postType !== 'wp_block'){
return $args;
}
$args['supports'] = wp_parse_args($args['supports'], ['custom-fields']);
return $args;
}, 99, 2);
Feel free to change the wp_block post type to something else according to your needs.
Conclusion
The new block editor is awesome, but in some cases, it may slow down your productivity when simple things like this don’t work out of the box. However, it also opens a new way to new possibilities with rich UI generated by ReactJS.
That’s it. Now if your JS code is OK, the meta value should be saved without additional problems from the PHP point of view.
