2

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?

5
  • Why do you want the input be changed to radio type? Is it because you're going to allow only one selection? Or is it just for a better UI?
    – Sally CJ
    Mar 29, 2019 at 8:45
  • It's to limit the input to a singular option. I'm the author of the plugin Radio Buttons for Taxonomies, but I haven't been able to get this working in Gutenberg. Mar 29, 2019 at 9:12
  • I see. So it's pretty easy to extend the OriginalComponent, but I think your best option would be to copy the HierarchicalTermSelector component and return it - instead of the OriginalComponent - from the filter callback (CustomizeTaxonomySelector).
    – Sally CJ
    Mar 30, 2019 at 4:09
  • How do you extend the OriginalComponent? I don't know how to do that in React. But as far as I can tell, OriginalCompnent already is HierarchicalTermSelector, at least when the taxonomy is hierarchical. Mar 31, 2019 at 0:23
  • Yes, it is. But check my answer. I hope it helps you.
    – Sally CJ
    Apr 1, 2019 at 18:16

1 Answer 1

4

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 hereUpdated 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".

8
  • 1
    Not sure if you've tried the sample plugin, but you should know that I've revised it - the version is now 20190402.2 - it was initially 20190402.1.
    – Sally CJ
    Apr 2, 2019 at 3:49
  • Just getting around to looking today. This is awesome! Thank you! I was hoping to avoid completely copying the element/component but there doesn't appear to be any way around it. I've got to read through it a few more times though... React is still too new to me. Thanks again! Apr 3, 2019 at 4:20
  • 1
    That (name thing) is something I'm not sure how to explain, but basically, you should not re-include the WordPress packages (e.g. @wordpress/i18n) in your project build; instead, just use the ones referenced by the global wp object (e.g. wp.i18n). You can check the current WordPress JavaScript packages here - and the statement there which says, "JavaScript packages are available as a registered script in WordPress and can be accessed using the wp global variable." might help you?
    – Sally CJ
    Apr 4, 2019 at 5:25
  • 1
    "system for transpiling" - actually WordPress already implemented such a system! Check this repo. :)
    – Sally CJ
    Apr 12, 2019 at 7:19
  • 1
    Thanks Sally. I did find that and have made some decent progress, but there are still some issues concerning setting state and saving data that I have to work out. Apr 13, 2019 at 2:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.