当您在 WordPress 块编辑器 (Gutenberg) 中创建块时,您可以创建一个允许其他块类型嵌套在块中的区域。您可以使用InnerBlocks组件执行此操作。

在我们的其他指南中,我们之前探索了块模式和块模板。本指南着眼于为嵌套块创建模板。

先决条件

• 熟悉为 WordPress Gutenberg 创建插件

创建嵌套块插件

在执行创建 Gutenberg 插件教程中的步骤后,直到(但不包括)步骤 5,您应该拥有创建嵌套块插件的框架。

将内部块添加到/src/edit.js

在编辑器中打开/src/edit.js并将useBlockProps的导入替换为以下内容:

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

这将让我们在编辑渲染方法中使用 InnerBlocks 组件。

然后将整个 Edit 函数更改为以下内容:

export default function Edit() {
    return (
        <div { ...useBlockProps() }>
            <InnerBlocks/>
        </div>
    );
}

这注册了 InnerBlock

输出/src/save.js中的属性

在编辑器中打开/src/save.js并将useBlockProps的导入替换为以下内容:

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

这将让我们在保存渲染方法中使用 InnerBlocks 组件。

接下来通过将save函数替换为以下内容来输出 Innerblocks 组件的内容:

export default function save() {
    return (
        <div { ...useBlockProps.save() }>
            <InnerBlocks.Content />
        </div>
    );
}

这只是将 InnerBlocks 的值输出到<div>中。

编译插件

打开终端,确保您位于插件的根目录中并运行以下命令:

npm start

该脚本将编译。如果您有任何错误,终端应该让您知道它们是什么。

添加 InnerBlocks 模板

为了简单起见,我们将使用我们之前为块模式和块模板指南创建的完全相同的模板。

该模板与我们在块模板指南中定义的模板非常相似,但是属性位于对象而不是多维数组中。

将Edit函数替换为以下代码:

export default function Edit() {
    return (
        <div { ...useBlockProps() }>
            <InnerBlocks
                template={ [
                    [ 'core/heading', { level: 2, content: 'Example Nested Block Template' } ],
                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet labore cras venenatis.' } ],
                    [ 'core/columns', {},
                        [
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 1' } ],
                                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.' } ],
                                ]
                            ],
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 2' } ],
                                    [ 'core/paragraph', { content: 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.' } ],
                                ]
                            ],
                        ]
                    ],
                ] }
                templateLock="all"
            />
        </div>
    );
}

这将为嵌套块创建一个模板。请注意使用设置为 all 的templateLock。这与块模板](https://wholesomecode.ltd/guides/register-block-template-wordpress-gutenberg/#template-lock)的[模板锁的行为相同,并具有以下两个选项:

• all— 阻止所有操作。无法插入新块、移动现有块或删除块。

• insert— 阻止插入或移除块,但允许移动现有块。

您还可以定义嵌套块中允许哪些块。

1. 插入和查看 InnerBlocks 模板

---

您可以像插入任何其他块一样插入嵌套块,方法是单击加号图标并搜索Wholesome Plugin。

插入嵌套块模板

请注意,和以前一样,嵌套块内的嵌套块没有应用模板锁。

这当然有解决方法,通过创造性地创建块模板和自定义嵌套块的组合。

查看区块

在对 SCSS 进行了一些修改之后,我们的输出块看起来有点像这样:

插入嵌套块模板

额外:嵌套块的允许块

您可以通过说明允许将哪些块插入其中来限制模板,而不是锁定模板。只需将Edit函数替换为以下代码:

export default function Edit() {
    return (
        <div { ...useBlockProps() }>
            <InnerBlocks
                template={ [
                    [ 'core/heading', { level: 2, content: 'Example Nested Block Template' } ],
                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet labore cras venenatis.' } ],
                    [ 'core/columns', {},
                        [
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 1' } ],
                                    [ 'core/paragraph', { content: 'Lorem ipsum dolor sit amet id erat aliquet diam ullamcorper tempus massa eleifend vivamus.' } ],
                                ]
                            ],
                            [ 'core/column', {}, [
                                    [ 'core/heading', { level: 3, content: 'Sub Heading 2' } ],
                                    [ 'core/paragraph', { content: 'Morbi augue cursus quam pulvinar eget volutpat suspendisse dictumst mattis id.' } ],
                                ]
                            ],
                        ]
                    ],
                ] }
                allowedBlocks={ [
                    'core/column',
                    'core/columns',
                    'core/heading',
                    'core/paragraph',
                ] }
            />
        </div>
    );
}

在这里,我们省略了templateLock参数,而是将嵌套块限制为以下块:

• 柱 (core/column)

• 列 (core/columns)

• 集团(core/group)

• 标题 (core/heading)

• 段 (core/paragraph)

同样,这不适用于模板中的任何嵌套块。

额外:更进一步

• 需要更灵活的东西吗?尝试注册块模式

• 需要更静态的东西吗?尝试注册块模板