WordPress Gutenberg Block VariationPicker组件无法显示已注册区块变体问题求助

我帮你排查了代码里的几个关键问题，以下是修正后的完整方案：

问题分析 #

你的代码里存在几个导致组件无法正常渲染的核心问题：

• 缺少blocksStore的导入，无法正确获取区块变体数据
• 调用组件时没有传递必要的blockName属性，组件不知道要加载哪个区块的变体
• __experimentalBlockVariationPicker需要onSelect回调来处理变体选择逻辑，缺少该回调可能导致组件无法正常工作
• 组件调用方式错误，直接引用组件对象而非渲染JSX元素

修正后的完整代码 #

1. 完善BlockVariationPicker组件 #

import { useSelect, useDispatch } from '@wordpress/data';
// 补充导入blocksStore，这是获取区块变体的关键
import { store as blocksStore } from '@wordpress/blocks';
import { 
    __experimentalBlockVariationPicker as BlockVariationPicker, 
    store as blockEditorStore
} from '@wordpress/block-editor';

const MyBlockVariationPicker = ( { blockName } ) => {
    const { setAttributes } = useDispatch( blockEditorStore );
    
    const variations = useSelect( ( select ) => {
        const { getBlockVariations } = select( blocksStore );
        // 精准筛选出scope为block的变体
        return getBlockVariations( blockName, 'block' );
    }, [ blockName ] );

    // 必须添加onSelect回调，处理变体选择后的属性更新逻辑
    const handleSelectVariation = ( variation ) => {
        if ( variation.attributes ) {
            setAttributes( variation.attributes );
        }
    };

    return (
        <BlockVariationPicker
            variations={ variations }
            onSelect={ handleSelectVariation }
            // 可选：添加标签提升组件可用性
            label="选择 Testimonial 变体"
        />
    );
};

2. 在自定义区块的edit函数中正确调用组件 #

import { useBlockProps } from '@wordpress/block-editor';

const Edit = ( props ) => {
    const blockProps = useBlockProps();
    // 从props中获取当前区块的name，直接传递给Picker组件
    const { name: blockName } = props;

    return (
        <div { ...blockProps }>
            {/* 用JSX语法正确渲染组件，并传递blockName属性 */}
            <MyBlockVariationPicker blockName={ blockName } />
        </div>
    );
};

3. 变体注册代码验证（你的原有代码没问题，可补充优化） #

import { registerBlockVariation } from '@wordpress/blocks';

registerBlockVariation( 'my/testimonial', [
    {
        name: 'testimonial-1',
        title: 'Testimonial 1',
        scope: ['block'],
        attributes: { example: 'testimonial-1' },
        // 可选：添加图标让变体展示更直观
        icon: 'star-filled',
    },
    {
        name: 'testimonial-2',
        title: 'Testimonial 2',
        scope: ['block'],
        attributes: { example: 'testimonial-2' },
        icon: 'star-empty',
    }
] );

关键修复点说明 #

• 补全依赖导入：必须导入@wordpress/blocks的blocksStore，才能调用getBlockVariations获取变体数据
• 正确传递属性：调用组件时必须传入blockName，否则组件无法定位到目标区块的变体
• 添加回调函数：__experimentalBlockVariationPicker依赖onSelect完成变体选择后的状态更新，没有它组件可能无法正常渲染或触发交互
• 修正组件调用方式：要使用<MyBlockVariationPicker />的JSX语法，而非直接引用组件对象

内容的提问来源于stack exchange，提问作者CyberJ