As WordPress developers, one of the most powerful capabilities we have is extending the editor experience for content creators. In this post, we’re diving into how we can use the Block Editor to add metaboxes and notices—without relying on legacy PHP code.

Why Metaboxes and Notices Matter

Metaboxes allow us to collect custom meta information related to a post—think SEO descriptions, additional fields, or custom toggles. Meanwhile, notices give us the ability to alert users to something important—like a successful save, an error, or a prompt for further action.

By integrating these features directly into the Gutenberg (Block) Editor, we maintain a native, modern, and seamless user experience.

Metaboxes

import { registerBlockType } from '@wordpress/blocks';
import { TextControl } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
import { useBlockProps } from '@wordpress/block-editor';

const Edit = () => {
	const blockProps = useBlockProps();
	const postType = useSelect(
		(select) => select('core/editor').getCurrentPostType(),
		[]
	);

	const [meta, setMeta] = useEntityProp('postType', postType, 'meta');
	const metaFieldValue = meta.myguten_meta_block_field;

	const updateMetaValue = (newValue) => {
		setMeta({ ...meta, myguten_meta_block_field: newValue });
	};

	return (
		<div {...blockProps}>
			<TextControl
				label="Meta Block Field"
				value={metaFieldValue}
				onChange={updateMetaValue}
			/>
		</div>
	);
};

registerBlockType('myguten/meta-block', {
	edit: Edit,
	save: () => null, // We save this data as post meta, not block content.
});

• We use useEntityProp to access and modify the post meta.
• TextControl lets us render a simple input field.
• The block doesn’t save any content itself; instead, we save custom metadata using the setMeta function.

Registering Metakeys

Before this works, we need to make sure to register the meta key in PHP and set 'show_in_rest' => true so it’s accessible from the block editor.

function myguten_register_post_meta() {
	register_post_meta( 'post', 'myguten_meta_block_field', array(
		'show_in_rest' => true,
		'type'         => 'string',
		'single'       => true,
		'auth_callback' => function() {
			return current_user_can( 'edit_posts' );
		}
	) );
}
add_action( 'init', 'myguten_register_post_meta' );

Admin Notices

There are times when we want to alert the user—maybe something failed, or we want to show a confirmation. The Gutenberg editor provides a great way to hook into the notices system.

import { useSelect } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';

const ExampleComponent = () => {
	const notices = useSelect((select) =>
		select(noticesStore).getNotices()
	);
	return (
		<ul>
			{notices.map((notice) => (
				<li key={notice.id}>{notice.content}</li>
			))}
		</ul>
	);
};

By using useSelect and noticesStore, we can tap into WordPress’s internal notices system. This keeps our UI consistent with the rest of the editor and gives us a standardized way to deliver feedback to the user.

import { useDispatch } from '@wordpress/data';
import { store as noticesStore } from '@wordpress/notices';

const { createSuccessNotice, createErrorNotice } = useDispatch(noticesStore);

createSuccessNotice('Your meta field was updated successfully!');

Conclusion

Integrating metaboxes and notices into the Block Editor lets us deliver a far better editorial experience. It’s cleaner, more responsive, and 100% native to Gutenberg. As we continue building modern WordPress solutions, embracing the Block Editor’s capabilities ensures our tools are future-proof and aligned with WordPress core.