Meta

Custom JavaScript components tailored for handling post type meta data in Gutenberg. You can use components in the:

1. PluginSidebar

index.js
import { __ } from '@wordpress/i18n';

import {
	PluginSidebar,
} from '@wordpress/editor';

import {
	PanelBody,
} from '@wordpress/components';

const TestPluginSidebar = () => (
	<PluginSidebar
		name="test-plugin-sidebar"
		title={ __('Test Plugin Sidebar', 'your-theme-name') }
		icon="paperclip"
	>
		<PanelBody>
			...
		</PanelBody>
	</PluginSidebar>
);

registerPlugin('test-settings-plugin-sidebar', {
	render: TestPluginSidebar,
});

2. PluginDocumentSettingPanel

index.js
import { __ } from '@wordpress/i18n';

import {
	registerPlugin,
} from '@wordpress/plugins';

import {
	PluginDocumentSettingPanel,
} from '@wordpress/editor';

const TestSettingPanel = () => (
	<PluginDocumentSettingPanel
		name="test-panel"
		title={ __('Test Panel', 'your-theme-name') }
		icon="paperclip"
	>
		...
	</PluginDocumentSettingPanel>
);

registerPlugin('test-settings-panel', {
	render: TestSettingPanel,
});

3. InspectorControls

index.js
import { __ } from '@wordpress/i18n';

import {
	InspectorControls,
} from '@wordpress/block-editor';

import {
	PanelBody,
} from '@wordpress/components';
index.js | edit()
<InspectorControls>
	<PanelBody
		title={ __('Panel Title', 'your-theme-name') }
		initialOpen={ true }
	>
		...
	</PanelBody>
</InspectorControls>

Controls:

Last updated

Was this helpful?