Improve user experience with blocks editor when a block is not registered

packages/blocks/src/api/templates.js

@@ -108,14 +108,25 @@ export function synchronizeBlocksWithTemplate( blocks = [], template ) {
 				attributes
 			);
 
-			const [
+			let [
 				blockName,
 				blockAttributes,
 			] = convertLegacyBlockNameAndAttributes(
 				name,
 				normalizedAttributes
 			);
 
+			// If a Block is undefined at this point, use the core/missing block as
+			// a placeholder for a better user experience.
+			if ( undefined === getBlockType( blockName ) ) {
+				blockAttributes = {
+					originalName: name,
+					originalContent: '',
+					originalUndelimitedContent: '',
+				};
+				blockName = 'core/missing';
+			}
+
 			return createBlock(
 				blockName,
 				blockAttributes,

packages/blocks/src/api/test/templates.js

@@ -43,6 +43,13 @@ describe( 'templates', () => {
 			category: 'text',
 			title: 'test block',
 		} );
+
+		registerBlockType( 'core/missing', {
+			attributes: {},
+			save: noop,
+			category: 'text',
+			title: 'missing block',
+		} );
 	} );
 
 	describe( 'doBlocksMatchTemplate', () => {
@@ -201,5 +208,17 @@ describe( 'templates', () => {
 				synchronizeBlocksWithTemplate( blockList, template )
 			).toEqual( [ block1 ] );
 		} );
+
+		it( 'should replace unregistered blocks from template with core/missing block', () => {
+			const template = [
+				[ 'core/test-block' ],
+				[ 'core/test-block-2' ],
+				[ 'core/test-faker' ],
+			];
+
+			expect(
+				synchronizeBlocksWithTemplate( [], template )[ 2 ].name
+			).toEqual( 'core/missing' );
+		} );
 	} );
 } );