How to Add Custom Panels to Gutenberg Post Settings Sidebar
In this simple tutorial I will show you how to do this:

( function( wp ) {
const { registerPlugin } = wp.plugins;
const { PluginDocumentSettingPanel } = wp.editPost;
registerPlugin( 'misha-custom-panel', {
render: function(){
return (
<PluginDocumentSettingPanel
name="custom-panel"
title="Custom post settings"
className="some-css-class"
>
hello, what is up?
</PluginDocumentSettingPanel>
)
},
icon: 'airplane' // or false if you do not need an icon
} );
} )( window.wp );
PluginDocumentSettingPanel
object has the following props:
- name
- (string) A string identifying the panel.
- title
- (string) Panel heading
- className
- (string) One or multiple CSS-classes that will be added to the panel body.
- icon
- (string|Element) Panel icon. It will displayed near the title. This parameter can also be passed to
registerPlugin()
function. More about how to use icons in Gutenberg read here.
Once we created this panel, we can add some meta fields in it, for example a checkbox like this:

How to do it is described in details in a separate tutorial.

Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I've been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me