Add Custom Panel to Gutenberg settings sidebar

If you have been working with WordPress for quite some time no, you likely would have heard the name, Gutenberg. This is a new block-based editor introduced by WordPress since version 5. It successfully replaces the vintage classic WordPress editor that was built on TinyMCE. With the introduction of Gutenberg, there has been a significant change in how content is created. Gutenberg allows you to add multiple media types and arrange the layout within the Editor using blocks.

The Gutenberg Editor also provides a settings sidebar that contains all the block and post information, including the activity, publication, block settings, etc.

But, one can add a custom panel to Gutenberg, which can build functionality for the content on the Editor. These Panels are beneficial if you want to create custom functions like picking a color adding a custom property to the blocks.

In this article, we will look at how these panels can be added to the sidebar with just a piece of code. So let’s get going without wasting any further time.

WordPress Glutenberg Editor Example

The following output can be achieved by implementing the below-given code

Code to Add Custom Panel to Gutenberg

Please copy the below-given code to add a Custom Panel

( function( wp ) {

	const { registerPlugin } = wp.plugins;
	const { PluginDocumentSettingPanel } = wp.editPost;

	registerPlugin( 'webflare-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 );

The PluginDocumentSettingPanel object contains 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 be displayed near the title. This parameter can also be passed to registerPlugin() function.

Conclusion

Folks working hard on making Gutenberg amazing is just phenomenal. It’s no small task they’re undertaking, and I’ve been delighted to see how much progress has been made in the past months. Gutenberg is the future of WordPress. It might be the future of content management systems as a whole.

Check out WebFlare Blog for more valuable content.