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
| Panels visible in the editor | Equivalent argument |
|---|---|
| Summary | post-status |
| Featured image | featured-image |
| Excerpt | post-excerpt |
| Discussion | discussion-panel |
Hope this article helped! Thanks for reading!