I have updated the current page template so that it is locked and uses two of custom blocks that i have created.

function.php

function my_add_template_to_posts() {
    $post_type_object = get_post_type_object( 'page' );
    $post_type_object->template = array(
          array( 'jabgutenberg/bannerimage'),
          array( 'jabgutenberg/section'),
    );
$post_type_object->template_lock = 'all'; 
}
add_action( 'init', 'my_add_template_to_posts' );

The 'Section' block allows you to add as many blocks inside, as it uses {templateLock: false}

( function( blocks, editor, components, i18n, element,title ) {

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType
    InnerBlocks = wp.editor.InnerBlocks;

registerBlockType( 'jabgutenberg/section', {
    title: i18n.__('Section'),
    icon: 'columns',
    description: i18n.__('A section.'),
    category: 'common',
    edit: function edit() {
        return el(InnerBlocks, { templateLock: false });
    },
    save: function save() {
        return el(
            'div',
            null,
            el(InnerBlocks.Content, null)
        );
    },
} );   

} )(window.wp.blocks,window.wp.editor,window.wpponents,window.wp.i18n,window.wp.element,
);

Thie issues is that everytime you add an extra block inside the 'Section' you get the error

'The content of your post doesn’t match the template assigned to your post type.'

Is there any way of stopping this without unlocking the template?

I have updated the current page template so that it is locked and uses two of custom blocks that i have created.

function.php

function my_add_template_to_posts() {
    $post_type_object = get_post_type_object( 'page' );
    $post_type_object->template = array(
          array( 'jabgutenberg/bannerimage'),
          array( 'jabgutenberg/section'),
    );
$post_type_object->template_lock = 'all'; 
}
add_action( 'init', 'my_add_template_to_posts' );

The 'Section' block allows you to add as many blocks inside, as it uses {templateLock: false}

( function( blocks, editor, components, i18n, element,title ) {

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType
    InnerBlocks = wp.editor.InnerBlocks;

registerBlockType( 'jabgutenberg/section', {
    title: i18n.__('Section'),
    icon: 'columns',
    description: i18n.__('A section.'),
    category: 'common',
    edit: function edit() {
        return el(InnerBlocks, { templateLock: false });
    },
    save: function save() {
        return el(
            'div',
            null,
            el(InnerBlocks.Content, null)
        );
    },
} );   

} )(window.wp.blocks,window.wp.editor,window.wpponents,window.wp.i18n,window.wp.element,
);

Thie issues is that everytime you add an extra block inside the 'Section' you get the error

'The content of your post doesn’t match the template assigned to your post type.'

Is there any way of stopping this without unlocking the template?

• templates
• block-editor

• 1 While I believe Gutenberg is on-topic here, you might also want to post an issue on the GitHub repo: github/WordPress/gutenberg/issues Given that it's still in development, this could be a bug. – Jacob Peattie Commented Aug 7, 2018 at 12:44

1 Answer 1

This is a known issue.

A hack would be to disable to the validation completely for the block. Chris Van Patten provided the following code example:

/**
 * WordPress dependencies
 */
import { compose } from '@wordpress/compose';
import { withDispatch } from '@wordpress/data';
import { InnerBlocks } from '@wordpress/editor';

/**
 * Container block
 *
 * @return {Object}
 */
const Editor = () => (
    <InnerBlocks templateLock={ false } />
);

// This is a hack which forces the template to appear valid.
// See https://github/WordPress/gutenberg/issues/11681
const enforceTemplateValidity = withDispatch( ( dispatch, props ) => {
    dispatch( 'core/block-editor' ).setTemplateValidity( true );
} );

export default compose(
    enforceTemplateValidity,
)( Editor );