Skip to content

Instantly share code, notes, and snippets.

@davidfcarr
Last active December 26, 2019 17:13
Show Gist options
  • Save davidfcarr/4ace275809a28f778b605cee9654e274 to your computer and use it in GitHub Desktop.
Save davidfcarr/4ace275809a28f778b605cee9654e274 to your computer and use it in GitHub Desktop.
WordPress Gutenberg sidebar for components that can update metadata
const { __ } = wp.i18n; // Import __() from wp.i18n
const el = wp.element.createElement;
const {Fragment} = wp.element;
const { registerPlugin } = wp.plugins;
const { PluginSidebar, PluginSidebarMoreMenuItem } = wp.editPost;
import {MetaTextControl, MetaSelectControl} from './metadata_components.js';
//add to todument sidebar component
const PluginMetaDemo = function() {
return (
el(
//specify we want to add to existing sidebar that includes document info
wp.editPost.PluginPostStatusInfo,
{},
<div>
<MetaSelectControl
label="Demo Field Select"
metaKey="_demo_select"
options={ [
{ label: 'Not Set', value: '' },
{ label: 'Yes', value: '1' },
{ label: 'No', value: '0' },
] }
/>
<MetaTextControl
label="Demo Text Control"
metaKey="_demo_text_field" />
</div>
)
);
}
//add to document sidebar
wp.plugins.registerPlugin( 'meta-demo-sidebar-plugin', {
render: PluginMetaDemo,
} );
// separate sidebar with its own icon
const PluginMetaDemo2 = () => {
//the Fragment component wraps around PluginSidebarMoreMenuItem, which adds a menu item, and the UI components to appear in the sidebar itself.
return(
<Fragment>
<PluginSidebarMoreMenuItem target="meta-sidebar-extra" icon="smiley">meta-demo</PluginSidebarMoreMenuItem>
<PluginSidebar
name='meta-sidebar-extra'
title='meta-demo'
icon="smiley"
>
<div>
<MetaSelectControl
label="Demo Field Select"
metaKey="_demo_select"
options={ [
{ label: 'Not Set', value: '' },
{ label: 'Yes', value: '1' },
{ label: 'No', value: '0' },
] }
/>
<MetaTextControl
label="Demo Text Control"
metaKey="_demo_text_field" />
</div>
</PluginSidebar>
</Fragment>
)
}
registerPlugin( 'meta-sidebar-extra', { render: PluginMetaDemo2 } );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment