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?
1 Answer
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”.