Components - InnerBlocks
Last modified:
Inner blocks allow you to insert additional blocks to your blocks. Under the hood, Blockstudio is using the InnerBlocks component. Please note that it is only possible to use one InnerBlocks component per block, this is a WordPress limitation.
Basic usage
To use InnerBlocks, you need to add the InnerBlocks
component to your block.
<InnerBlocks /> or <InnerBlocks/>
Copy
The composition is up to you. You can nest the InnerBlocks
component as deep
as you want or just use it by itself.
Properties
tag
By default, the InnerBlocks
component is rendered as a div
element. You can
change this by using the tag
prop.
<InnerBlocks tag="section" />
Copy
allowedBlocks
The allowedBlocks
prop allows you to define which blocks can be inserted into
the InnerBlocks
component.
<InnerBlocks allowedBlocks="<?php echo esc_attr(wp_json_encode(['core/heading', 'core/paragraph'])); ?>" />
Copy
<InnerBlocks allowedBlocks="{{ ['core/heading', 'core/paragraph']|json_encode|escape('html_attr') }}" />
Copy
template
The template
prop allows you to define a template for the InnerBlocks
component.
<InnerBlocks template="<?php echo esc_attr( wp_json_encode([['core/heading', ['placeholder' => 'Book Title']], ['core/paragraph', ['placeholder' => 'Summary']]])); ?>" />
Copy
<InnerBlocks template="{{ [['core/heading', { placeholder: 'Book Title' }], ['core/paragraph', { placeholder: 'Summary' }]]|json_encode|escape('html_attr') }}" />
Copy
templateLock
The templateLock
prop allows you to define if the template can be modified or
not.
- contentOnly: prevents all operations. Additionally, the block types that don't have content are hidden from the list view and can't gain focus within the block list. Unlike the other lock types, this is not overrideable by children.
- all: prevents all operations. It is not possible to insert new blocks. Move existing blocks or delete them.
- insert: prevents inserting or removing blocks, but allows moving existing ones.
- false: prevents locking from being applied to an InnerBlocks area even if a parent block contains locking.
useBlockProps
useBlockProps
will remove the outer wrapper of the InnerBlocks
component
inside the editor. See useBlockProps
for more information.
Context
Registering
Blockstudio supports context for the InnerBlocks
component. This allows you to
pass data from the parent block to the child blocks. While it uses the WordPress
core context
mechanism
under the hood, Blockstudio provides a more convenient API.
Instead of having to define all attributes that should be passed in the context separately, you can simply subscribe to all attributes of a parent block.
Let's say you have a container block setup like so:
{ "$schema": "https://app.blockstudio.dev/schema", "apiVersion": 2, "name": "blockstudio/container", "title": "Container", "category": "design", "icon": "star-filled", "description": "Container block.", "blockstudio": { "attributes": [ { "id": "full-width", "type": "toggle", "label": "Makes section full width" } ] } }
Copy
Inside your child block, simply use the usesContext
property with the parent
block name to gain access to all parent attributes in your block template.
{ "$schema": "https://app.blockstudio.dev/schema", "apiVersion": 2, "name": "blockstudio/element", "title": "Element", "category": "design", "icon": "star-filled", "description": "Element block.", "usesContext": ["blockstudio/container"], "parent": ["blockstudio/container"], "blockstudio": true }
Copy
Templates
The context
variable is available inside your block templates to access all
parent attributes. Child blocks will automatically reload in the editor if
parent data changes.
<?php $container = $context['blockstudio/container']; ?> <h1> <?php echo $container['full-width'] ? 'is full width' : 'no full width'; ?> </h1>
Copy
{% set container = context['blockstudio/container'] %} <h1> {{ container['full-width'] ? 'is full width' : 'no full width' }} </h1>
Copy
Frontend wrapper
InnerBlocks
has to render a wrapper element around its children inside the
editor, however, it can be removed from the frontend by using
blockstudio/blocks/components/innerblocks/frontend/wrap
filter.
add_filter( "blockstudio/blocks/components/innerblocks/frontend/wrap", function ($render, $block) { if ($block->name === "blockstudio/my-block") { $render = false; } return $render; }, 10, 2 );
Copy