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

Question

我为 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 );

标签： javascriptreactjswordpresswordpress-gutenberg

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