如何在块变量中锁定内部块？

时间：2021-10-15 作者：Cornelius

我正在尝试创建一个新的组块，其中包括一个core/heading 阻止，然后阻止core/gallery 块我不希望编辑器能够向组中添加其他内部块。我也不希望编辑器能够删除标题或库块。

以下是迄今为止我的区块变化：

    wp.blocks.registerBlockVariation("core/group", {
        name: "logo-grid",
        title: "Logo Grid",
        description: "",
        category: "media",
        icon: "smiley",
        scope: ["inserter"],
        attributes: {
        },
        innerBlocks: [
            ["core/heading", { level: 2, placeholder: "Heading" }],
            ["core/gallery"],
        ],
    });
我已经调查过了templateLock 和template_lock 和lock 属性，但似乎都不适用于块变化？

我意识到我可能使用了错误的工具，试图使用此功能创建块变体。对于如何实现我的目标，有什么建议吗？

1 个回复
SO网友:Cornelius

我想我已经弄明白了。我没有创建块变体，而是使用块模板创建了一个全新的块。

import { registerBlockType } from "@wordpress/blocks";
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";

const BLOCKS_TEMPLATE = [
    ["core/heading", { level: 2, placeholder: "Heading" }],
    ["core/gallery", {}],
];

registerBlockType("logo-grid", {
    apiVersion: 2,
    title: "Logo Grid",
    icon: "smiley",
    category: "media",
    edit: () => {
        return (
            <div {...useBlockProps()}>
                <InnerBlocks
                    orientation="horizontal"
                    template={BLOCKS_TEMPLATE}
                    templateLock="all"
                />
            </div>
        );
    },
    save: () => {
        return (
            <div {...useBlockProps.save()}>                
                <InnerBlocks.Content />               
            </div>
        );
    },
});

标签： block-editor   小码农  

相关推荐