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?
radio
type? Is it because you're going to allow only one selection? Or is it just for a better UI?OriginalComponent
, but I think your best option would be to copy theHierarchicalTermSelector
component and return it - instead of theOriginalComponent
- from the filter callback (CustomizeTaxonomySelector
).OriginalComponent
? I don't know how to do that in React. But as far as I can tell,OriginalCompnent
already isHierarchicalTermSelector
, at least when the taxonomy is hierarchical.