Gutenberg Modify core taxonomy panel element via wp.hooks.addFilter

Question

I’ve researched modifying an existing editor element… and there’s little out there. But I did get a good reply at Github that pointed me to this: https://github.com/WordPress/gutenberg/tree/master/packages/editor/src/components/post-taxonomies#custom-taxonomy-selector

And apparently the taxonomy panel is filterable via wp.hooks.addFilter. That’s a great start! I’ve been able to use that code snippet to mock up some dummy code that replaces the taxonomy panel with a Dashicon.

(function ( hooks, editor, components, i18n, element, compose ) {

    var el = wp.element.createElement;
    var Dashicon = wp.components.Dashicon;

    function CustomizeTaxonomySelector( OriginalComponent ) {

        return function( props ) { 

            if ( RB4Tl18n.radio_taxonomies.indexOf( props.slug ) ) { 

                var testprops = { className: 'bacon-class', icon: 'admin-users' };

                return el( 
                    Dashicon,
                    testprops 
                );

            } else {
                return el(
                    OriginalComponent,
                    props
                );
            }
        }
    };

    wp.hooks.addFilter(
        'editor.PostTaxonomyType',
        'RB4T',
        CustomizeTaxonomySelector
    );

} )( window.wp.hooks, window.wp.editor, window.wp.components, window.wp.i18n, window.wp.element, window.wp.compose )

Obviously, this isn’t very useful, but I had to start somewhere. So my question is, is it possible to take the incoming OriginalComponent function and modify it’s output? I know how to do this with a PHP filter, but in this case OriginalComponent is the HierarchicalTermSelector react function and I don’t know how to modify what it renders and I think I’m missing the vocabulary to search successfully.

In my use case all the data would be pretty much the same (I need all the terms listed) except that I want to switch the <input type="checkbox"> to <input type="radio">. Or do I have to copy and write my own version of the HierarchicalTermSelector element?

Answer 1

Because your plugin handles both hierarchical and non-hierarchical taxonomies, then I think it might be a better option to copy the HierarchicalTermSelector component, and return the copy from the CustomizeTaxonomySelector function.

And you can see how I did it here — Updated to use the JavaScript Build Setup which makes things like transpilation super easy.

The plugin (or the JavaScript stuff) is not perfect, but it should be good enough as a starting point. And you'd see something like these:

PS: In the demo, the category "Test" and tag "Test" share the same name, but they're of a different taxonomy. And the same goes to the category "Test 2" and tag "Test 2".