Hey visitors! If you're a beginner in WordPress and WP-CLI development, then you should check out my dear friend Bhargav's Youtube channel! @BuntyWP

Hiding editor panels in Gutenberg

by Siddharth Thevaril

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

Category selector in Gutenberg
Category selector in Gutenberg

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

Panels visible in the editorEquivalent argument
Featured imagefeatured-image
Table of some of the Gutenberg’s Post Editor panels added by WordPress Core.

Hope this article helped! Thanks for reading!

Subscribe to the Newsletter
Subscribe to get my latest content by email.

Leave a Reply