Blocks: optimise parser by batch parsing HTML to DOM

packages/blocks/README.md

@@ -97,6 +97,7 @@ _Parameters_
 -   _blockTypeOrName_ `string|Object`: Block type or name.
 -   _innerHTML_ `string|Node`: Raw block content.
 -   _attributes_ `?Object`: Known block attributes (from delimiters).
+-   _innerDom_ `?Node`: Raw block content parsed into DOM.
 
 _Returns_
 

packages/blocks/src/api/parser/get-block-attributes.js

@@ -286,15 +286,16 @@ export function parseWithAttributeSchema( innerHTML, attributeSchema ) {
  * @param {string|Object} blockTypeOrName Block type or name.
  * @param {string|Node}   innerHTML       Raw block content.
  * @param {?Object}       attributes      Known block attributes (from delimiters).
- *
+ * @param {?Node}         innerDom        Raw block content parsed into DOM.
  * @return {Object} All block attributes.
  */
 export function getBlockAttributes(
 	blockTypeOrName,
 	innerHTML,
-	attributes = {}
+	attributes = {},
+	innerDom
 ) {
-	const doc = parseHtml( innerHTML );
+	const doc = innerDom ? innerDom : parseHtml( innerHTML );
 	const blockType = normalizeBlockType( blockTypeOrName );
 
 	const blockAttributes = Object.fromEntries(

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

@@ -234,7 +234,8 @@ export function parseRawBlock( rawBlock, options ) {
 		getBlockAttributes(
 			blockType,
 			normalizedBlock.innerHTML,
-			normalizedBlock.attrs
+			normalizedBlock.attrs,
+			normalizedBlock.innerDom
 		),
 		parsedInnerBlocks
 	);
@@ -308,7 +309,43 @@ export function parseRawBlock( rawBlock, options ) {
  * @return {Array} Block list.
  */
 export default function parse( content, options ) {
-	return grammarParse( content ).reduce( ( accumulator, rawBlock ) => {
+	const rawBlocks = grammarParse( content ).filter(
+		// Down the road, we trim content, so let's ignore empty sections
+		// between blocks early.
+		( rawBlock ) => rawBlock.innerHTML.trim() || rawBlock.blockName
+	);
+
+	let allInnerHtml = '';
+
+	function addInnerHtml( _rawBlocks ) {
+		for ( const rawBlock of _rawBlocks ) {
+			allInnerHtml += '<div>' + rawBlock.innerHTML + `</div>`;
+			if ( rawBlock.innerBlocks.length ) {
+				addInnerHtml( rawBlock.innerBlocks );
+			}
+		}
+	}
+
+	addInnerHtml( rawBlocks );
+
+	const doc = document.implementation.createHTMLDocument( '' );
+
+	doc.body.innerHTML = allInnerHtml;
+
+	allInnerHtml = Array.from( doc.body.children );
+
+	function addInnerDom( _rawBlocks ) {
+		for ( const rawBlock of _rawBlocks ) {
+			rawBlock.innerDom = allInnerHtml.shift();
+			if ( rawBlock.innerBlocks.length ) {
+				addInnerDom( rawBlock.innerBlocks );
+			}
+		}
+	}
+
+	addInnerDom( rawBlocks );
+
+	return rawBlocks.reduce( ( accumulator, rawBlock ) => {
 		const block = parseRawBlock( rawBlock, options );
 		if ( block ) {
 			accumulator.push( block );