Block Templates and Block Styles

I regularly build custom blocks for clients. They very often contain a set of InnerBlocks called a template. The syntax for this is not well documented.

$template = array(
		array( 'core/buttons', array(), array(
			array( 'core/button', array(
				'text' 	=> 'Button Text',
				'className'	=> 'is-style-transparent-arrow'
			) ),
		) ),
		array( 'core/paragraph', array(
			'placeholder' => 'Add a description of your button here...',
		) )
	);

The template is an array of blocks.

Each block is an object with the block name as a string, an array of that block’s properties, and, optionally, an array of nested blocks. In the example above, the ‘core/buttons’ block could have some properties set on it to make the nested button blocks stack vertically.

The other detail to pay attention to is that the button in the example has its className property defined. This is class that would be applied if the user had selected the “Transparent with Arrow” block style that is defined elsewhere in the theme.

Leave a Reply

Your email address will not be published. Required fields are marked *