Inner Blocks: Keep inner blocks in sync with template

editor/components/inner-blocks/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEqual, pick } from 'lodash';
+import { isEqual, pick, map } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -31,15 +31,37 @@ class InnerBlocks extends Component {
 		this.updateNestedSettings( {
 			supportedBlocks: this.props.allowedBlocks,
 		} );
-		this.insertTemplateBlocks( this.props.template );
+
+		this.synchronizeBlocksWithTemplate();
+	}
+
+	componentDidUpdate( prevProps ) {
+		const { template, block } = this.props;
+
+		const hasTemplateChanged = ! isEqual( template, prevProps.template );
+		const isTemplateInnerBlockMismatch = (
+			template &&
+			block.innerBlocks.length !== template.length
+		);
+
+		if ( hasTemplateChanged || isTemplateInnerBlockMismatch ) {
+			this.synchronizeBlocksWithTemplate();
+		}
 	}
 
-	insertTemplateBlocks( template ) {
-		const { block, insertBlocks } = this.props;
-		if ( template && ! block.innerBlocks.length ) {
-			// synchronizeBlocksWithTemplate( [], template ) parses the template structure,
-			// and returns/creates the necessary blocks to represent it.
-			insertBlocks( synchronizeBlocksWithTemplate( [], template ) );
+	/**
+	 * Called on mount or when a mismatch exists between the templates and
+	 * inner blocks, synchronizes inner blocks with the template, replacing
+	 * current blocks.
+	 */
+	synchronizeBlocksWithTemplate() {
+		const { template, block, replaceInnerBlocks } = this.props;
+		const { innerBlocks } = block;
+
+		// Synchronize with templates. If the next set differs, replace.
+		const nextBlocks = synchronizeBlocksWithTemplate( innerBlocks, template );
+		if ( ! isEqual( nextBlocks, innerBlocks	) ) {
+			replaceInnerBlocks( nextBlocks );
 		}
 	}
 
@@ -94,12 +116,16 @@ InnerBlocks = compose( [
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {
-		const { insertBlocks, updateBlockListSettings } = dispatch( 'core/editor' );
-		const { uid } = ownProps;
+		const {
+			replaceBlocks,
+			updateBlockListSettings,
+		} = dispatch( 'core/editor' );
+		const { block, uid } = ownProps;
 
 		return {
-			insertBlocks( blocks ) {
-				dispatch( insertBlocks( blocks, undefined, uid ) );
+			replaceInnerBlocks( blocks ) {
+				const uids = map( block.innerBlocks, 'uid' );
+				replaceBlocks( uids, blocks );
 			},
 			updateNestedSettings( settings ) {
 				dispatch( updateBlockListSettings( uid, settings ) );