Change rendering of existing taxonomy selector element via wp.hooks.addFilter

  • I’m the developer of Radio Buttons for Taxonomies and I’m trying to get it updated for Gutenberg, but I’m also very new to React.

    I’ve researched modifying an existing 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?

Viewing 4 replies - 1 through 4 (of 4 total)

  • I’m looking for an answer to this too. And, in fact, am looking to do this same thing: limit term selection to a single term.

    Did you manage to solve this?

    Thread Starter HelgaTheViking

    (@helgatheviking)

    Not yet, but I have a good lead from this answer:
    https://wordpress.stackexchange.com/a/333143/6477

    To summarize the answer, it’s take the entire hierarchical terms selector and copy it. Not my favorite approach because it means you have to repeat that any time there are edits to the main element, but I don’t see too many alternatives. I did notice that removing and replacing the terms metabox using standard remove_meta_box did actually replace the terms panel in gutenberg.. which was weird to me. But then you have to write a new custom “add terms” function, so it’s not a complete solution.

    I’m just drowning in work and haven’t been able to update my Radio Buttons plugin, which once updated, will do what you need as far as restricting taxonomies to a single term. If you have any interest in working on the RB4T plugin you can find it here:
    https://github.com/helgatheviking/radio-buttons-for-taxonomies

    It seems like a proper solution would be to modify the upstream HierarchicalTermSelector component to accept a property specifying whether it should allow multiple selections (the default, and renders with checkboxes) or not (renders with radio button). That should be pretty simple, and I intended (intend?) to attempt that, but being entirely new to react, I’m still working on getting the environment setup to be able to do so.

    • This reply was modified 5 years, 5 months ago by jnorell.
    Thread Starter HelgaTheViking

    (@helgatheviking)

    That should be pretty simple

    @jnorell sounds like famous last words! ??

    @misfist I did ultimately solve this by duplicating the entire HierarchicalTermSelector element and then modifying it in a few places which can see here.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change rendering of existing taxonomy selector element via wp.hooks.addFilter’ is closed to new replies.

Tags