Blocks: Examine source block when converted invalid block into blocks.

Previously when running "Convert to Blocks" on the invalid-block resolution dialog
we have been converting only a portion of the invalid block due to the way we examine
the `originalContent.`

Since #38923 we have had `__unstableBlockSource` available which tracks the entire
contents of the original block that failed to validate.

In this patch we're using that source information in order to split apart the invalid
block and then separately parse each of its constituent components.

The result of this change is that we're able to preserve more block content when
resolving an invalid block than we were before. For example, supposing we have a broken
container block full of valid inner blocks, we are now able to extract all of those
inner blocks and preserve them whereas before we would lose all block information and
the stack would turn into an empty classic block.

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

@@ -11,7 +11,7 @@ import { diffChars } from 'diff/lib/diff/character';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { getSaveContent } from '@wordpress/blocks';
+import { getSaveContent, serializeRawBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -54,8 +54,11 @@ function BlockCompare( {
 		return newContent.join( '' );
 	}
 
+	const rawContent = serializeRawBlock( block.__unstableBlockSource, {
+		delimiters: 'no-top-level',
+	} );
 	const converted = getConvertedContent( convertor( block ) );
-	const difference = getDifference( block.originalContent, converted );
+	const difference = getDifference( rawContent, converted );
 
 	return (
 		<div className="block-editor-block-compare__wrapper">
@@ -64,8 +67,8 @@ function BlockCompare( {
 				className="block-editor-block-compare__current"
 				action={ onKeep }
 				actionText={ __( 'Convert to HTML' ) }
-				rawContent={ block.originalContent }
-				renderedContent={ block.originalContent }
+				rawContent={ rawContent }
+				renderedContent={ rawContent }
 			/>
 
 			<BlockView

packages/block-editor/src/components/block-list/block-invalid-warning.js

@@ -4,7 +4,12 @@
 import { __, _x } from '@wordpress/i18n';
 import { Button, Modal } from '@wordpress/components';
 import { useState, useCallback, useMemo } from '@wordpress/element';
-import { getBlockType, createBlock, rawHandler } from '@wordpress/blocks';
+import {
+	getBlockType,
+	createBlock,
+	parse,
+	serializeRawBlock,
+} from '@wordpress/blocks';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 
@@ -89,16 +94,25 @@ export function BlockInvalidWarning( {
 
 const blockToClassic = ( block ) =>
 	createBlock( 'core/freeform', {
-		content: block.originalContent,
+		content: serializeRawBlock( block.__unstableBlockSource, {
+			delimiters: 'none',
+		} ),
 	} );
+
 const blockToHTML = ( block ) =>
 	createBlock( 'core/html', {
-		content: block.originalContent,
+		content: serializeRawBlock( block.__unstableBlockSource, {
+			delimiters: 'none',
+		} ),
 	} );
+
 const blockToBlocks = ( block ) =>
-	rawHandler( {
-		HTML: block.originalContent,
-	} );
+	parse(
+		serializeRawBlock( block.__unstableBlockSource, {
+			delimiters: 'no-top-level',
+		} )
+	);
+
 const recoverBlock = ( { name, attributes, innerBlocks } ) =>
 	createBlock( name, attributes, innerBlocks );
 

packages/blocks/src/api/parser/index.js

@@ -127,13 +127,13 @@ function createMissingBlockType( rawBlock ) {
 	// handler. A block node's `innerHTML` isn't enough, as that field only
 	// carries the block's own HTML and not its nested blocks.
 	const originalUndelimitedContent = serializeRawBlock( rawBlock, {
-		isCommentDelimited: false,
+		delimiters: 'none',
 	} );
 
 	// Preserve full block content for use by the unregistered type
 	// handler, block boundaries included.
 	const originalContent = serializeRawBlock( rawBlock, {
-		isCommentDelimited: true,
+		delimiters: 'all',
 	} );
 
 	return {

packages/blocks/src/api/parser/serialize-raw-block.js

@@ -3,9 +3,11 @@
  */
 import { getCommentDelimitedContent } from '../serializer';
 
+/** @typedef {'all' | 'none' | 'no-top-level'} DelimiterSet */
+
 /**
- * @typedef {Object}   Options                   Serialization options.
- * @property {boolean} [isCommentDelimited=true] Whether to output HTML comments around blocks.
+ * @typedef {Object}        Options            Serialization options.
+ * @property {DelimiterSet} [delimiters='all'] Whether to output HTML comments around blocks.
  */
 
 /** @typedef {import("./").WPRawBlock} WPRawBlock */
@@ -31,7 +33,7 @@ import { getCommentDelimitedContent } from '../serializer';
  * @return {string} An HTML string representing a block.
  */
 export function serializeRawBlock( rawBlock, options = {} ) {
-	const { isCommentDelimited = true } = options;
+	const { delimiters = 'all' } = options;
 	const {
 		blockName,
 		attrs = {},
@@ -45,13 +47,18 @@ export function serializeRawBlock( rawBlock, options = {} ) {
 			// `null` denotes a nested block, otherwise we have an HTML fragment.
 			item !== null
 				? item
-				: serializeRawBlock( innerBlocks[ childIndex++ ], options )
+				: serializeRawBlock(
+						innerBlocks[ childIndex++ ],
+						delimiters === 'no-top-level'
+							? { ...options, delimiters: 'all' }
+							: options
+				  )
 		)
 		.join( '\n' )
 		.replace( /\n+/g, '\n' )
 		.trim();
 
-	return isCommentDelimited
+	return 'all' === delimiters
 		? getCommentDelimitedContent( blockName, attrs, content )
 		: content;
 }