'core/colums' innerBlocks 的允许区块

Question

我用 innerBlocks 创建了一个自定义块，我们称它为父块。我只允许在该块内使用一种块，让我们使用“allowedBlocks”将其称为 child block。简单的用例是当用户想要在父块中添加子块时，一切正常。现在问题来了：有时需要能够在父块内添加多个子块并排放置。为此，我很乐意使用 gutenberg 的 core/colums 块。问题是，在 core/colums 块内我也只想添加子块而不是其他块。

有没有办法为allowedBlocks中的块设置allowedBlocks？是否有一些 'global' 的说法：“此块内的所有块只能是 [..., ..., ...] 之一？”

edit: function( props ) {

return (
<InnerBlocks allowedBlocks={ [ 'my-blocks/child-block', 'core/columns' ] } />
);

}

现在我可以指定可以在 InnerBlock 中选择哪些块 core/colums 吗？

*我知道我可以让人们在 parent 中添加多个 child，但我希望它们结构化并响应列..

我的另一个想法是以某种方式从 gutenberg 复制 core/colums 块并修改它，虽然我不知道在哪里可以找到它而且它不会真的很漂亮..*

Answer 1

目前，core/column 不支持传递 allowedBlocks 属性，尽管您可以为 InnerBlocks 创建自己的 custom renderAppender 作为限制可以添加的块的方法。

下面是使用 3 个自定义块、模板、子块和父块关系的替代方法：

自定义方块：包含一个 InnerBlock，其模板将自定义父块设置为列的内容。如果需要，您还可以在模板中添加其他核心块。

registerBlockType('my-blocks/custom-block', {
...
    edit: () => {
        const MY_TEMPLATE = [
            ['core/columns', { columns: 2 }, [
                ['core/column', {}, [
                    ['my-blocks/parent-block']
                ]],
                ['core/column', {}, [
                    ['my-blocks/parent-block']
                ]],
            ]]
        ];
        return (
            <InnerBlocks
                template={MY_TEMPLATE}
                templateLock="all"
            />
        );
     },

    save: () => {
        return <InnerBlocks.Content />;
    }
});

父块：包含一个只接受子块的 InnerBlock（或者您也可以在 allowedBlocks 内添加其他核心块）。

registerBlockType('my-blocks/parent-block', {
...
    edit: function({className}) {
        return (
            <div className={className}>
                <InnerBlocks allowedBlocks={['my-blocks/child-block']} />
            </div>
        );
    },

    save: function({className}) {
        return (
            <div className={className}>
                <InnerBlocks.Content />
            </div>
        )
    }
})

子块：只能添加到其父级，因此不会出现在添加块插入器中，除非它在其父级块中。

registerBlockType('my-blocks/child-block', {
    ...
    parent: ['my-blocks/parent-block'],
    edit: ({ className }) => {
        return (
            <div className={className}>
                <h3>Child Block Content</h3>
            </div>
        );
    },

    save: ({ className }) => {
        return (
            <div className={className}>
                <h3>Child Block Content</h3>
            </div>
        );
    },
});

注意事项：这些列仍然允许在父块之后添加其他块，除非您创建自定义 renderAppender 来改变它。

上面的示例应该适用于您的场景，如通过实施额外的 'Custom Block' 来控制 InnerBlocks 的 allowedBlocks 并支持 core/columns.

core/column 和 core/columns 的源代码：

'core/colums' innerBlocks 的允许区块

allowed blocks for 'core/colums' innerBlocks

wordpress

wordpress-gutenberg

gutenberg-blocks