[FIXED] Changing a post's tag / category from a wordpress gutenberg sidebar plugin

Issue

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?

Solution

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.

Answered By - Matt Woodward