InnerBlocks

Open the live code editor

Edit this code to see the generated Gutenberg block files.

block.html

<section>
  <blocks templateLock>
    <block name="core/group">
      <block name="core/heading" level="3"></block>
      <block name="core/paragraph">
        <attribute name="content">
          Lorem <strong>ipsum</strong>
        </attribute>
      </block>
    </block>
  </blocks>
</section>

<section>
  <blocks templateLock>
    <block name="core/group">
      <block name="core/heading" level="3"></block>
      <block name="core/paragraph">
        <attribute name="content">
          Lorem <strong>ipsum</strong>
        </attribute>
      </block>
    </block>
  </blocks>
</section>

<section>
  <blocks templateLock>
    <block name="core/group">
      <block name="core/heading" level="3"></block>
      <block name="core/paragraph">
        <attribute name="content">
          Lorem <strong>ipsum</strong>
        </attribute>
      </block>
    </block>
  </blocks>
</section>

edit.js

render.php

block.json

index.js

Default InnerBlocks zone

block.html

block.html

<section>
  <blocks></blocks>
</section>

edit.js

render.php

block.json

index.js

InnerBlocks with templateLock

block.html

block.html

<section>
  <blocks templateLock>
    <block name="core/heading"></block>
  </blocks>
</section>

edit.js

render.php

block.json

index.js

InnerBlocks with default values

block.html

block.html

<section>
  <blocks>
    <block name="core/heading" level="3"></block>
    <block name="core/paragraph">
      <attribute name="content">
        Lorem <strong>ipsum</strong>
      </attribute>
    </block>
  </blocks>
</section>

edit.js

render.php

block.json

index.js

Nested InnerBlocks

block.html

block.html

<section>
  <blocks>
    <block name="core/columns">
      <block name="core/column">
        <block name="core/group">
          <block name="core/heading"></block>
          <block name="core/paragraph"></block>
        </block>
      </block>

      <block name="core/column">
        <block name="core/group">
          <block name="core/heading"></block>
          <block name="core/paragraph"></block>
        </block>
      </block>
    </block>
  </blocks>

</section>

edit.js

render.php

block.json

index.js