Product template not updating in the UI when it is changed (#48288)

* Fix Product template not updating in the UI when it is changed

* Add changelog file

packages/js/product-editor/changelog/fix-48237

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix Product template not updating in the UI when it is changed

packages/js/product-editor/src/components/block-editor/block-editor.tsx

@@ -242,19 +242,36 @@ export function BlockEditor( {
 		( postType !== 'product_variation' && ! productTemplate ) ||
 		productId === -1;
 
-	useLayoutEffect( () => {
+	const productFormTemplate = useMemo(
-		if ( isEditorLoading ) {
+		function pickAndParseTheProductFormTemplate() {
-			return;
+			if (
+				! isProductEditorTemplateSystemEnabled ||
+				! selectedProductFormId
+			) {
+				return undefined;
 			}
 
-		// PFT: pick and parse the product form template, if it exists.
 			const productFormPost = productForms.find(
 				( form ) => form.id === selectedProductFormId
 			);
 
-		let productFormTemplate;
+			if ( productFormPost ) {
-		if ( isProductEditorTemplateSystemEnabled && productFormPost ) {
+				return parse( productFormPost.content.raw );
-			productFormTemplate = parse( productFormPost.content.raw );
+			}
+
+			return undefined;
+		},
+		[
+			isProductEditorTemplateSystemEnabled,
+			productForms,
+			selectedProductFormId,
+		]
+	);
+
+	useLayoutEffect(
+		function setupEditor() {
+			if ( isEditorLoading ) {
+				return;
 			}
 
 			const blockInstances = synchronizeBlocksWithTemplate(
@@ -275,17 +292,22 @@ export function BlockEditor( {
 				productTemplate,
 			} as Partial< ProductEditorSettings > );
 
-		setIsEditorLoading( isEditorLoading );
+			// We don't need to include onChange in the dependencies, since we get new
-
+			// instances of it on every render, which would cause an infinite loop.
-		// We don't need to include onChange or updateEditorSettings in the dependencies,
-		// since we get new instances of them on every render, which would cause an infinite loop.
-		//
-		// We include productId in the dependencies to make sure that the effect is run when the
-		// product is changed, since we need to synchronize the blocks with the template and update
-		// the blocks by calling onChange.
-		//
 			// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [ isEditorLoading, productId, productForms, selectedProductFormId ] );
+		},
+		[
+			isEditorLoading,
+			layoutTemplate,
+			settings,
+			productTemplate,
+			productFormTemplate,
+		]
+	);
+
+	useEffect( () => {
+		setIsEditorLoading( isEditorLoading );
+	}, [ isEditorLoading ] );
 
 	// Check if the Modal editor is open from the store.
 	const isModalEditorOpen = useSelect( ( selectCore ) => {

plugins/woocommerce/changelog/fix-48237

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix edit variable product test