Create Gutenberg Template Using Inner Blocks

In previous blog posts, we have learned how to create custom Gutenberg blocks. In this tutorial we will learn how to create Gutenberg template with pre-defined blocks using inner blocks component. Please visit the introductory blog post to learn how to create a custom Gutenberg block before continuing this blog post.

Following code defines a constant named MY_TEMPLATE with pre-defined core blocks. This constant will later be used in the InnerBlocks component.

const MY_TEMPLATE = [
	[ 'core/image', {url:'image_url_here', align: 'center'}, []],
	[ 'core/heading', { content: 'Title', className: 'container' }, [] ],
	[ 'core/paragraph', { content: 'Description', className: 'container' }, [] ],
];

The concept is that we will create a parent element and a child element which will be an InnerBlock with template containing pre-defined blocks.

....
....

edit: (function( props ) {
	return el(
                'div',
                { className: props.className },
                el(
			InnerBlocks,
			{
				template: MY_TEMPLATE,
				templateLock: "all",
			}
		)
           );	
}),
save: function( props ) {
	return el(
                'div',
                { className: props.className },
                el( InnerBlocks.Content )
        ); 
},
....
....

Leave a Comment

Your email address will not be published.