Checkout i2: Handle text nodes in inner block rendering (https://github.com/woocommerce/woocommerce-blocks/pull/4822)

* Handle text nodes

* Tidy and add inline doc

plugins/woocommerce-blocks/assets/js/atomic/utils/render-parent-block.tsx

@@ -108,7 +108,7 @@ const renderInnerBlocks = ( {
 	// Wrapper for inner components.
 	blockWrapper?: React.ElementType;
 	// Elements from the DOM being converted to components.
-	children: HTMLCollection;
+	children: HTMLCollection | NodeList;
 	// Depth within the DOM hierarchy.
 	depth?: number;
 } ): ( JSX.Element | null )[] | null => {
@@ -133,28 +133,42 @@ const renderInnerBlocks = ( {
 		/**
 		 * If the component cannot be found, or blockName is missing, return the original element. This also ensures
 		 * that children within the element are processed also, since it may be an element containing block markup.
+		 *
+		 * Note we use childNodes rather than children so that text nodes are also rendered.
 		 */
 		if ( ! InnerBlockComponent ) {
-			const parsedElement = parse( element.outerHTML );
+			const parsedElement = parse(
+				element?.outerHTML || element?.textContent || ''
+			);
 
-			if ( isValidElement( parsedElement ) ) {
-				const elementChildren = renderInnerBlocks( {
+			// Returns text nodes without manipulation.
+			if ( typeof parsedElement === 'string' && !! parsedElement ) {
+				return parsedElement;
+			}
+
+			// Do not render invalid elements.
+			if ( ! isValidElement( parsedElement ) ) {
+				return null;
+			}
+
+			const renderedChildren = element.childNodes.length
+				? renderInnerBlocks( {
 						block,
 						blockMap,
-					children: element.children || [],
+						children: element.childNodes,
 						depth: depth + 1,
 						blockWrapper,
-				} );
-				return elementChildren
+				  } )
+				: undefined;
+
+			return renderedChildren
 				? cloneElement(
 						parsedElement,
 						componentProps,
-							elementChildren
+						renderedChildren
 				  )
 				: cloneElement( parsedElement, componentProps );
 		}
-			return null;
-		}
 
 		// This will wrap inner blocks with the provided wrapper. If no wrapper is provided, we default to Fragment.
 		const InnerBlockComponentWrapper = blockWrapper