From b78ab3d0cb3aff5bcdea50dac8731873394d7ec4 Mon Sep 17 00:00:00 2001
From: Alexandre Lara <allexandrelara@gmail.com>
Date: Thu, 8 Jun 2023 14:23:37 -0300
Subject: [PATCH 1/2] Fix Classic Template block error on clearing
 customizations on template

---
 assets/js/blocks/classic-template/index.tsx | 69 ++++++++++++++++++---
 1 file changed, 60 insertions(+), 9 deletions(-)

diff --git a/assets/js/blocks/classic-template/index.tsx b/assets/js/blocks/classic-template/index.tsx
index 1ee8151c836..705bc91cb21 100644
--- a/assets/js/blocks/classic-template/index.tsx
+++ b/assets/js/blocks/classic-template/index.tsx
@@ -7,6 +7,7 @@ import {
 	getBlockType,
 	registerBlockType,
 	unregisterBlockType,
+	parse,
 } from '@wordpress/blocks';
 import type { BlockEditProps } from '@wordpress/blocks';
 import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
@@ -18,10 +19,17 @@ import {
 import { Button, Placeholder, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { box, Icon } from '@wordpress/icons';
-import { useDispatch, subscribe, useSelect, select } from '@wordpress/data';
+import {
+	useDispatch,
+	subscribe,
+	useSelect,
+	select,
+	dispatch,
+} from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
 import { useEntityRecord } from '@wordpress/core-data';
+import { debounce } from '@woocommerce/base-utils';
 
 /**
  * Internal dependencies
@@ -333,6 +341,42 @@ const registerClassicTemplateBlock = ( {
 	} );
 };
 
+/**
+ * Attempts to recover the Classic Template block if it fails to render on the Single Product template
+ * due to the user resetting customizations without refreshing the page.
+ *
+ * When the Classic Template block fails to render, it is replaced by the 'core/missing' block, which
+ * displays an error message stating that the WooCommerce Classic template block is unsupported.
+ *
+ * This function replaces the 'core/missing' block with the original Classic Template block that failed
+ * to render, allowing the block to be displayed correctly.
+ *
+ */
+const tryToRecoverClassicTemplateBlockWhenItFailsToRender = debounce( () => {
+	const blocks = select( 'core/block-editor' ).getBlocks();
+	const blocksIncludingInnerBlocks = blocks.flatMap( ( block ) => [
+		block,
+		...block.innerBlocks,
+	] );
+	const classicTemplateThatFailedToRender = blocksIncludingInnerBlocks.find(
+		( block ) =>
+			block.name === 'core/missing' &&
+			block.attributes.originalName === BLOCK_SLUG
+	);
+
+	if ( classicTemplateThatFailedToRender ) {
+		const blockToReplaceClassicTemplateBlockThatFailedToRender = parse(
+			classicTemplateThatFailedToRender.attributes.originalContent
+		);
+		if ( blockToReplaceClassicTemplateBlockThatFailedToRender ) {
+			dispatch( 'core/block-editor' ).replaceBlock(
+				classicTemplateThatFailedToRender.clientId,
+				blockToReplaceClassicTemplateBlockThatFailedToRender
+			);
+		}
+	}
+}, 100 );
+
 // @todo Refactor when there will be possible to show a block according on a template/post with a Gutenberg API. https://github.com/WordPress/gutenberg/pull/41718
 
 let currentTemplateId: string | undefined;
@@ -341,11 +385,6 @@ subscribe( () => {
 	const previousTemplateId = currentTemplateId;
 	const store = select( 'core/edit-site' );
 	currentTemplateId = store?.getEditedPostId() as string | undefined;
-
-	if ( previousTemplateId === currentTemplateId ) {
-		return;
-	}
-
 	const parsedTemplate = currentTemplateId?.split( '//' )[ 1 ];
 
 	if ( parsedTemplate === null || parsedTemplate === undefined ) {
@@ -353,9 +392,21 @@ subscribe( () => {
 	}
 
 	const block = getBlockType( BLOCK_SLUG );
+	const isBlockRegistered = Boolean( block );
+
+	if (
+		isBlockRegistered &&
+		hasTemplateSupportForClassicTemplateBlock( parsedTemplate, TEMPLATES )
+	) {
+		tryToRecoverClassicTemplateBlockWhenItFailsToRender();
+	}
+
+	if ( previousTemplateId === currentTemplateId ) {
+		return;
+	}
 
 	if (
-		block !== undefined &&
+		isBlockRegistered &&
 		( ! hasTemplateSupportForClassicTemplateBlock(
 			parsedTemplate,
 			TEMPLATES
@@ -371,7 +422,7 @@ subscribe( () => {
 	}
 
 	if (
-		block === undefined &&
+		! isBlockRegistered &&
 		hasTemplateSupportForClassicTemplateBlock( parsedTemplate, TEMPLATES )
 	) {
 		registerClassicTemplateBlock( {
@@ -379,4 +430,4 @@ subscribe( () => {
 			inserter: true,
 		} );
 	}
-} );
+}, 'core/blocks-editor' );

From c220f3487e6dc2358726d2d43f509ab775ce466b Mon Sep 17 00:00:00 2001
From: Alexandre Lara <allexandrelara@gmail.com>
Date: Mon, 12 Jun 2023 13:37:11 -0300
Subject: [PATCH 2/2] Add link to issue in JS Doc

---
 assets/js/blocks/classic-template/index.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/assets/js/blocks/classic-template/index.tsx b/assets/js/blocks/classic-template/index.tsx
index 705bc91cb21..631eea62df7 100644
--- a/assets/js/blocks/classic-template/index.tsx
+++ b/assets/js/blocks/classic-template/index.tsx
@@ -351,6 +351,8 @@ const registerClassicTemplateBlock = ( {
  * This function replaces the 'core/missing' block with the original Classic Template block that failed
  * to render, allowing the block to be displayed correctly.
  *
+ * @see {@link https://github.com/woocommerce/woocommerce-blocks/issues/9637|Issue: Block error is displayed on clearing customizations for Woo Templates}
+ *
  */
 const tryToRecoverClassicTemplateBlockWhenItFailsToRender = debounce( () => {
 	const blocks = select( 'core/block-editor' ).getBlocks();