Fix JS-rendered blocks inside Empty Cart

assets/js/base/utils/legacy-events.js

@@ -7,7 +7,7 @@ const Event = window.Event || null;
  * @param {boolean} bubbles    Whether the event bubbles.
  * @param {boolean} cancelable Whether the event is cancelable.
  */
-const dispatchEvent = ( name, bubbles = false, cancelable = false ) => {
+export const dispatchEvent = ( name, bubbles = false, cancelable = false ) => {
 	// In IE, Event is an object and can't be instantiated with `new Event()`.
 	if ( typeof Event === 'function' ) {
 		const event = new Event( name, {

assets/js/base/utils/render-frontend.js

@@ -4,6 +4,12 @@
 import { render } from 'react-dom';
 import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
 
+// Some blocks take care of rendering their inner blocks automatically. For example,
+// the empty cart. In those cases, we don't want to trigger the render functions of
+// inner components on `DOMContentLoaded`. Instead, those wrapper blocks can trigger
+// `wc-blocks_render_blocks_frontend` to render its inner blocks.
+const selectorsToSkipOnDOMLoaded = [ '.wp-block-woocommerce-cart' ];
+
 /**
  * Renders a block component in the place of a specified set of selectors.
  *
@@ -12,18 +18,32 @@ import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundar
  * @param {string}   props.selector                CSS selector to match the elements to replace.
  * @param {Function} [props.getProps ]             Function to generate the props object for the block.
  * @param {Function} [props.getErrorBoundaryProps] Function to generate the props object for the error boundary.
+ * @param {boolean}  [props.renderOnDOMLoaded]     Whether this function was triggered by a `DOMContentLoaded` event.
  */
-export const renderFrontend = ( {
+const renderBlockFrontend = ( {
 	Block,
 	selector,
 	getProps = () => {},
 	getErrorBoundaryProps = () => {},
+	renderOnDOMLoaded = false,
 } ) => {
 	const containers = document.querySelectorAll( selector );
 
 	if ( containers.length ) {
 		// Use Array.forEach for IE11 compatibility.
 		Array.prototype.forEach.call( containers, ( el, i ) => {
+			if ( ! el.classList.contains( 'is-loading' ) ) {
+				return;
+			}
+			if ( renderOnDOMLoaded ) {
+				for ( let j = 0; j < selectorsToSkipOnDOMLoaded.length; j++ ) {
+					if (
+						el.parentNode.closest( selectorsToSkipOnDOMLoaded[ j ] )
+					) {
+						return;
+					}
+				}
+			}
 			const props = getProps( el, i );
 			const errorBoundaryProps = getErrorBoundaryProps( el, i );
 			const attributes = {
@@ -42,4 +62,19 @@ export const renderFrontend = ( {
 	}
 };
 
+/**
+ * Adds the event listeners necessary to render the block frontend.
+ *
+ * @param {Object} props Render props.
+ */
+export const renderFrontend = ( props ) => {
+	document.body.addEventListener( 'wc-blocks_render_blocks_frontend', () => {
+		renderBlockFrontend( props );
+	} );
+
+	document.addEventListener( 'DOMContentLoaded', () => {
+		renderBlockFrontend( { ...props, renderOnDOMLoaded: true } );
+	} );
+};
+
 export default renderFrontend;

assets/js/blocks/cart-checkout/cart/block.js

@@ -10,14 +10,24 @@ import {
 	ValidationContextProvider,
 	CartProvider,
 } from '@woocommerce/base-context';
-import { translateJQueryEventToNative } from '@woocommerce/base-utils';
+import {
+	dispatchEvent,
+	translateJQueryEventToNative,
+} from '@woocommerce/base-utils';
 import withScrollToTop from '@woocommerce/base-hocs/with-scroll-to-top';
 
 /**
  * Internal dependencies
  */
 import FullCart from './full-cart';
 
+const EmptyCart = ( { content } ) => {
+	useEffect( () => {
+		dispatchEvent( 'wc-blocks_render_blocks_frontend' );
+	}, [] );
+	return <RawHTML>{ content }</RawHTML>;
+};
+
 const Block = ( { emptyCart, attributes, scrollToTop } ) => {
 	const { cartItems, cartIsLoading } = useStoreCart();
 
@@ -64,7 +74,7 @@ const Block = ( { emptyCart, attributes, scrollToTop } ) => {
 	return (
 		<>
 			{ ! cartIsLoading && cartItems.length === 0 ? (
-				<RawHTML>{ emptyCart }</RawHTML>
+				<EmptyCart content={ emptyCart } />
 			) : (
 				<LoadingMask showSpinner={ true } isLoading={ cartIsLoading }>
 					<ValidationContextProvider>

assets/js/blocks/products/all-products/index.js

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { InnerBlocks } from '@wordpress/block-editor';
 import { registerBlockType } from '@wordpress/blocks';
 import { Icon, grid } from '@woocommerce/icons';
+import classNames from 'classnames';
 import '@woocommerce/atomic-blocks';
 
 /**
@@ -63,9 +64,9 @@ const blockSettings = {
 		};
 		return (
 			<div
-				className={ getBlockClassName(
-					'wc-block-all-products',
-					attributes
+				className={ classNames(
+					'is-loading',
+					getBlockClassName( 'wc-block-all-products', attributes )
 				) }
 				{ ...data }
 			>

assets/js/blocks/reviews/save.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * Internal dependencies
  */
@@ -38,7 +43,10 @@ export default ( { attributes } ) => {
 
 	return (
 		<div
-			className={ getBlockClassName( className, attributes ) }
+			className={ classNames(
+				'is-loading',
+				getBlockClassName( className, attributes )
+			) }
 			{ ...data }
 		/>
 	);