可以使用内部块组件。这用于Columns块、Social Links块或任何要包含其他块的块。
注：单个块只能包含一个内部块组件。
以下是InnerBlocks的基本用法。
从“@wordpress/blocks”导入{registerBlockType}；从“@wordpress/block-editor”导入{InnerBlocks，使用BlockProps}；registerBlockType（'gutenberg-examples/example-06'{// ...编辑：（）=>{const blockProps=使用块属性（）；返回(<div{…blockProps}><内部块/></div>);},保存：（）=>{const blockProps=useBlockProps.save（）；返回(<div{…blockProps}><内部块。内容/></div>);},} );
使用允许的块道具，除了允许的块中的字段块.json，哪些块可以作为此块的直接子体插入。动态地、单独地为每个块确定允许的块的列表是有用的。例如，由块属性确定：
const{allowedBlocks}=属性；//...<InnerBlocks allowedBlocks={allowedBlocks}/>；
如果允许的块列表始终相同，则首选允许的块块设置而不是。
默认情况下，内部块期望其块显示在垂直列表中。一个有效的用法是设置内部块的样式以使其水平显示，例如，通过向内部块包装器添加CSS flex或网格属性。当以这种方式设置块的样式时方向属性可以设置为指示正在使用水平布局：
<InnerBlocks orientation=“水平”/>
指定此属性不会影响内部块的布局，但会导致子块中的块移动器图标水平显示，并确保拖放操作正常。
默认情况下内部块通过打开允许的块列表允许的块单击块追加器时。可以使用默认块属性。例如：
<InnerBlocks defaultBlock={['核心/段落'，{placeholder:“Lorem ipsum…”}]}直接插入/>
默认情况下，此行为在直接插入道具设置为真的。这允许您指定应插入或不应插入默认块的条件。
使用模板特性定义插入时预填充InnerBlocks组件的一组块。可以在块上设置属性以定义其用途。下面的示例显示了使用InnerBlocks组件的书评模板，并设置占位符值以显示块的使用情况。
常量MY_TEMPLATE=[['核心/图像'，{}]，['core/heading'，{placeholder:'Book Title'}]，[“核心/段落”，｛占位符：“摘要”｝]，];//...编辑：（）=>{返回(<内部块模板={MY_template}templateLock=“全部”/>);},
使用模板锁定属性锁定模板。使用全部的完全锁定模板，因此无法进行任何更改。使用插入防止插入其他块，但可以对现有块重新排序。请参见templateLock文档以获取更多信息。
与无关内部块但值得一提的是，您可以创建岗位模板按post类型，它用一组块预加载块编辑器。
这个内部块模板用于您创建的单个块中的组件，帖子的其余部分可以包括用户喜欢的任何块。使用帖子模板，可以将整个帖子锁定为您定义的模板。
add_action（'init'，function（）{$post_type_object=获取post_type_对象（“post”）；$post_type_object->模板=数组(数组（“核心/图像”），阵列（“核心/标题”）);} );
使用InnerBlocks的常见模式是创建一个自定义块，该自定义块仅在插入其父块时可用。这允许构建器在块之间建立关系，同时限制嵌套块的可发现性。建设者可以使用三种关系：起源,祖先和允许的块差异如下：
- 如果您分配
起源然后您声明嵌套块只能作为父母的直系后代.
- 如果您指定
祖先然后您声明嵌套块只能作为父母的后代.
- 如果您分配
允许的块然后你在相反的方向陈述一个关系，也就是说，哪些块可以作为此块的直系后代.
两者之间的关键区别起源和祖先是起源具有更好的特异性，而祖先在其嵌套层次结构中具有更大的灵活性。
这方面的一个例子是Column块，它被指定起源块设置。这允许Column块仅作为其父Columns块中的嵌套直接子体可用。否则，Column块将不能作为块插入器中的选项使用。请参见供参考的列代码.
定义直接子块时，使用起源块设置，定义哪个块是父块。这样可以防止嵌套块显示在为其定义的InnerBlock外部的插入器中。
{“title”：“Column”，“name”：“core/column”，“父级”：[“核心/列”]，// ...}
注释作者名称块就是一个例子，它被指定为祖先块设置。这使得注释作者名称块只能作为其祖先注释模板块中的嵌套子体使用。否则，“注释作者名称”块将不能作为块插入器中的选项使用。请参见注释作者姓名代码供参考.
这个祖先关系允许Comment Author Name块位于层次结构树中的任何位置，而不是只是父“注释模板”块的直接子级，但仍将其在块插入器中的可用性限制为仅在“注释模板（Comment Template）”块可用时才可见，这是一个插入选项。
定义子块时，使用祖先块设置。这样可以防止嵌套块显示在为其定义的InnerBlock外部的插入器中。
{“title”：“评论作者姓名”，“name”：“core/comment-author-name”，“祖先”：[“核心/注释模板”]，// ...}
例如，导航块被指定为允许的块块设置。这使得只有块类型的特定子集可以作为导航块的直接后代。请参见导航代码供参考.
这个允许的块自定义块的构建者可以扩展设置。自定义块可以挂接到块.register块类型筛选并将其自身添加到导航的可用子项中。
定义一组可能的子块时，使用允许的块块设置。这限制了插入新的子块时插入器中显示的块。
{“title”：“导航”，“name”：“核心/导航”，“allowedBlocks”：[“core/navigation-link”，“core/search”，“core/social-links”，“核心/页面列表”，“内核/分隔符”]，// ...}
您可以使用名为使用内部块属性而不是内部块组件。此挂钩允许您对内部块区域的标记进行更多控制。
这个使用内部块属性从导出@wordpress/块编辑器包装与内部块组件本身并支持组件所做的一切。它也像使用块属性挂钩。
这里是基本的使用内部块属性挂钩的使用。
从“@wordpress/blocks”导入{registerBlockType}；从“@wordpress/block-editor”导入{useBlockProps，useInnerBlocksProps}；registerBlockType（'gutenberg-examples/example-06'{// ...编辑：（）=>{const blockProps=使用块属性（）；const innerBlocksProps=使用内部块属性（）；返回(<div{…blockProps}><div{…innerBlocksProps}/></div>);},保存：（）=>{const blockProps=useBlockProps.save（）；const innerBlocksProps=useInnerBlocks Props.save（）；返回(<div{…blockProps}><div{…innerBlocksProps}/></div>);},} );
此钩子还可以传递从使用块属性钩住使用内部块属性挂钩。这减少了我们需要创建的元素的数量。
从“@wordpress/blocks”导入{registerBlockType}；从“@wordpress/block-editor”导入{useBlockProps，useInnerBlocksProps}；registerBlockType（'gutenberg-examples/example-06'{// ...编辑：（）=>{const blockProps=使用块属性（）；const innerBlocksProps=使用内部块属性（blockProps）；返回(<div{…innerBlocksProps}/>);},保存：（）=>{const blockProps=useBlockProps.save（）；const innerBlocksProps=useInnerBlocks Props.save（blockProps）；返回(<div{…innerBlocksProps}/>);},} );
上述代码将在编辑器中呈现为以下标记：
<div><!-- 在此处插入内部块--></div>
使用hook方法的另一个好处是使用返回值（它只是一个对象），并进行解构以从对象中获取react子对象。此属性包含实际的子内部块，因此我们可以将元素放置在与内部块相同的级别上。
从“@wordpress/blocks”导入{registerBlockType}；从“@wordpress/block-editor”导入{useBlockProps，useInnerBlocksProps}；registerBlockType（'gutenberg-examples/example-06'{// ...编辑：（）=>{const blockProps=使用块属性（）；const｛children，…innerBlocksProps｝=使用innerBlocksProps（blockProps）；返回(<div{…innerBlocksProps}>{子}<!-- 在此处插入与子级相同级别的任意html--></div>);},// ...} );
<div><!-- 在此处插入内部块--><!-- 自定义html在同一级别上呈现--></div>