Update the site hub to show the page title and the template title

packages/edit-site/src/components/header-edit-mode/document-actions/index.js

@@ -31,7 +31,9 @@ import { store as preferencesStore } from '@wordpress/preferences';
  * Internal dependencies
  */
 import TemplateDetails from '../../template-details';
-import useEditedEntityRecord from '../../use-edited-entity-record';
+import useEditedEntityRecord, {
+	useEntityRecordTitle,
+} from '../../use-edited-entity-record';
 
 function getBlockDisplayText( block ) {
 	if ( block ) {
@@ -66,6 +68,10 @@ function useSecondaryText() {
 	return {};
 }
 
+function PostTitle( { postType, postId } ) {
+	return useEntityRecordTitle( 'postType', postType, postId );
+}
+
 export default function DocumentActions() {
 	const showIconLabels = useSelect(
 		( select ) =>
@@ -75,7 +81,7 @@ export default function DocumentActions() {
 			),
 		[]
 	);
-	const { isLoaded, record, getTitle } = useEditedEntityRecord();
+	const { isLoaded, record } = useEditedEntityRecord();
 	const { label, icon } = useSecondaryText();
 
 	// Use internal state instead of a ref to make sure that the component
@@ -138,7 +144,7 @@ export default function DocumentActions() {
 							entityLabel
 						) }
 					</VisuallyHidden>
-					{ getTitle() }
+					<PostTitle postType={ record.type } postId={ record.id } />
 				</Text>
 				<div className="edit-site-document-actions__secondary-item">
 					<BlockIcon icon={ icon } showColors />

packages/edit-site/src/components/site-hub/index.js

@@ -16,7 +16,6 @@ import {
 import { useReducedMotion, useViewportMatch } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { store as coreStore } from '@wordpress/core-data';
 import { forwardRef } from '@wordpress/element';
 
 /**
@@ -26,34 +25,36 @@ import { store as editSiteStore } from '../../store';
 import { useLocation } from '../routes';
 import getIsListPage from '../../utils/get-is-list-page';
 import SiteIcon from '../site-icon';
-import useEditedEntityRecord from '../use-edited-entity-record';
+import { useEntityRecordTitle } from '../use-edited-entity-record';
 
 const HUB_ANIMATION_DURATION = 0.3;
 
+function PostTitle( { postType, postId } ) {
+	return useEntityRecordTitle( 'postType', postType, postId );
+}
+
 const SiteHub = forwardRef(
 	( { isMobileCanvasVisible, setIsMobileCanvasVisible, ...props }, ref ) => {
 		const { params } = useLocation();
 		const isListPage = getIsListPage( params );
 		const isEditorPage = ! isListPage;
-		const { canvasMode, dashboardLink, entityConfig } = useSelect(
-			( select ) => {
-				select( editSiteStore ).getEditedPostType();
+		const { canvasMode, dashboardLink, context, postType, postId } =
+			useSelect( ( select ) => {
 				const {
 					__unstableGetCanvasMode,
 					getSettings,
 					getEditedPostType,
+					getEditedPostId,
+					getEditedPostContext,
 				} = select( editSiteStore );
 				return {
 					canvasMode: __unstableGetCanvasMode(),
 					dashboardLink: getSettings().__experimentalDashboardLink,
-					entityConfig: select( coreStore ).getEntityConfig(
-						'postType',
-						getEditedPostType()
-					),
+					postType: getEditedPostType(),
+					postId: getEditedPostId(),
+					context: getEditedPostContext(),
 				};
-			},
-			[]
-		);
+			}, [] );
 		const disableMotion = useReducedMotion();
 		const isMobileViewport = useViewportMatch( 'medium', '<' );
 		const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
@@ -80,7 +81,6 @@ const SiteHub = forwardRef(
 						__unstableSetCanvasMode( 'view' );
 					},
 			  };
-		const { getTitle } = useEditedEntityRecord();
 
 		return (
 			<motion.div
@@ -122,11 +122,16 @@ const SiteHub = forwardRef(
 
 					{ showLabels && (
 						<VStack spacing={ 0 }>
-							<div className="edit-site-site-hub__title">
-								{ getTitle() }
-							</div>
+							{ !! context?.postType && !! context?.postType && (
+								<div className="edit-site-site-hub__title">
+									<PostTitle { ...context } />
+								</div>
+							) }
 							<div className="edit-site-site-hub__post-type">
-								{ entityConfig?.label }
+								<PostTitle
+									postType={ postType }
+									postId={ postId }
+								/>
 							</div>
 						</VStack>
 					) }

packages/edit-site/src/components/use-edited-entity-record/index.js

@@ -3,7 +3,6 @@
  */
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { store as editorStore } from '@wordpress/editor';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -12,26 +11,41 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { store as editSiteStore } from '../../store';
 
 export default function useEditedEntityRecord() {
-	const { record, title, isLoaded } = useSelect( ( select ) => {
+	const { record, isLoaded } = useSelect( ( select ) => {
 		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
 		const { getEditedEntityRecord } = select( coreStore );
-		const { __experimentalGetTemplateInfo: getTemplateInfo } =
-			select( editorStore );
 		const postType = getEditedPostType();
 		const postId = getEditedPostId();
 		const _record = getEditedEntityRecord( 'postType', postType, postId );
 		const _isLoaded = !! postId;
 
 		return {
 			record: _record,
-			title: getTemplateInfo( _record ).title,
 			isLoaded: _isLoaded,
 		};
 	}, [] );
 
 	return {
 		isLoaded,
 		record,
-		getTitle: () => ( title ? decodeEntities( title ) : null ),
 	};
 }
+
+export function useEntityRecordTitle( kind, type, id ) {
+	const { title } = useSelect(
+		( select ) => {
+			const { getEntityRecord, getEntityConfig } = select( coreStore );
+			const record = getEntityRecord( kind, type, id );
+			const entityConfig = getEntityConfig( kind, type );
+			return {
+				title:
+					record && entityConfig
+						? decodeEntities( entityConfig.getTitle( record ) )
+						: null,
+			};
+		},
+		[ kind, type, id ]
+	);
+
+	return title ? decodeEntities( title ) : null;
+}