Remove panels from the block editor sidebar

Posted on

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';
Code language: JavaScript (javascript)

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' );
} );
Code language: JavaScript (javascript)

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.

7 reactions on »Remove panels from the block editor sidebar«

  1. Hello,
    I need to disable the panel "Page Attributes" from the page editor (Gutenberg)
    What do I need to change on your code to work properly?
    And most important, in which file do I place the piece of code?
    Thanks.
    This is your code:

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

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

    Reply

    1. Hi,

      you would need to replace the featured-image with page-attributes.

      You cannot just copy that code into a file, you would need to modify it a bit:

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

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

      That should work. Now you need to add it to a JavaScript file that is loaded in the editor, for example, via the enqueue_block_editor_assets action.

      Hope that helps!

      Reply

  2. Thanks for the article! I am trying to remove the Gallery Panel for a certain style. It is not working got the gallery block panel. Any idea how to go about it?

    Reply

    1. Hey Divjot,

      I am not sure which gallery panel you mean, but with the solution from the post you can only remove panels from the document sidebar, not the sidebar that is displayed when a block is selected.

      Best,
      Florian

      Reply

  3. Hey man, thanks for this article!

    I'm in need of replacing the comments status box, but I don't know the panel slug I need to use. Do you have any idea?

    Thanks again!

    Reply

    1. Don't even worry about it. Just after I posted this comment I found out the slug is `discussion-panel`

      Reply

  4. Love the code snippet, works great. Only issue I ran into was it doesn't seem to work for the post-slug or post-link panels. The permalink has a removal feature in the core block editor preferences, so I'll dig deeper and see how they're doing it. Otherwise this is great, cheers!

    Reply

Leave a Reply

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