I'm attempting to add / delete a post's tag / category from a WordPress Gutenberg sidebar plugin (using React / JavaScript). There seems to be very little information on the implementation of this use case and am seeking input from the community on a viable approach you may have come across.
Current implementation:
I have a Sidebar plugin, with several panels. Once of these is responsible for adding / removing categories / tags from a Post. The components are rendered using:
MyComponent = props => {
return (
<PanelBody title="My Title">
<PanelRow>
<TabPanel
className="tab-panel"
activeClass="active-tab"
onSelect={(tabName) => props.onItemChange(tabName)}
tabs={_data}
>
{tab => (
<div className="tab-content">
<div
className="description"
dangerouslySetInnerHTML={{ __html: tab.description }}
></div>
<div className="actions">
<Button isSecondary onClick={() => props.onTaxonomiesAdd(props.category, props.tag)}>Add Tag / Category!</Button>
</div>
</div>
)}
</TabPanel>
</PanelRow>
</PanelBody>
);
};
When the button is clicked, I would like to add designated tags / categories to the post. The click event is successfully detected and fired within the WithDispatch Higher Order Component as follows:
export default compose([
withSelect(select => { // WithSelect Routines Here }),
withDispatch(dispatch => {
return {
onTaxonomiesAdd: (category, tag) => {
//Add Taxonomy Items here
alert("I'm firing successfully");
}
}
The closest approach I've stumbled across so far uses:
wp.data.dispatch( 'core' ).editEntityRecord( 'postType', 'contributor', currentPost.id, { 'topic': [ term_id ] } );
...but I'm yet to get something similar working properly.
Have any of you found a solution to achieve this outcome?
Following on from the link above, I implemented the use case successfully adding the following outside of my component as utility functions (that could be re-used):
//Add Tag & Category in one call
function AddTaxonomies(tag, category){
AddTag(tag);
AddCategory(category);
}
//Add Tag & Refresh Panel
function AddTag(tag){
//Get Current Selected Tags
let tags = select( 'core/editor' ).getEditedPostAttribute( 'tags' );
//Get State of Tag Panel
let is_tag_panel_open = select( 'core/edit-post' ).isEditorPanelOpened( 'taxonomy-panel-tags' );
//Verify new tag isn't already selected
if(! tags.includes(tag)){
//Add new tag to existing list
tags.push(tag);
//Update Post with new tags
dispatch( 'core/editor' ).editPost( { 'tags': tags } );
// Verify if the tag panel is open
if ( is_tag_panel_open ) {
// Close and re-open the tag panel to reload data / refresh the UI
dispatch( 'core/edit-post' ).toggleEditorPanelOpened( 'taxonomy-panel-tags' );
dispatch( 'core/edit-post' ).toggleEditorPanelOpened( 'taxonomy-panel-tags' );
}
}
}
//Add Category & Refresh Panel
function AddCategory(category){
//Get Current Selected Categories
let categories = select( 'core/editor' ).getEditedPostAttribute( 'categories' );
//Get State of Category Panel
let is_category_panel_open = select( 'core/edit-post' ).isEditorPanelOpened( 'taxonomy-panel-category' );
//Verify new category isn't already selected
if(! categories.includes(category)){
//Add new tag to existing list
categories.push(category);
//Update Post with new tags
dispatch( 'core/editor' ).editPost( { 'categories': categories } );
// Verify if the category panel is open
if ( is_category_panel_open ) {
// Close and re-open the category panel to reload data / refresh the UI
dispatch( 'core/edit-post' ).toggleEditorPanelOpened( 'taxonomy-panel-category' );
dispatch( 'core/edit-post' ).toggleEditorPanelOpened( 'taxonomy-panel-category' );
}
}
}
Hope this is useful for anyone else in the community looking to implement this use case.