InnerBlocks 组件

InnerBlocks 组件，在HTML结构中体现为 “带动态属性的容器”（靠类名和 data 属性标识），该容器是执行规则的载体。而定义该规则体现在block.json文件中和InnerBlocks相关的配置字段：parent、ancestor、allowedBlocks 。如：配置了 allowedBlocks: [“core/column”]，所以它（即：<div class=”wp-block-columns__inner-container”>只允许装 core/column 子区块。

<!-- core/columns 区块本身的容器 伪代码 -->
<div class="wp-block-columns" data-block="abc123" data-type="core/columns">
  <!-- InnerBlocks 组件渲染的“子区块容器” -->
  <div class="wp-block-columns__inner-container">
    <!-- 里面的 core/column 子区块 -->
    <div class="wp-block-column" data-block="def456" data-type="core/column">
      <!-- 列内部的内容（比如段落） -->
      <p class="wp-block-paragraph">...</p>
    </div>
  </div>
</div>

布局方向

<InnerBlocks orientation="horizontal" />

设置 orientation 属性，以表明当前使用的是水平布局，该属性本身不会影响内部区块的布局，它的作用有两个：一是让子区块上的「区块移动图标」以水平方向显示，二是确保拖放功能能正常工作。

默认的区块移动图标，垂直方向

设置后的的区块移动图标，变成水平方向

父级（parent）、祖先级（ancestor）和子级（children）

作用1：限制嵌套区块的 “可发现性”

举个例子：

core/column（列区块）设置了 parent: [ “core/columns” ]，这意味着：

• 当用户在 core/columns（多列容器）内部点击 “添加区块” 时，能在插入器中找到 core/column（可发现）；
• 当用户在普通文章页面或其他区块内部点击 “添加区块” 时，插入器中不会显示 core/column（不可发现）。

inserter区块插入器面板

nested block（嵌套子区块）

若 Columns（列容器）的 InnerBlocks 只允许装 Column（列），且 Column 只能在 Columns 里插入，那么 Column 就是 Columns 的 nested block（嵌套子区块）。

useBlockProps hook

可以用useBlockProps代替<InnerBlocks>组件，有以下好处：

1：减少 DOM 元素的嵌套层级，虽然没啥用:)

2：可以在内部子区块的同一层级插入任意元素，提升了区块布局的灵活性。

3：可以自定义内部区块容器的 HTML 结构时（比如添加特定类名、修改标签类型为<section>
而非<div> ）