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.

2 thoughts 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' );
    } );

    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!

Leave a Reply

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