Why use React/JS to create a Meta Box

In my previous post I mentioned that the reason why we need to learn to do this is to get all the new features. But what is the new features?

You can read more in my previous post: Custom Field & Meta Box in Gutenberg Editor.

In this short blog post, I want to give a simple example, to transform the field to a full sidebar panel.

From this:

To this (video):

How cool is that?

And we can do this very easily. We simply need to change our code from:

<PluginDocumentSettingPanel name="my-data" title="My Data">
	<TextControl value={myData} onChange={setMyData} />
</PluginDocumentSettingPanel>

To this:

<Fragment>
	<PluginSidebarMoreMenuItem target={sidebarName}>
		{ sidebarLabel }
	</PluginSidebarMoreMenuItem>
	<PluginSidebar name={sidebarName} title={ sidebarLabel }>
		<PanelBody>
			<TextControl value={myData} onChange={setMyData} />
		</PanelBody>
	</PluginSidebar>
</Fragment>

So, basically we simply change the wrapper from PluginDocumentSettingPanel to PluginSidebar.

I create a new branch “feature/sidebar-panel”, you can download it on GitHub: