Hiding editor panels in Gutenberg

The image you see below is what WordPress Core adds to the editor to assign a category to a post.

Similarly, when you register a custom hierarchical taxonomy, WordPress Core will automatically add a term selector just like the above, to the editor.

The task

Recently I was tasked with implementing a feature where we wanted a completely customised version of the term selector, which meant – after building our own version, we no longer needed the one added by Core.

The solution

So, how do we hide a taxonomy selector that is added by Core?

The edit-post data store is responsible for interacting with the editor’s UI and it provides the method removeEditorPanel() to remove a panel.

For any taxonomy, core or custom, the general convention for the argument passed to this function is: taxonomy-panel-[TAXONOMY_SLUG].

So if you wanted to hide the Category and Tag panel, the commands would be:

wp.data.dispatch( 'core/edit-post' ).removeEditorPanel( 'taxonomy-panel-category' );
wp.data.dispatch( 'core/edit-post' ).removeEditorPanel( 'taxonomy-panel-post_tag' );Code language: JavaScript (javascript)

For a custom taxonomy, for example Gadget with the slug gadget, the argument passed would be taxonomy-panel-gadget.

You may mostly use this within a Gutenberg plugin where a panel needs to be removed on page load. The best place to add this code would be inside the useEffect() hook.

List of other panels it can remove

Hope this article helped! Thanks for reading!