Views: 2

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 )
        );
},
....
....