How to Add Custom Panels to Gutenberg Post Settings Sidebar

In this simple tutorial I will show you how to do this:

Add custom Gutenberg settings panels PluginDocumentSettingPanel
In this example we’ve added a custom panel “Custom post settings” with a heart icon from Dashicons set with random text.
( 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 add a custom meta field in PluginDocumentSettingPanel

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

Misha Rudrastyh

Misha Rudrastyh

I develop websites since 2008, so it is total of 13 years of experience, oh my gosh. Most of all I love love love to create websites with WordPress and Gutenberg, some ideas and thoughts I share throughout my blog.

Need some developer help? Contact me

Follow me on Twitter