How to add editor panel with wp data dispatch?

Question

There is a good question about how to remove panels from sidebar in Gutenberg.

My goal is to show Tag panel only for certain categories. I want to add event listener for the categories checkbox and add editor panel.

Is there something like

wp.data.dispatch( 'core/edit-post').addEditorPanel( 'taxonomy-panel-post_tag' );

If you have other solution in your mind, please, suggest!

Answer 1

After studying documenation and this documentation and this stackoverflow question

I came up with a solution.

We could use wp.data.select('core/editor').getCurrentPost().categories instead of wp.data.select('core/editor').getEditedPostAttribute('categories'). Both should work.

/**
 * Show tags panel only for certain category using ID
 */
const { select, dispatch, subscribe } = wp.data;

window.onload = (() => {
    const categoryId = 9; // Category ID
    const toggleTagsPanel = () => dispatch('core/edit-post').toggleEditorPanelEnabled('taxonomy-panel-post_tag');
    subscribe(() => {
        const categories = select('core/editor').getEditedPostAttribute('categories');
        const isTags = select('core/edit-post').isEditorPanelEnabled('taxonomy-panel-post_tag');
        if (categories && categories.indexOf(categoryId) != -1) {
            if (!isTags) {
                toggleTagsPanel();
            }
        } else if (isTags) {
            toggleTagsPanel();
        }
    })
});