Inner Blocks

The Inner Blocks field allows you to create a field in which you can nest other fields and blocks.

Note: A single custom block can only contain one Inner Block field.

Click image to enlarge

1. Field Label: The field label will be displayed next to the field when adding the block to the post or page.
2. Field Name (slug): The field name should auto-fill based on the field label, but can be customized. This will be used in the PHP as part of the block template.
3. Field Type: Choose the Inner Blocks field type.
4. Help Text: Enter instructions to describe the data needed in the field. (optional).

PHP API Controls

• name
• label
• control
• order
• help

Template Usage

To add the Inner Blocks field in your template, use the field name you provided.

There are two ways you can do this.

Note: If the Inner Blocks will include a video or embed block, please use the PHP template method described below because they won’t work with the Template Editor.

1. Template Editor: Using the built-in template editor is the easiest way to create the required block template. The template editor accepts HTML markup, field names (enclosed in 2 brackets), and CSS only.

Here’s an example of the HTML we used in the template editor:

<div>
   {{inner-block}}
</div>

2. PHP Template: If you need to use logic, loop syntax, define variables, or use PHP, you can create the template manually using the PHP templating method instead.

For example:

<div>
  <?php echo block_value( 'inner-block' ); ?>
</div>

Calling block_value() will return all of the Inner Blocks markup.
Example template file: /blocks/block-example.php

<?php
// Example Inner Blocks Field
?>

<div>
  <?php echo block_value( 'inner-block' ); ?>
</div>

Important Note: If you plan to add an Embed block to the Inner Blocks, please use this PHP templating method instead of the Template Editor. This will ensure that scripts aren’t removed from the Embed block.

Block Usage

To use the block with the Inner Blocks field on your site, locate it in the blocks menu.

Click image to enlarge

It will then display within your post or page editor where you can add blocks inside.

Click image to enlarge