InnerBlocks
The InnerBlocks component lets you add an area to your block where other arbitrary blocks can be inserted. How is this useful? Imagine you want to create a block for an item in a frequently-asked-questions (FAQ) list. You want people to be able to enter a question and an answer. One way you could achieve this is by creating a block that has two RichText components: one for the question and another for the answer.
The challenge here is that the RichText component only supports one HTML tag at a time. So if you configure the answer RichText component to output a paragraph tag, people will only be able to insert paragraphs into the answer. What if you want people to be able to insert other content such as unordered lists, numbered lists, or even images? That’s where the InnerBlocks component comes in handy.
Instead of using a RichText component for the answer, you could instead use an InnerBlocks component. This will allow any type of block (paragraph, lists, images, etc.) to be inserted into the answer area of your block. Or, you can configure the InnerBlocks component to only allow certain types of blocks.
Note: only one InnerBlock component can be added to a block. This is a limitation in WordPress, not Wicked Block Builder. See below for how to work around this limitation.
Settings
Allowed Blocks
Controls what blocks may be added.
- Any: any type of block can be inserted
- None: no blocks can be inserted
- Custom: choose this option to specify a list of blocks that are allowed to be inserted. Only the blocks in this list will be able to be added
Template Lock
Use the Template Lock setting to control whether or not blocks can be added or removed.
- None: no locking is applied. This means blocks can be added, removed, and re-ordered
- All: this locks everything meaning no blocks can be added, removed, or re-ordered
- Insert: inserting blocks is locked. This means blocks can not be inserted (or removed); however, the existing blocks can be re-ordered
Orientation
The Orientation setting changes the display of the move arrows shown in the toolbar for each block in the InnerBlocks area.
- Vertical: up/down arrows will be displayed indicating that blocks can be re-ordered vertically (i.e. up or down)
- Horizontal: left/right arrows will be displayed indicating that blocks can be re-ordered horizontally (i.e. left or right)
Template
Use the Template setting to pre-define a template for your InnerBlocks area. Any time your block is inserted into the editor, the InnerBlocks area will be pre-populated with the blocks you specify in the template. You can also initialize the default attributes for each block in the template.
To start, click “Add Inner Block.” The Block Type dropdown lets you choose the type of block to add and the Parent dropdown lets you nest the block within another block within the template.
To initialize the attributes of a block, click “Add Attribute.” For example, to add an H2 heading block to your template with test placeholder text “Headline here…”, do the following:
- Choose “Heading” from the Block Type dropdown
- Click “Add Attribute”, make sure “String” is selected in the first dropdown, enter “placeholder” in the “Attribute” text field, and enter “Headline here…” in the “Value” field
- To set the heading level, add another attribute. The core heading block accepts a numeric attribute named “level”. So, to default the heading to an H2, select “Number” from the first dropdown, enter “level” for the attribute and enter “2” as the value.
Finding out the attributes of a block can be a little tricky and technical. The best way to find them is to review the block’s readme.
Working Around the One InnerBlocks Component Limitation
Unfortunately, only one InnerBlocks component may be added to a block at a time. This is a limitation in the WordPress block editor, not Wicked Block Builder. You can work around this by splitting a block up into two blocks. Create one block (block A) with an InnerBlocks component that is configured the way you want. Then, create another block (block B) with an InnerBlocks component that only allows the first block (i.e. block A).
For example, imagine you want to create an accordion block. For each item in the accordion, you want people to be able to enter a headline and some content. You want people to be able to enter any type of block (paragraphs, lists, images, etc.) in the content area so you decide to use an InnerBlocks component.
To work around the one InnerBlocks limitation, first create a block to represent an individual item in your accordion list. This block might consist of a RichText component for the headline and an InnerBlocks component for the content.
Next, create a block for the accordion itself. Add an InnerBlocks component and change the Allowed Blocks setting to only allow the accordion item block you created in the first step.
Now, when someone inserts your accordion block, they’ll be able to add any number of items to the list and each item in that list will be able to have an InnerBlocks area.
