InnerBlock

Gutenberg Blocks can have an InnerBlock section where you can embed other blocks. You can add blocks of your choices inside a designated area of your choosing.

InnerBlock is only available in 1.1-RC versions and may not be suitable for production.

This article is about the WordPress plugin GutenBricks, which allows you to create Gutenberg blocks using the Bricks Builder page builder in a no-code approach. Visit GutenBricks.com for more information.

Watch How it Works

Use Cases

The following are some examples of InnerBlocks using GutenBricks:

Example 1: Embedding text blocks to create a Rich Text area

You can create an InnerBlock area to add a Rich Text section using Gutenberg core text blocks.

Example 2: Restrict specific Blocks to be added in an area

In the blocks below, the card block called 'Feature Item' is embedded inside a Container block. You can restrict which parent blocks certain blocks can be added to and which blocks are allowed in the InnerBlock. All these are configured within Bricks Builder.

For example, in the block below:

• The Feature Item can only added inside the Container block

• The Container block only allows the Feature Item block in its InnerBlock.

Template credit: BricksMaven

Container block only allows one type of block; the Feature Item

How to set up InnerBlock in Bricks Builder

For 1.1.0 RC1

GutenBricks provides a special element GutenBricks InnerBlock which you can find in the left panel. You can add it in an area where you want to embed child blocks. GutenBricks InnerBlock itself is also a container. So you can configure the layout such as flex box or grids.

You can search it using "Search elements.."

The InnerBlock area is inserted as an element

IMPORTANT: The Gutenberg editor only allows one InnerBlock per block. GutenBricks will ignore any additional InnerBlocks.

Allowing specific blocks

Select GutenBricks InnerBlock and scroll down the left panel. You will see the options fields below:

1. Allowed Core/Non-GutenBricks Blocks: You can select multiple Core Gutenberg blocks such as Paragraph or Heading and Non-GutenBricks blocks. You can leave it blank to allow all of them or you can also select Disable All Core/Non-GutenBricks Blocks to disable all the core blocks.

2. Allowed GutenBricks Blocks: You can select GutenBricks blocks allowed in the InnerBlock. This works the same as the Allowed Core/Non-GutenBricks Blocks field above. If the blocks are not enabled for the post type, they will not be visible even if you select them in this field.

Default Blocks

You can set Default Blocks for the InnerBlock. Otherwise, it will be empty. It is in a string template format. you can copy the blocks from the Gutenberg editor and paste them into the field.

For example, in the screenshot below, we are copying a single card block and its string form is:

<!-- wp:default/gutenb-feature-item {"block_id":"lzfq0fct"} /-->

Set Parent block

Some blocks are meant to be inside certain blocks only. In this case, you can set one or more parents to restrict where the block can be added.

You can configure this in Settings -> Template Settings -> GutenBricks -> InnerBlock section.