Update/editor template validation

packages/block-editor/src/components/provider/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useLayoutEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,13 +15,22 @@ import { BlockRefsProvider } from './block-refs-provider';
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 
 function BlockEditorProvider( props ) {
-	const { children, settings } = props;
+	const { children, settings, value: controlledBlocks } = props;
+
+	const { updateSettings, validateBlocksToTemplate } = useDispatch(
+		blockEditorStore
+	);
 
-	const { updateSettings } = useDispatch( blockEditorStore );
 	useEffect( () => {
 		updateSettings( settings );
 	}, [ settings ] );
 
+	useLayoutEffect( () => {
+		if ( controlledBlocks ) {
+			validateBlocksToTemplate( controlledBlocks );
+		}
+	}, [ settings ] );
+
 	// Syncs the entity provider with changes in the block-editor store.
 	useBlockSync( props );
 

packages/block-editor/src/store/actions.js

@@ -55,7 +55,6 @@ const ensureDefaultBlock = () => ( { select, dispatch } ) => {
  */
 export const resetBlocks = ( blocks ) => ( { dispatch } ) => {
 	dispatch( { type: 'RESET_BLOCKS', blocks } );
-	dispatch( validateBlocksToTemplate( blocks ) );
 };
 
 /**
@@ -72,13 +71,14 @@ export const validateBlocksToTemplate = ( blocks ) => ( {
 } ) => {
 	const template = select.getTemplate();
 	const templateLock = select.getTemplateLock();
+	const getBlockListSettings = select.getBlockListSettings;
 
 	// Unlocked templates are considered always valid because they act
 	// as default values only.
 	const isBlocksValidToTemplate =
 		! template ||
 		templateLock !== 'all' ||
-		doBlocksMatchTemplate( blocks, template );
+		doBlocksMatchTemplate( blocks, template, getBlockListSettings );
 
 	// Update if validity has changed.
 	const isValidTemplate = select.isValidTemplate();

packages/blocks/README.md

@@ -235,6 +235,7 @@ _Parameters_
 
 -   _blocks_ `Array`: Block list.
 -   _template_ `Array`: Block template.
+-   _getBlockListSettings_ `Function`: Gets block list settings.
 
 _Returns_
 

packages/blocks/src/api/templates.js

@@ -18,19 +18,32 @@ import { getBlockType } from './registration';
 /**
  * Checks whether a list of blocks matches a template by comparing the block names.
  *
- * @param {Array} blocks   Block list.
- * @param {Array} template Block template.
+ * @param {Array}    blocks               Block list.
+ * @param {Array}    template             Block template.
+ * @param {Function} getBlockListSettings Gets block list settings.
  *
  * @return {boolean} Whether the list of blocks matches a templates.
  */
-export function doBlocksMatchTemplate( blocks = [], template = [] ) {
+export function doBlocksMatchTemplate(
+	blocks = [],
+	template = [],
+	getBlockListSettings = () => ( {} )
+) {
 	return (
 		blocks.length === template.length &&
 		every( template, ( [ name, , innerBlocksTemplate ], index ) => {
 			const block = blocks[ index ];
+			const { clientId, innerBlocks } = block;
+			const { templateLock = null } =
+				getBlockListSettings( clientId ) ?? {};
 			return (
 				name === block.name &&
-				doBlocksMatchTemplate( block.innerBlocks, innerBlocksTemplate )
+				( templateLock === false ||
+					doBlocksMatchTemplate(
+						innerBlocks,
+						innerBlocksTemplate,
+						getBlockListSettings
+					) )
 			);
 		} )
 	);