Home/ Documentation/ WordPress/ Actions/ Block Inner Content

Block Inner Content

Block Inner Content action defines an area within the block that can contain other blocks (sub-blocks).

Each block can have only one inner content area. Multiple inner content areas are not supported by WordPress.

By default any block type can be inserted into the inner content area.

Allowed block types

To limit the block types that can be inserted, list the allowed types, one per line.

For blocks that are defined in the current Pinegrow theme or plugin project, we don’t have to prefix ids with their namespaces. It is enough to mention the main block id, for example project.

Pinegrow automatically adds namespaces during export.

For block types defined in core WordPress or in other projects we need to list the whole name, including the namespace. For example core/image.

We can combine both types of blocks:

project
counter
core/image
myotherproject/reference

Orientation

Orientation helps WordPress block editor to place the insertion icon into the correct position.

Open the Template section to define the template.

Template

Template lets us pre-fill the inner content area with blocks.

By default, the template is auto generated based on what kind of blocks are defined within the Block Inner Content element.

For example, if any of the element direct children has a Block action that defines a new block type, this sub-block will be used in the template, repeated for each child element.

The template field lets us define a custom template. 

The field takes a valid JavaScript array definition in the same format accepted by WordPress.

Click on the Generate button to pre-fill the field with auto generated template, and then customize it.

The template contains a list of block types and their attributes (optional). Use ${this} instead of the current project slug.

For example:

[
    [ '${this}/block1', {attr1: 'val'} ]
    [ 'anotherproject/block2', {attr1: 'val'} ]
]

Important, setting an incorrect value will break the JavaScript code of the block.

Learn more about the template format in WordPress documentation.

Lock

Lock lets us lock the template:

  • All – Users will not be allowed to add, delete or move blocks in the inner content area. They will only be allowed to change their attributes and editable content.
  • Insert – Users will not be allowed to add or delete blocks, but they will be able to reorder them and change their editable content.

Defining Blocks and sub-blocks

Thanks to visual editing in Pinegrow it is very easy to define nested blocks and their sub-blocks with further sub-sub-blocks, if needed.

This lets us easily define tailor made blocks that fit our content structure perfectly.

For example, we might have a Projects section that describes what we do and  then lists the some of the relevant projects.

We could define just block Projects and hardcode editable attributes for a fixed number of projects by adding fields such as project1_image, project1_name, project2_image, project2_name and so on.

But this is not the right approach. The drawbacks are:

  • We end up with a large amount of attributes.
  • The number of projects is fixed. Adding or removing projects requires changes to the block definition, and we can’t have multiple instances of the block with different numbers of showcased projects.
  • Reordering the projects is very hard.

Instead, we will define the block type Projects, create Inner Blocks area on the DIV element that contains showcased projects and define the block type Project on the first showcased project.

Block Inner Content action lets us specify what block types are allowed in there. In this case we will say “project”. 

Note, WordPress expects the whole block type id, including the namespace. But Pinegrow lets us use just the id for blocks from the same project and then automatically adds the namespace slug during export.

Projects and Project block types create a very intuitive and pleasant editing experience.

Clicking on the + icon on the Projects block immediately adds a Project block. We select it and set its attributes.

We can add as many projects as we want.

And, can easily reorder them with block editor controls.

We can now have multiple instances of the Projects block on the website, for example, Recent projects, International projects, Awarded projects and so on. 



Last updated on November 10, 2021 at 2:44 am


Print this article