我想这是因为我需要添加onSelect，但我不确定该怎么办。

当用户单击在编辑器中输入的变体时，我需要添加什么才能做到这一点？

一种方法是添加variation 属性设置为块类型，然后在onSelect 变量选择器的回调。这反过来将指示React重新渲染块（因为块状态已更改），因此在该渲染上，我们不再显示变体选择器。因此，基本上，选择器是；已关闭：）

请参见下面的示例，其中块类型渲染简单button 有两种变体-带图标和不带图标。

// File: index.js

import { registerBlockType } from \'@wordpress/blocks\';
import {
    useBlockProps,
    __experimentalBlockVariationPicker as BlockVariationPicker,
} from \'@wordpress/block-editor\';
import { Button } from \'@wordpress/components\';

const variations = [{
    name: \'button-with-icon\',
    title: \'Button + Text + Icon\',
    icon: \'button\',
    scope: [ \'block\' ],
    attributes: { icon: \'heart\' },
}, {
    name: \'button-without-icon\',
    title: \'Button + Text only\',
    icon: \'button\',
    scope: [ \'block\' ],
}];

registerBlockType( \'my-blocks/foo-button\', {
    apiVersion: 2,
    title: \'Foo Button\',
    category: \'formatting\',
    attributes: {
        icon: {
            type: \'string\',
            default: \'\',
        },
        variation: {
            type: \'string\',
            default: \'\',
        },
    },
    edit( { attributes, setAttributes } ) {
        if ( ! attributes.variation ) {
            return (
                <div { ...useBlockProps() }>
                    <BlockVariationPicker
                        variations={ variations }
                        label="Button Variant"
                        onSelect={ ( variation = variations[0] ) => {
                            setAttributes( {
                                ...variation.attributes,
                                variation: variation.name,
                            });
                        }}
                    />
                </div>
            );
        }

        return (
            <div { ...useBlockProps() }>
                <Button
                    text="Foo Button"
                    icon={ attributes.icon }
                />
            </div>
        );
    },
    save: ( { attributes } ) => (
        <div { ...useBlockProps.save() }>
            <Button
                text="Foo Button"
                icon={ attributes.icon }
            />
        </div>
    ),
} );

这里有一个完整的工作示例，你可以尝试我在你的variations.js 文件：

// File: index.js

import {
    registerBlockType,
    createBlocksFromInnerBlocksTemplate,
} from \'@wordpress/blocks\';
import {
    useBlockProps,
    __experimentalUseInnerBlocksProps as useInnerBlocksProps,
    store as blockEditorStore,
    __experimentalBlockVariationPicker as BlockVariationPicker,
    InnerBlocks,
} from \'@wordpress/block-editor\';
import { useDispatch, useSelect } from \'@wordpress/data\';

import variations from \'./variations\';

// Note that you can do EditContainer( props ) or EditContainer( { attributes, etc } ).
function EditContainer() {
    const blockProps = useBlockProps();
    const innerBlocksProps = useInnerBlocksProps( blockProps, {
        //allowedBlocks: ALLOWED_BLOCKS,
        orientation: \'horizontal\',
        renderAppender: false,
    } );

    return <div { ...innerBlocksProps } />;
}

function Placeholder( { clientId, setAttributes } ) {
    // Always set a default variation, particularly if allowing skipping the variation picker.
    const defaultVariation = variations[0];
    // Or do something like this, which selects the variation having "isDefault: true":
//  const defaultVariation = variations.filter( item => item.isDefault )[0] || variations[0];

    const { replaceInnerBlocks } = useDispatch( blockEditorStore );
    const blockProps = useBlockProps();

    return (
        <div { ...blockProps }>
            <BlockVariationPicker
                label="Section Variant"
                variations={ variations }
                onSelect={ ( variation = defaultVariation ) => {
                    if ( variation.attributes ) {
                        setAttributes( variation.attributes );
                    }
                    if ( variation.innerBlocks ) {
                        replaceInnerBlocks(
                            clientId,
                            createBlocksFromInnerBlocksTemplate(
                                variation.innerBlocks
                            ),
                            true
                        );
                    }
                } }
                allowSkip
            />
        </div>
    );
}

const Edit = ( props ) => {
    const { clientId } = props;
    const hasInnerBlocks = useSelect(
        ( select ) =>
            select( blockEditorStore ).getBlocks( clientId ).length > 0,
        [ clientId ]
    );
    const Component = hasInnerBlocks
        ? EditContainer // display the inner blocks
        : Placeholder;  // or the variation picker

    return <Component { ...props } />;
};

registerBlockType( \'my-blocks/foo-section\', {
    apiVersion: 2,
    title: \'Foo Section\',
    category: \'layout\',
    edit: Edit,
    save: () => (
        <div { ...useBlockProps.save( { className: \'foo-section\' } ) }>
            <InnerBlocks.Content />
        </div>
    ),
} );