Core Data: Move the template lookup to core-data selectors/resolvers (#…

…55883)

docs/reference-guides/data/data-core.md

@@ -150,6 +150,19 @@ _Returns_
 
 -   `undefined< 'edit' >`: Current user object.
 
+### getDefaultTemplateId
+
+Returns the default template use to render a given query.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+-   _query_ `TemplateQuery`: Query.
+
+_Returns_
+
+-   `string`: The default template id for the given query.
+
 ### getEditedEntityRecord
 
 Returns the specified entity record, merged with its edits.
@@ -648,6 +661,19 @@ _Returns_
 
 -   `Object`: Action object.
 
+### receiveDefaultTemplateId
+
+Returns an action object used to set the template for a given query.
+
+_Parameters_
+
+-   _query_ `Object`: The lookup query.
+-   _templateId_ `string`: The resolved template id.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### receiveEntityRecords
 
 Returns an action object used in signalling that entity records have been received.

packages/core-data/README.md

@@ -205,6 +205,19 @@ _Returns_
 
 -   `Object`: Action object.
 
+### receiveDefaultTemplateId
+
+Returns an action object used to set the template for a given query.
+
+_Parameters_
+
+-   _query_ `Object`: The lookup query.
+-   _templateId_ `string`: The resolved template id.
+
+_Returns_
+
+-   `Object`: Action object.
+
 ### receiveEntityRecords
 
 Returns an action object used in signalling that entity records have been received.
@@ -444,6 +457,19 @@ _Returns_
 
 -   `undefined< 'edit' >`: Current user object.
 
+### getDefaultTemplateId
+
+Returns the default template use to render a given query.
+
+_Parameters_
+
+-   _state_ `State`: Data state.
+-   _query_ `TemplateQuery`: Query.
+
+_Returns_
+
+-   `string`: The default template id for the given query.
+
 ### getEditedEntityRecord
 
 Returns the specified entity record, merged with its edits.

packages/core-data/src/actions.js

@@ -908,3 +908,19 @@ export function receiveNavigationFallbackId( fallbackId ) {
 		fallbackId,
 	};
 }
+
+/**
+ * Returns an action object used to set the template for a given query.
+ *
+ * @param {Object} query      The lookup query.
+ * @param {string} templateId The resolved template id.
+ *
+ * @return {Object} Action object.
+ */
+export function receiveDefaultTemplateId( query, templateId ) {
+	return {
+		type: 'RECEIVE_DEFAULT_TEMPLATE',
+		query,
+		templateId,
+	};
+}

packages/core-data/src/reducer.js

@@ -572,6 +572,26 @@ export function themeGlobalStyleRevisions( state = {}, action ) {
 	return state;
 }
 
+/**
+ * Reducer managing the template lookup per query.
+ *
+ * @param {Record<string, string>} state  Current state.
+ * @param {Object}                 action Dispatched action.
+ *
+ * @return {Record<string, string>} Updated state.
+ */
+export function defaultTemplates( state = {}, action ) {
+	switch ( action.type ) {
+		case 'RECEIVE_DEFAULT_TEMPLATE':
+			return {
+				...state,
+				[ JSON.stringify( action.query ) ]: action.templateId,
+			};
+	}
+
+	return state;
+}
+
 export default combineReducers( {
 	terms,
 	users,
@@ -592,4 +612,5 @@ export default combineReducers( {
 	blockPatternCategories,
 	userPatternCategories,
 	navigationFallbackId,
+	defaultTemplates,
 } );

packages/core-data/src/resolvers.js

@@ -707,3 +707,14 @@ export const getNavigationFallbackId =
 			] );
 		}
 	};
+
+export const getDefaultTemplateId =
+	( query ) =>
+	async ( { dispatch } ) => {
+		const template = await apiFetch( {
+			path: addQueryArgs( '/wp/v2/templates/lookup', query ),
+		} );
+		if ( template ) {
+			dispatch.receiveDefaultTemplateId( query, template.id );
+		}
+	};

packages/core-data/src/selectors.ts

@@ -46,6 +46,7 @@ export interface State {
 	users: UserState;
 	navigationFallbackId: EntityRecordKey;
 	userPatternCategories: Array< UserPatternCategory >;
+	defaultTemplates: Record< string, string >;
 }
 
 type EntityRecordKey = string | number;
@@ -81,6 +82,12 @@ interface UserState {
 	byId: Record< EntityRecordKey, ET.User< 'edit' > >;
 }
 
+type TemplateQuery = {
+	slug?: string;
+	is_custom?: boolean;
+	ignore_empty?: boolean;
+};
+
 export interface UserPatternCategory {
 	id: number;
 	name: string;
@@ -1351,3 +1358,18 @@ export function getCurrentThemeGlobalStylesRevisions(
 
 	return state.themeGlobalStyleRevisions[ currentGlobalStylesId ];
 }
+
+/**
+ * Returns the default template use to render a given query.
+ *
+ * @param state Data state.
+ * @param query Query.
+ *
+ * @return The default template id for the given query.
+ */
+export function getDefaultTemplateId(
+	state: State,
+	query: TemplateQuery
+): string {
+	return state.defaultTemplates[ JSON.stringify( query ) ];
+}

packages/edit-site/src/components/start-template-options/index.js

@@ -3,7 +3,7 @@
  */
 import { Modal, Flex, FlexItem, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import {
 	__experimentalBlockPatternsList as BlockPatternsList,
 	store as blockEditorStore,
@@ -13,8 +13,6 @@ import { useAsyncList } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { parse } from '@wordpress/blocks';
 import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -23,18 +21,22 @@ import { store as editSiteStore } from '../../store';
 import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 function useFallbackTemplateContent( slug, isCustom = false ) {
-	const [ templateContent, setTemplateContent ] = useState( '' );
-
-	useEffect( () => {
-		apiFetch( {
-			path: addQueryArgs( '/wp/v2/templates/lookup', {
+	return useSelect(
+		( select ) => {
+			const { getEntityRecord, getDefaultTemplateId } =
+				select( coreStore );
+			const templateId = getDefaultTemplateId( {
 				slug,
 				is_custom: isCustom,
 				ignore_empty: true,
-			} ),
-		} ).then( ( { content } ) => setTemplateContent( content.raw ) );
-	}, [ isCustom, slug ] );
-	return templateContent;
+			} );
+			return templateId
+				? getEntityRecord( 'postType', TEMPLATE_POST_TYPE, templateId )
+						?.content?.raw
+				: undefined;
+		},
+		[ slug, isCustom ]
+	);
 }
 
 function useStartPatterns( fallbackContent ) {

packages/edit-site/src/store/actions.js

@@ -266,12 +266,22 @@ export const setPage =
 	( page ) =>
 	async ( { dispatch, registry } ) => {
 		let template;
-		const getDefaultTemplate = async ( slug ) =>
-			apiFetch( {
-				path: addQueryArgs( '/wp/v2/templates/lookup', {
+		const getDefaultTemplate = async ( slug ) => {
+			const templateId = await registry
+				.resolveSelect( coreStore )
+				.getDefaultTemplateId( {
 					slug: `page-${ slug }`,
-				} ),
-			} );
+				} );
+			return templateId
+				? await registry
+						.resolveSelect( coreStore )
+						.getEntityRecord(
+							'postType',
+							TEMPLATE_POST_TYPE,
+							templateId
+						)
+				: undefined;
+		};
 
 		if ( page.path ) {
 			template = await registry