从 wordpress gutenberg 侧边栏插件更改 post 的标签/类别

Question

我正在尝试从 WordPress Gutenberg 侧边栏插件中添加/删除 post 的标签/类别（使用 React / JavaScript）。关于此用例实施的信息似乎很少，我正在寻求社区对您可能遇到的可行方法的意见。

当前实施:

我有一个侧边栏插件，有几个面板。其中一个负责从 Post 添加/删除类别/标签。组件使用以下方式呈现：

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>
     );
};

点击按钮后，我想将指定的标签/类别添加到post。在 WithDispatch 高阶组件中成功检测并触发了点击事件，如下所示：

export default compose([
    withSelect(select => {  // WithSelect Routines Here  }),
    withDispatch(dispatch => {
        return {
            onTaxonomiesAdd: (category, tag) => {
                 //Add Taxonomy Items here
                 alert("I'm firing successfully");
            }
        }

到目前为止我偶然发现的最接近的方法使用：

wp.data.dispatch( 'core' ).editEntityRecord( 'postType', 'contributor', currentPost.id, { 'topic': [ term_id ] } );

...但我还没有得到类似的东西正常工作。

你们有没有找到实现这个结果的解决方案？

Answer 1

从上面的 link 开始，我成功地实现了用例，在我的组件之外添加了以下实用函数（可以重复使用）：

//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' );
        }            
    }
}

希望这对社区中希望实现此用例的其他人有用。

从 wordpress gutenberg 侧边栏插件更改 post 的标签/类别

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

javascript

wordpress

taxonomy

reactjs

wordpress-gutenberg