保存在古腾堡中以编程方式应用的标签

Question

我已经实现了一个例程，以编程方式将标签/类别应用于 Gutenberg 中的 post。相关代码可以在我最近的问题中看到：也如下所示：

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

此代码会将标签/类别应用到 Gutenberg 中的 post（同时更新 UI 以反映这一点）并且可以验证是否已更新 [=29] 的 redux 存储=] 使用：

wp.data.select( 'core/editor' ).getEditedPostAttribute( 'tags' )

但是，我注意到两个问题：

首先，以这种方式简单地更新标签/类别不会触发 post 的“更新”按钮变为活动状态。要解决此问题，我必须更新一个私有元字段，然后它将变为活动状态。
如果已通过更新私有元字段解决此问题，则单击 post 的更新。 UI 已重新加载但新标签/类别未保存，随后从 UI.

有什么建议吗？

Answer 1

感谢 @harisrozak 在 gutenberg github 存储库上的工作，确定了以下解决方案。

值得注意的是，我相信因为我使用相同的数组来读取选定的标签/类别，就像我随后更新它们一样，React / Redux 没有看到该数据发生了变化，因此实际上没有更新数据库正确（尽管 UI 和 redux 存储更新）。

    //Add Category & Refresh Panel
    function AddCategory(category){

        //Get Current Selected Categories
        let categories = select( 'core/editor' ).getEditedPostAttribute( 'categories' );

        //Verify new category isn't already selected
        if(! categories.includes(category)){

            //Create new array for updating selected categories
            var new_categories = [category];

            //Add categories already selected into new array
            for (let i = 0; i < categories.length; i++) {

                //Get current category
                const selected_id = categories[i];

                //Check category isnt included already
                if ( ! new_categories.includes( selected_id ) ) {
                    new_categories.push(selected_id);
                }
            } 

            //Update Post with new categories
            updateState(() => dispatch( 'core/editor' ).editPost( { 'categories': new_categories } ));

            //Get State of Category Panel
            let is_category_panel_open = select( 'core/edit-post' ).isEditorPanelOpened( 'taxonomy-panel-category' );            

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

Ref：Gist 由@harisrozak 提供

保存在古腾堡中以编程方式应用的标签

Saving Tags applied programmatically in Gutenberg

wordpress

reactjs

wordpress-gutenberg