Decoding the template attribute for Inner Blocks in WordPress

Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /home/indithem/public_html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86

Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /home/indithem/public_html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86

InnerBlocks is quite a nifty feature in WordPress. It allows you to set up a new block comprised of existing blocks in a pre-defined layout in the content of a post. They prove to be very useful when dealing with sites having monotonous content on a number of posts. It can be a real time saver. In order to set up a block containing InnerBlocks, refer to the official documentation. It will clear a lot of things for you. However, in this article, we will not be talking about setting up InnerBlocks. In this post, we’ll focus on one particular attribute template. The layout of a block is set up with the help of this attribute and frankly, it’s not very well explained in the official docs. So, I thought of shedding some light on it.

The template attribute

The template attribute accepts an array whose values are the values of pre-existing blocks that we widh to include in Inner Blocks. Let’s take the example in the official docs-

In this code, the array has three values. These are the array representation of blocks that are to be included in the Inner Block. Each one of these arrays has two parameters. The first one is the name of the block to be included and the second on is the default attributes parameter. If you wish to provide some default attributes to the block, this is the place to mention them. Each block has a different set of attributes which can be defined here.

In this example, the newly created Block will have 3 inner blocks – Image, Heading and Paragraph with the latter two having default placeholder values as Title and Summary respectively.

But wait! There’s more to it…

So far, we have covered the officially provided documentation about creating a template for Inner Blocks. On a closer inspection in WordPress core, it appears there is a third parameter to the block array which is not mentioned in the documentation. This array stores the Inner Blocks in the form of an array for that particular block. Let’s take a look at it with an example .

If you have ever used the Columns block, you must have noticed that there is no option for a 4-column layout. It’s rather inconvenient as most of the sites use that 4-column layout to showcase their content.

This 4-Column layout can be created using Inner Blocks. Consider the following code –

Notice what has happened here. In the main array, we added the array for the columns block. Then, in order to add Inner Blocks to this block, we make use of the third parameter in the array. We added 4 column block arrays as values for the third parameter of the columns array. (BTW: the column block was a new thing for me, It isn’t mentioned in the docs anywhere).

So, after adding this code to the Inner Block’s template attribute, you’ll be able to get a new block which would be a 4-Column layout block.

In this way, we can create Inner Blocks for Inner Blocks (Blockception…). Here, i applied it on the Columns block but you can use it on others as well. One that comes to mind is the cover block. That’s also a good prospect for blockception.

This is all for this article, if you enjoyed it, do take a look at some of our other articles in the Blog section. There are some really cool articles on things that can be done with and to WordPress to enhance its functionality.