Extract selectors from useResolveEditedEntity hook (#67031)

Co-authored-by: youknowriad <[email protected]>
Co-authored-by: jsnajdr <[email protected]>

packages/core-data/src/private-selectors.ts

@@ -6,8 +6,9 @@ import { createSelector, createRegistrySelector } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import type { State } from './selectors';
+import { getDefaultTemplateId, getEntityRecord, type State } from './selectors';
 import { STORE_NAME } from './name';
+import { unlock } from './lock-unlock';
 
 type EntityRecordKey = string | number;
 
@@ -105,3 +106,150 @@ export function getEntityRecordPermissions(
 export function getRegisteredPostMeta( state: State, postType: string ) {
 	return state.registeredPostMeta?.[ postType ] ?? {};
 }
+
+function normalizePageId( value: number | string | undefined ): string | null {
+	if ( ! value || ! [ 'number', 'string' ].includes( typeof value ) ) {
+		return null;
+	}
+
+	// We also need to check if it's not zero (`'0'`).
+	if ( Number( value ) === 0 ) {
+		return null;
+	}
+
+	return value.toString();
+}
+
+interface SiteData {
+	show_on_front?: string;
+	page_on_front?: string | number;
+	page_for_posts?: string | number;
+}
+
+export const getHomePage = createRegistrySelector( ( select ) =>
+	createSelector(
+		() => {
+			const siteData = select( STORE_NAME ).getEntityRecord(
+				'root',
+				'site'
+			) as SiteData | undefined;
+			if ( ! siteData ) {
+				return null;
+			}
+			const homepageId =
+				siteData?.show_on_front === 'page'
+					? normalizePageId( siteData.page_on_front )
+					: null;
+			if ( homepageId ) {
+				return { postType: 'page', postId: homepageId };
+			}
+			const frontPageTemplateId = select(
+				STORE_NAME
+			).getDefaultTemplateId( {
+				slug: 'front-page',
+			} );
+			return { postType: 'wp_template', postId: frontPageTemplateId };
+		},
+		( state ) => [
+			// @ts-expect-error
+			getEntityRecord( state, 'root', 'site' ),
+			getDefaultTemplateId( state, {
+				slug: 'front-page',
+			} ),
+		]
+	)
+);
+
+export const getPostsPageId = createRegistrySelector( ( select ) => () => {
+	const siteData = select( STORE_NAME ).getEntityRecord( 'root', 'site' ) as
+		| SiteData
+		| undefined;
+	return siteData?.show_on_front === 'page'
+		? normalizePageId( siteData.page_for_posts )
+		: null;
+} );
+
+export const getTemplateId = createRegistrySelector(
+	( select ) => ( state, postType, postId ) => {
+		const homepage = unlock( select( STORE_NAME ) ).getHomePage();
+
+		if ( ! homepage ) {
+			return;
+		}
+
+		// For the front page, we always use the front page template if existing.
+		if (
+			postType === 'page' &&
+			postType === homepage?.postType &&
+			postId.toString() === homepage?.postId
+		) {
+			// The /lookup endpoint cannot currently handle a lookup
+			// when a page is set as the front page, so specifically in
+			// that case, we want to check if there is a front page
+			// template, and instead of falling back to the home
+			// template, we want to fall back to the page template.
+			const templates = select( STORE_NAME ).getEntityRecords(
+				'postType',
+				'wp_template',
+				{
+					per_page: -1,
+				}
+			);
+			if ( ! templates ) {
+				return;
+			}
+			const id = templates.find( ( { slug } ) => slug === 'front-page' )
+				?.id;
+			if ( id ) {
+				return id;
+			}
+			// If no front page template is found, continue with the
+			// logic below (fetching the page template).
+		}
+
+		const editedEntity = select( STORE_NAME ).getEditedEntityRecord(
+			'postType',
+			postType,
+			postId
+		);
+		if ( ! editedEntity ) {
+			return;
+		}
+		const postsPageId = unlock( select( STORE_NAME ) ).getPostsPageId();
+		// Check if the current page is the posts page.
+		if ( postType === 'page' && postsPageId === postId.toString() ) {
+			return select( STORE_NAME ).getDefaultTemplateId( {
+				slug: 'home',
+			} );
+		}
+		// First see if the post/page has an assigned template and fetch it.
+		const currentTemplateSlug = editedEntity.template;
+		if ( currentTemplateSlug ) {
+			const currentTemplate = select( STORE_NAME )
+				.getEntityRecords( 'postType', 'wp_template', {
+					per_page: -1,
+				} )
+				?.find( ( { slug } ) => slug === currentTemplateSlug );
+			if ( currentTemplate ) {
+				return currentTemplate.id;
+			}
+		}
+		// If no template is assigned, use the default template.
+		let slugToCheck;
+		// In `draft` status we might not have a slug available, so we use the `single`
+		// post type templates slug(ex page, single-post, single-product etc..).
+		// Pages do not need the `single` prefix in the slug to be prioritized
+		// through template hierarchy.
+		if ( editedEntity.slug ) {
+			slugToCheck =
+				postType === 'page'
+					? `${ postType }-${ editedEntity.slug }`
+					: `single-${ postType }-${ editedEntity.slug }`;
+		} else {
+			slugToCheck = postType === 'page' ? 'page' : `single-${ postType }`;
+		}
+		return select( STORE_NAME ).getDefaultTemplateId( {
+			slug: slugToCheck,
+		} );
+	}
+);

packages/edit-post/src/components/layout/index.js

@@ -399,10 +399,10 @@ function Layout( {
 	} = useSelect(
 		( select ) => {
 			const { get } = select( preferencesStore );
-			const { isFeatureActive, getEditedPostTemplateId } = unlock(
-				select( editPostStore )
+			const { isFeatureActive } = select( editPostStore );
+			const { canUser, getPostType, getTemplateId } = unlock(
+				select( coreStore )
 			);
-			const { canUser, getPostType } = select( coreStore );
 
 			const supportsTemplateMode = settings.supportsTemplateMode;
 			const isViewable =
@@ -433,15 +433,20 @@ function Layout( {
 					isViewable &&
 					canViewTemplate &&
 					! isEditingTemplate
-						? getEditedPostTemplateId()
+						? getTemplateId( currentPostType, currentPostId )
 						: null,
 				enablePaddingAppender:
 					! isZoomOut() &&
 					isRenderingPostOnly &&
 					! DESIGN_POST_TYPES.includes( currentPostType ),
 			};
 		},
-		[ currentPostType, isEditingTemplate, settings.supportsTemplateMode ]
+		[
+			currentPostType,
+			currentPostId,
+			isEditingTemplate,
+			settings.supportsTemplateMode,
+		]
 	);
 	const [ paddingAppenderRef, paddingStyle ] = usePaddingAppender(
 		enablePaddingAppender

packages/edit-post/src/store/index.js

@@ -9,9 +9,7 @@ import { createReduxStore, register } from '@wordpress/data';
 import reducer from './reducer';
 import * as actions from './actions';
 import * as selectors from './selectors';
-import * as privateSelectors from './private-selectors';
 import { STORE_NAME } from './constants';
-import { unlock } from '../lock-unlock';
 
 /**
  * Store definition for the edit post namespace.
@@ -26,4 +24,3 @@ export const store = createReduxStore( STORE_NAME, {
 	selectors,
 } );
 register( store );
-unlock( store ).registerPrivateSelectors( privateSelectors );

packages/edit-post/src/store/selectors.js

@@ -14,8 +14,6 @@ import deprecated from '@wordpress/deprecated';
  * Internal dependencies
  */
 import { unlock } from '../lock-unlock';
-import { getEditedPostTemplateId } from './private-selectors';
-
 const { interfaceStore } = unlock( editorPrivateApis );
 const EMPTY_ARRAY = [];
 const EMPTY_OBJECT = {};
@@ -555,8 +553,13 @@ export function areMetaBoxesInitialized( state ) {
  * @return {Object?} Post Template.
  */
 export const getEditedPostTemplate = createRegistrySelector(
-	( select ) => ( state ) => {
-		const templateId = getEditedPostTemplateId( state );
+	( select ) => () => {
+		const { id: postId, type: postType } =
+			select( editorStore ).getCurrentPost();
+		const templateId = unlock( select( coreStore ) ).getTemplateId(
+			postType,
+			postId
+		);
 		if ( ! templateId ) {
 			return undefined;
 		}