Instantly share code, notes, and snippets.

Embed
What would you like to do?
const { Button, PanelBody } = wp.components;
const { dispatch } = wp.data;
const { Fragment } = wp.element;
const { __ } = wp.i18n;
const { registerPlugin } = wp.plugins;
const { PluginSidebar, PluginSidebarMoreMenuItem } = wp.editPost;
const Icon = (
<svg width="100%" height="100%" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill="red" />
</svg>
);
const SidebarContents = () => {
const onClose = dispatch( 'core/edit-post' ).closeGeneralSidebar;
return (
<PanelBody>
<p>{ __( 'Here is the sidebar content!' ) }</p>
<Button isPrimary={ true } onClick={ onClose }>{ __( 'Close' ) }</Button>
</PanelBody>
);
};
const MyRedPlugin = () => {
return (
<Fragment>
<PluginSidebar
name="my-red-sidebar"
title="My red sidebar"
>
<SidebarContents />
</PluginSidebar>
<PluginSidebarMoreMenuItem
target="my-red-sidebar"
>
{ __( 'My red sidebar' ) }
</PluginSidebarMoreMenuItem>
</Fragment>
);
};
registerPlugin( 'my-red-plugin', {
icon: Icon,
render: MyRedPlugin,
} );
var Button = wp.components.Button;
var PanelBody = wp.components.PanelBody;
var dispatch = wp.data.dispatch;
var Fragment = wp.element.Fragment;
var el = wp.element.createElement;
var __ = wp.i18n.__;
var registerPlugin = wp.plugins.registerPlugin;
var PluginSidebar = wp.editPost.PluginSidebar;
var PluginSidebarMoreMenuItem = wp.editPost.PluginSidebarMoreMenuItem;
function SidebarContents() {
var onClose = dispatch( 'core/edit-post' ).closeGeneralSidebar;
return (
el(
PanelBody, {},
el( 'p', {}, __( 'Here is the sidebar content!' ) ),
el( Button, { isPrimary: true, onClick: onClose }, __( 'Close' ) ),
)
);
};
function MySmileyPlugin() {
return (
el( Fragment, {},
el(
PluginSidebar,
{
name: 'my-smiley-sidebar',
title: 'My smiley sidebar'
},
el( SidebarContents, {} )
),
el(
PluginSidebarMoreMenuItem,
{
target: 'my-smiley-sidebar'
},
__( 'My smiley sidebar' )
)
)
);
};
registerPlugin( 'my-smiley-plugin', {
icon: 'smiley',
render: MySmileyPlugin
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment