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

admin管理员组

文章数量:1023782

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:

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 = wpponents.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.wpponents, window.wp.i18n, window.wp.element, window.wppose )

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?

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/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 = wpponents.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.wpponents, window.wp.i18n, window.wp.element, window.wppose )

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?

• javascript
• taxonomy
• block-editor

Share Improve this question asked Mar 25, 2019 at 3:22 helgathevikinghelgatheviking 14.5k88 gold badges6464 silver badges115115 bronze badges 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 Commented 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. – helgatheviking Commented 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 Commented 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. – helgatheviking Commented Mar 31, 2019 at 0:23
• Yes, it is. But check my answer. I hope it helps you. – Sally CJ Commented Apr 1, 2019 at 18:16

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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 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".

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:

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 = wpponents.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.wpponents, window.wp.i18n, window.wp.element, window.wppose )

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?

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/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 = wpponents.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.wpponents, window.wp.i18n, window.wp.element, window.wppose )

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?

• javascript
• taxonomy
• block-editor

Share Improve this question asked Mar 25, 2019 at 3:22 helgathevikinghelgatheviking 14.5k88 gold badges6464 silver badges115115 bronze badges 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 Commented 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. – helgatheviking Commented 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 Commented 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. – helgatheviking Commented Mar 31, 2019 at 0:23
• Yes, it is. But check my answer. I hope it helps you. – Sally CJ Commented Apr 1, 2019 at 18:16

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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 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".

本文标签： javascriptGutenberg Modify core taxonomy panel element via wphooksaddFilter