如果用户使用编辑器本身添加新类别，是不是有办法刷新自定义组件中使用的类别列表？

Posted 2023-02-19

【中文标题】如果用户使用编辑器本身添加新类别，是不是有办法刷新自定义组件中使用的类别列表？

【英文标题】：Is there a way to refresh the category list that is used in a custom component if a user adds a new category using the editor itself?如果用户使用编辑器本身添加新类别，是否有办法刷新自定义组件中使用的类别列表？

【发布时间】：2021-03-13 12:40:28

【问题描述】：

我为 wordpress 的古腾堡编辑器构建了一个自定义组件。我需要一种从已选择类别列表中选择单个类别的方法。我能够使用下面的代码实现这种功能。我的组件的唯一问题是，如果用户在编辑器本身中添加一个全新的类别，它不会刷新其类别列表，当添加一个类别时，该类别是自动选择的，因此应该出现在自定义下拉列表中.

我一直在查看文档，但没有找到实现此效果的方法，似乎select().getEntityRecords() 正在缓存它获得的第一组结果，并且不会在不刷新页面的情况下查询新数据。

旁注：还有其他功能可以限制用户可以检查的常规类别的数量。目前我的代码将其限制为 3，并且不允许用户保存帖子，如果他们检查了超过 3 个。

index.js

// WordPress dependencies.
import  createElement as el, Fragment  from '@wordpress/element';
import  __  from '@wordpress/i18n';

// Internal dependencies.
import PostPrimaryCategory from './post-primary-category';
/**
 * Add new field to category content block
 * Also add a limit check for categories
 * 
 * @param * OriginalComponent 
 */
function wrapPostPrimaryCategory( OriginalComponent ) 
    return function( props )  
    // create content block 
    let originalElement = el( OriginalComponent, props );
    let errorMessage    = null;
    // if the content block is category
    if ( 'category' === originalElement.props.slug )       
      // turn on update/publish button
      jQuery( ".editor-post-publish-button" ).prop( "disabled", false );
      if ( 3 < originalElement.props.terms.length ) 
        // if number of categories is more then 3, show error and disable publish/edit button
        errorMessage = el( 'p',  class: 'error-message' , __( 'Too many categories have been selected', 'post-categories-error' ) );
        jQuery( ".editor-post-publish-button" ).prop( "disabled", true );
      
    

    // compile all elements of the content block together
    let elements = 'category' !== originalElement.props.slug ? el(
      Fragment, null,
      originalElement
    ) : (
      el(
        Fragment, null,        
        el( 'h4', null, __( 'Categories', 'post-categories' ) ),
        // show error message if there is one
        errorMessage,
        originalElement,    
        // Show a custom heading
        el( 'h4', null, __( 'Primary Category', 'post-primary-category' ) ),
        // add new field
        <PostPrimaryCategory selectedTerms= originalElement.props.terms  />    
      )
    );

    return elements;
    ;

// hook to get access to the category ( and post tags ) content blocks in the editor
wp.hooks.addFilter(
    'editor.PostTaxonomyType',
    'authentic-child/assets/js/post-primary-category',
    wrapPostPrimaryCategory
);

post-primary-category.js

// WordPress dependencies.
import  SelectControl  from '@wordpress/components';
import  compose  from '@wordpress/compose';
import  withSelect, withDispatch  from '@wordpress/data';

// Whenever the post is edited, this would be called. And we use it to pass the
// updated metadata to the above function.
const applyWithSelect = withSelect( ( select ) => 
    return 
        primaryCategory: select( 'core/editor' ).getEditedPostAttribute( 'meta' ).primary_category,
        categories: select( 'core' ).getEntityRecords( 'taxonomy', 'category',  per_page:-1, hide_empty:false  )
    ;  
 );

// Whenever the post is edited, this would also be called. And we use it to update
// the metadata through the above function. But note that the changes would only
// be saved in the database when you click on the submit button, e.g. the "Update"
// button on the post editing screen. :)
const applyWithDispatch = withDispatch( ( dispatch ) => 
    const  editPost  = dispatch( 'core/editor' );
    return 
        onSetPrimaryCategory( primaryCategory ) 
            const meta =  primary_category: primaryCategory ;
            editPost(  meta  );
        
    ;
 );

// This basically simply renders the select drop down.
function PostPrimaryCategory( 
    // passsed in from the wrap function in index.js
    selectedTerms,
    // These these props are passed by applyWithSelect().
    primaryCategory,
    categories,
    // Whereas this is passed by applyWithDispatch().
    onSetPrimaryCategory,
 ) 
    return (
        <>
            <SelectControl
                label="This category will be displayed on the post when it is on the home/search pages"
        value= primaryCategory 
        onChange= onSetPrimaryCategory 
        options= null === categories || undefined === categories ? [] : 
          categories
            .filter( (  id, name  ) => ( "Uncategorized" === name || -1 === selectedTerms.indexOf( id ) ? false : true ) )
            .map( (  id, name  ) => (  label: name, value: name  ) ) 
            />
        </>
    );


// And finally, 'compose' the above functions.
export default compose( applyWithSelect, applyWithDispatch )( PostPrimaryCategory );

【问题讨论】：

我不明白。用户如何添加新类别？ select-control 没有那个选项。可以使用共享该部分的一些代码吗？或图片

@arminyahya 不，这是 Wordpress 本身的内置功能。 Wordpress 允许用户在编辑器中编辑/创建帖子时即时添加新类别以及与帖子相关的大多数其他分类法。所以我没有一种简单的方法来分享控制它的代码。对不起。

【参考方案1】：

您可以在函数组件中使用 useSelect 自定义 React 挂钩。 useSelect 将“订阅”更改并在值更改时自动重新呈现组件（即用户选择另一个类别）。

创建<SelectControl> 让用户选择“主要类别”的组件可能如下所示：

/**
 * WordPress dependencies
 */
import  __  from '@wordpress/i18n';
import  SelectControl  from '@wordpress/components';
import  useSelect  from '@wordpress/data';
import  useEntityProp  from '@wordpress/core-data';

function PostPrimaryCategory() 
    const categories = useSelect((select) => 
        /**
         * Get the currently selected categories for a post. Since we are using 
         * useSelect, this will get updated any time the user adds or removes a 
         * category from the post.
         */
        const catIds = select('core/editor').getEditedPostAttribute('categories');

        /**
         * The line of code above just gets us an array of category IDs, so here
         * we get the full category details (name, slug, id, etc) that we can
         * use to populate the SelectControl.
         */
        return !!catIds && catIds.length > 0 ?
            select('core').getEntityRecords('taxonomy', 'category', 
                include: catIds.join(','),
                per_page: -1,
            ) : [];
    );

    // We need the post type for setting post meta
    const postType = useSelect((select) => 
        return select('core/editor').getCurrentPostType();
    );

    // Get and set the post meta
    const [meta, setMeta] = useEntityProp('postType', postType, 'meta');

    return (
        <SelectControl
            label= __('Primary Category', 'text-domain') 
            value= meta.primary_category 
            options= categories.map(cat => 
                return 
                    label: cat.name,
                    value: cat.id,
                
            ) 
            onChange= (value) => setMeta(primary_category: value) 
        />
    );
;