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';

Settings Tab

index.js | edit()

<InspectorControls>
	<PanelBody
		title={ __('Panel Title', 'your-theme-name') }
		initialOpen={ true }
	>
		...
	</PanelBody>
</InspectorControls>

Styles Tab

index.js | edit()

<InspectorControls group="styles">
	<PanelBody
		title={ __('Panel Title', 'your-theme-name') }
		initialOpen={ true }
	>
		...
	</PanelBody>
</InspectorControls>

Controls:

• Checkbox
• Color
• Icon
• Media
• PostType
• PostTypeMultiple
• Radio
• Range
• Select
• Taxonomy
• TaxonomyMultiple
• Text
• Textarea
• Toggle