How to Add Custom Panels to Gutenberg Post Settings Sidebar

August 17, 2021

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.

# Gutenberg

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

Follow me on Twitter