Remove panels from the block editor sidebar

The document sidebar of the block editor contains various panels, for example, one for the featured image and, for posts, one for tags. If specific panels are not used, it could be useful to hide them, to make the sidebar clearer. This post shows you how to do this.

Each sidebar panel has its identifier, which we need to remove them. We find those IDs in the Gutenberg GitHub repo, more specific in the directory with the code for the default panels.

In the featured-image/index.js, for example, you can find the following line of code:

const PANEL_NAME = 'featured-image';

featured-image is the ID we need. The editor comes with the removeEditorPanel function, which accepts a panel ID as its parameter, to hide the panel.

The following code shows that for the featured image panel:

wp.domReady( () => {
	const { removeEditorPanel } = wp.data.dispatch('core/edit-post');

	// Remove featured image panel from sidebar.
	removeEditorPanel( 'featured-image' );
} );

With that, the featured image panel should no longer exist. You could also hide panels just for specific post types, by using the check for post types in the editor.

I wrote two posts in German for KrautPress which help to get started with development for the block editor. One about setting up webpack for development and the other one about creating a block style. Maybe they are helpful if you never wrote code for the block editor.

Related posts

Leave a Comment

Your email address will not be published. Required fields are marked *