From 30c449e7497f21ed7c25cb44ce1017f9a5e2e56b Mon Sep 17 00:00:00 2001
From: Maikel Perez <maikel.perez@automattic.com>
Date: Tue, 21 May 2024 16:02:02 -0400
Subject: [PATCH] Fix layout template request not being executed after
 registering a new entity with the new version of GB installed (#47678)

* Fix layout template request not being executed after registering a new entity with the new version of GB installed

* Add changelog file
---
 .../changelog/fix-layout-template-request     |  4 +++
 .../use-layout-template.ts                    | 26 +++++++++++--------
 2 files changed, 19 insertions(+), 11 deletions(-)
 create mode 100644 packages/js/block-templates/changelog/fix-layout-template-request

diff --git a/packages/js/block-templates/changelog/fix-layout-template-request b/packages/js/block-templates/changelog/fix-layout-template-request
new file mode 100644
index 00000000000..57f47afff7d
--- /dev/null
+++ b/packages/js/block-templates/changelog/fix-layout-template-request
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Fix layout template request not being executed
diff --git a/packages/js/block-templates/src/hooks/use-layout-template/use-layout-template.ts b/packages/js/block-templates/src/hooks/use-layout-template/use-layout-template.ts
index 90be62181b0..b9aee63d4a7 100644
--- a/packages/js/block-templates/src/hooks/use-layout-template/use-layout-template.ts
+++ b/packages/js/block-templates/src/hooks/use-layout-template/use-layout-template.ts
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useEffect } from 'react';
+import { useEffect, useState } from '@wordpress/element';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore No types for this exist yet, natively (not until 7.0.0).
 // Including `@types/wordpress__data` as a devDependency causes build issues,
@@ -13,19 +13,21 @@ import { useEntityRecord } from '@wordpress/core-data';
 // Including `@types/wordpress__data` as a devDependency causes build issues,
 // so just going type-free for now.
 // eslint-disable-next-line @woocommerce/dependency-group
-import { useDispatch, useSelect, select as WPSelect } from '@wordpress/data';
+import { dispatch, select } from '@wordpress/data';
 
 export const useLayoutTemplate = ( layoutTemplateId: string | undefined ) => {
-	const layoutTemplateEntity = useSelect( ( select: typeof WPSelect ) => {
-		const { getEntityConfig } = select( 'core' );
-		return getEntityConfig( 'root', 'wcLayoutTemplate' );
-	} );
-
-	const { addEntities } = useDispatch( 'core' );
+	const [ isEntityRegistered, setIsEntityRegistered ] = useState( false );
 
 	useEffect( () => {
+		if ( ! layoutTemplateId ) return;
+
+		const layoutTemplateEntity = select( 'core' ).getEntityConfig(
+			'root',
+			'wcLayoutTemplate'
+		);
+
 		if ( ! layoutTemplateEntity ) {
-			addEntities( [
+			dispatch( 'core' ).addEntities( [
 				{
 					kind: 'root',
 					name: 'wcLayoutTemplate',
@@ -34,7 +36,9 @@ export const useLayoutTemplate = ( layoutTemplateId: string | undefined ) => {
 				},
 			] );
 		}
-	}, [ addEntities, layoutTemplateEntity ] );
+
+		setIsEntityRegistered( true );
+	}, [ layoutTemplateId ] );
 
 	const { record: layoutTemplate, isResolving } = useEntityRecord(
 		'root',
@@ -49,7 +53,7 @@ export const useLayoutTemplate = ( layoutTemplateId: string | undefined ) => {
 		// Note: Until we are using @woocommerce/core-data 6.24.0 (Gutenberg 17.2),
 		// the REST API requests will still be triggered even when the query is disabled due to a regression.
 		// See: https://github.com/WordPress/gutenberg/pull/56108
-		{ enabled: !! layoutTemplateId }
+		{ enabled: isEntityRegistered }
 	);
 
 	return { layoutTemplate, isResolving };