古腾堡块变体选择器不工作

Question

我正在尝试像在 WordPress Github example:

中一样添加 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 }

块变体选择器未显示。

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

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 示例所示？

Answer 1

Columns and Query 块都使用 __experimentalBlockVariationPicker 并且它非常好 component/UI 我同意，它没有太多如何使用它的例子，很可能是因为它仍然 'experimental' 并且仍有可能改变。

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

我根据 implemented in Columns block:

使用您的 my/testimonial 块 + 变体的结构并根据 BlockVariationPicker 的方式组合了一个 basic/working 示例

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，生成的块允许您从插入的两个变体中进行选择：

古腾堡块变体选择器不工作

Gutenberg Block Variation Picker not working

reactjs

wordpress-gutenberg

gutenberg-blocks