Gutenberg Editor – Template Doesn’t Match Error

by

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.wp.components,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.’

enter image description here

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

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.com/WordPress/gutenberg/issues/11681
const enforceTemplateValidity = withDispatch( ( dispatch, props ) => {
    dispatch( 'core/block-editor' ).setTemplateValidity( true );
} );

export default compose(
    enforceTemplateValidity,
)( Editor );

Leave a Comment