Gutenberg: Patching isValidBlockContent to worth with innerBlocks

inner-blocks-validation.diff

diff --git a/packages/block-library/src/navigation-menu-item/save.js b/packages/block-library/src/navigation-menu-item/save.js
index 536d2f286..86b334099 100644
--- a/packages/block-library/src/navigation-menu-item/save.js
+++ b/packages/block-library/src/navigation-menu-item/save.js
@@ -5,7 +5,7 @@ import {
 	InnerBlocks,
 } from '@wordpress/block-editor';
 
-export default function save( { attributes/*, innerBlocks*/ } ) {
+export default function save( { attributes, innerBlocks } ) {
 	const { destination, nofollow, title, opensInNewTab, label } = attributes;
 	return (
 		<li>
@@ -18,15 +18,9 @@ export default function save( { attributes/*, innerBlocks*/ } ) {
 			>
 				{ label }
 			</a>
-			<ul>
+			{ ( innerBlocks.length > 0 ) && <ul>
 				<InnerBlocks.Content />
-			</ul>
-
-			{ /* This should make the HTML look the same but it invalidates the block */ }
-
-			{ /* ( innerBlocks.length > 0 ) && <ul>
-				<InnerBlocks.Content />
-			</ul> */ }
+			</ul> }
 		</li>
 	);
 }
diff --git a/packages/blocks/src/api/parser.js b/packages/blocks/src/api/parser.js
index 0e67b0219..7630cdf29 100644
--- a/packages/blocks/src/api/parser.js
+++ b/packages/blocks/src/api/parser.js
@@ -473,17 +473,29 @@ export function createBlockWithFallback( blockNode ) {
 		innerBlocks
 	);
 
+	// TODO: Move this into a helper function e.g. getOriginalContent()
+	let originalContent = '';
+	let index = 0;
+	for ( const piece of innerContent ) {
+		if ( piece === null ) {
+			originalContent += innerBlocks[ index++ ].originalContent;
+		} else {
+			originalContent += piece;
+		}
+	}
+
 	// Block validation assumes an idempotent operation from source block to serialized block
 	// provided there are no changes in attributes. The validation procedure thus compares the
 	// provided source value with the serialized output before there are any modifications to
 	// the block. When both match, the block is marked as valid.
 	if ( ! isFallbackBlock ) {
-		block.isValid = isValidBlockContent( blockType, block.attributes, innerHTML );
+		block.isValid = isValidBlockContent( blockType, attributes, originalContent, innerBlocks );
 	}
 
 	// Preserve original content for future use in case the block is parsed
 	// as invalid, or future serialization attempt results in an error.
-	block.originalContent = block.originalContent || innerHTML;
+	// TODO: Really unsure about this! Where else is this attribute used? Does changing this cause regressions?
+	block.originalContent = originalContent;
 
 	block = getMigratedBlock( block, attributes );
 
diff --git a/packages/blocks/src/api/validation.js b/packages/blocks/src/api/validation.js
index 444830c47..80536fa8e 100644
--- a/packages/blocks/src/api/validation.js
+++ b/packages/blocks/src/api/validation.js
@@ -497,13 +497,12 @@ export const isEqualTokensOfType = {
  * @return {Object} Next non-whitespace token.
  */
 export function getNextNonWhitespaceToken( tokens ) {
+	// TODO: Rename this function to something like getNextNonWhitespaceNonCommentToken() (maybe look at the HTML spec to see what they call these kinds of tokens)
 	let token;
 	while ( ( token = tokens.shift() ) ) {
-		if ( token.type !== 'Chars' ) {
-			return token;
-		}
-
-		if ( ! REGEXP_ONLY_WHITESPACE.test( token.chars ) ) {
+		const isWhitespace = token.type === 'Chars' && REGEXP_ONLY_WHITESPACE.test( token.chars );
+		const isComment = token.type === 'Comment';
+		if ( ! isWhitespace && ! isComment ) {
 			return token;
 		}
 	}
@@ -627,11 +626,16 @@ export function isEquivalentHTML( actual, expected ) {
  *
  * @return {boolean} Whether block is valid.
  */
-export function isValidBlockContent( blockTypeOrName, attributes, originalBlockContent ) {
+export function isValidBlockContent( blockTypeOrName, attributes, originalBlockContent, innerBlocks ) {
+	// TODO:
+	// - Make signature of this function isValidBlockContent( block, originalBlockContent )
+	// - Ensure backwards compatibiltiy
+	// - Call deprecate() when function is called in the old way
+
 	const blockType = normalizeBlockType( blockTypeOrName );
 	let generatedBlockContent;
 	try {
-		generatedBlockContent = getSaveContent( blockType, attributes );
+		generatedBlockContent = getSaveContent( blockType, attributes, innerBlocks );
 	} catch ( error ) {
 		log.error( 'Block validation failed because an error occurred while generating block content:\n\n%s', error.toString() );
 		return false;