How to Enable, Create, Read and Update Post Meta in the WordPress Block Editor (Gutenberg)

Managing post meta in WordPress has evolved significantly with the introduction of the Gutenberg block editor. This tutorial aims to simplify the process of enabling, reading, and updating custom post meta in the Gutenberg editor. By following these steps, you’ll gain a deeper understanding of how to work with post meta in the modern WordPress environment.

Enable: Granting REST API Access to Post Meta

By default, WordPress post meta fields are not accessible via the REST API. To enable REST API access for each post meta, the register_post_meta function must be used. It’s important to note that the post type must have “custom-fields” support enabled.

/**
 * Registers the custom_post_meta field.
 *
 * @return void
 */
function register_custom_post_meta_field() {
    register_post_meta(
        'post',
        'custom_post_meta',
        [
            'type'         => 'string',
            'show_in_rest' => true,
            'single'       => true,
        ]
    );
}
add_action( 'init', 'register_custom_post_meta_field' );

Read: Retrieving Post Meta Value in the Gutenberg Block Editor

In the Gutenberg block editor, post data is managed through a Redux-like module called @wordpress/data. This module provides a straightforward method to read and access the custom post meta we registered earlier. Open your browser’s developer console and use the following code:

wp.data.select('core/editor').getEditedPostAttribute('meta');

To retrieve the value of the ‘custom_post_meta’ field:

wp.data.select('core/editor').getEditedPostAttribute('meta').custom_post_meta;

If you’re working within a custom block, you can utilize the following example code instead:

	import { useSelect } from '@wordpress/data';
	/**
	* My Custom Block
	*/
	const MyCustomBlock = () => {
	const META_KEY = 'custom_post_meta';
	const meta = useSelect((select) =>
	select('core/editor').getEditedPostAttribute('meta')
	);
	const { [META_KEY]: customMeta } = meta;
	console.log(customMeta); // Log the value into the browser console.
	return null; // Return your block content here.
	};

view raw read_meta.js hosted with ❤ by GitHub

Create and Update: Modifying, Editing, and Saving Post Meta Values in the Gutenberg Block Editor

With the @wordpress/data module, modifying and saving post meta values becomes effortless. Dispatch a call to the registered reducer to update the state value. Use the following code as an example:

wp.data.dispatch('core/editor').editPost({ meta: { custom_post_meta: 'My Custom Post Meta Value' } });

For a more detailed example within a custom block, you can utilize the following code:

	import { __ } from '@wordpress/i18n';
	import { useSelect, useDispatch } from '@wordpress/data';
	import { PanelBody, PanelRow, TextControl } from '@wordpress/components';
	import { InspectorControls } from '@wordpress/block-editor';
	/**
	* My Custom Block
	*/
	const MyCustomBlock = () => {
	const META_KEY = 'custom_post_meta';
	const { editPost } = useDispatch('core/editor');
	const meta = useSelect((select) =>
	select('core/editor').getEditedPostAttribute('meta')
	);
	const { [META_KEY]: customMeta } = meta;
	const onCustomMetaChange = (newValue) => {
	editPost({
	meta: { …meta, [META_KEY]: newValue },
	});
	};
	return (
	<div>
	<InspectorControls>
	<PanelBody title={__('Settings', 'textdomain')}>
	<PanelRow>
	<TextControl
	label={__('Custom Meta', 'textdomain')}
	value={customMeta}
	onChange={onCustomMetaChange}
	/>
	</PanelRow>
	</PanelBody>
	</InspectorControls>
	</div>
	);
	};

view raw saveMeta.js hosted with ❤ by GitHub

Conclusion

With the Gutenberg block editor, managing post meta in WordPress has become more streamlined. By enabling REST API access, reading post meta values, and updating them using the @wordpress/data module, you can effectively work with custom post meta in the Gutenberg editor. The example provided demonstrates a simple custom block that allows you to modify and save post meta values conveniently.

By following these techniques, you can leverage the power of the WordPress Block Editor to enhance your website’s functionality and provide a richer user experience.