reactjs - 古腾堡块变化选择器不工作

Question

我正在尝试像在 WordPress Github 示例中一样添加 BlockVariationPicker ：

import { useSelect } from '@wordpress/data';
import {
    __experimentalBlockVariationPicker as BlockVariationPicker,
    store as blockEditorStore,
} from '@wordpress/block-editor';

const MyBlockVariationPicker = ( { blockName } ) => {
    const variations = useSelect(
        ( select ) => {
            const { getBlockVariations } = select( blocksStore );
            return getBlockVariations( blockName, 'block' );
        },
        [ blockName ]
    );
    return <BlockVariationPicker variations={ variations } />;
};

在我的编辑功能中，我添加：

{ MyBlockVariationPicker }

块变化选择器不显示。

我已经用范围块注册了我的集团变体：

registerBlockVariation(
   'my/testimonial',
   [
     {
       name: 'testimonial-1',
       title: 'Testimonial 1',
       scope: ['block'],
       attributes: {
         example: 'testimonial-1'
       },
   },
   {
       name: 'testimonial-2',
       title: 'Testimonial 2',
       scope: ['block'],
       attributes: {
         example: 'testimonial-2'
       },
     }
   ]
 );

块变化应该显示，{ MyBlockVariationPicker }但不显示。不幸的是，没有太多关于此的文档。我们如何使用 Github 示例中所示的块变化选择器渲染块的变化？

标签： reactjswordpress-gutenberggutenberg-blocks

Answer 1

Columns和Query块的使用和__experimentalBlockVariationPicker它的一个非常好的组件/UI，我同意，它没有很多如何使用它的例子，很可能因为它仍然是“实验性的”并且仍然可能改变。

我发现 Columns 和 Query 块都BlockVariationPicker通过检查当前块（按 clientId）是否包含任何 InnerBlocks 来显示；如果没有，BlockVariationPicker则显示。在您自己的块中使用此组件时，您将需要一些属性或属性来检查是否已选择变体。

我已经使用my/testimonial块 + 变体的结构并基于 BlockVariationPicker在 Columns 块中的实现方式组合了一个基本/工作示例：

import { get } from 'lodash';
import { useSelect } from '@wordpress/data';
import { registerBlockType, registerBlockVariation, store as blocksStore } from '@wordpress/blocks';
import { useBlockProps, __experimentalBlockVariationPicker as BlockVariationPicker } from '@wordpress/block-editor';


// Create our own BlockVariationPicker
const MyBlockVariationPicker = ({ name, setAttributes }) => { // Note: We need "name" and "setAttributes" from edit() props
    const { blockType, variations, defaultVariation } = useSelect(
        (select) => {
            const { getBlockVariations, getBlockType, getDefaultBlockVariation } = select(blocksStore);
            return {
                blockType: getBlockType(name),
                defaultVariation: getDefaultBlockVariation(name, 'block'),
                variations: getBlockVariations(name, 'block')
            };
        },
        [name]
    );
    return <BlockVariationPicker
        variations={variations}
        icon={get(blockType, ['icon', 'src'])}
        label={get(blockType, ['title'])}
        onSelect={(nextVariation = defaultVariation) => {
            if (nextVariation.attributes) {
                setAttributes(nextVariation.attributes); // Use setAttributes to set the selected variation attributes
            }
        }}
    />;
};

// Register the Block Variations
registerBlockVariation(
    'my/testimonial',
    [
        {
            name: 'testimonial-1',
            title: 'Testimonial 1',
            icon: 'admin-comments', // Added icon so the variation is visibly different (optional)
            scope: ['block'],
            attributes: {
                example: 'testimonial-1'
            },
            isDefault: true
        },
        {
            name: 'testimonial-2',
            title: 'Testimonial 2',
            icon: 'admin-links',
            scope: ['block'],
            attributes: {
                example: 'testimonial-2'
            },
        }
    ]
);

registerBlockType('my/testimonial', {
    title: 'My Testimonial',
    keywords: ['testimonial'],
    icon: 'admin-post',
    attributes: {
        example: {
            type: "string", // no default set, example is "undefined"
        }
    },
    edit(props) {
        const { attributes, setAttributes } = props;

        // If example is undefined, show Variation Picker
        if (attributes.example === undefined) {
            return (
                <MyBlockVariationPicker {...props} />
            );
        }
        // Otherwise show the Editor
        return (<div {...useBlockProps()}><h2>{attributes.example}</h2></div>);
    },
    save: ({ attributes }) => {
        return <div {...useBlockProps.save()}><h2>{attributes.example}</h2></div>;
    }
})

如果您构建上述 javascript，生成的块允许您从插入的两种变体中进行选择：