Fix: Improve the DocumentBar post type label for the Homepage and Pos…

…ts Page cases (WordPress#66355) * Add the correct consistent label on document bar * Add the utililty custom hook to get the page badge based on current view * Change the variable name to be more precise * Update the document bar label display logic * Address the PR feedbacks Co-authored-by: hbhalodia <[email protected]> Co-authored-by: Vrishabhsk <[email protected]> Co-authored-by: afercia <[email protected]>
MaxMood96 · Oct 29, 2024 · 7ca9567 · 7ca9567
1 parent 648c458
commit 7ca9567
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 19 deletions.
diff --git a/packages/editor/src/components/document-bar/index.js b/packages/editor/src/components/document-bar/index.js
@@ -28,6 +28,7 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { TEMPLATE_POST_TYPES } from '../../store/constants';
 import { store as editorStore } from '../../store';
+import usePageTypeBadge from '../../utils/pageTypeBadge';
 
 /** @typedef {import("@wordpress/components").IconType} IconType */
 
@@ -107,6 +108,8 @@ export default function DocumentBar( props ) {
 	const title = props.title || entityTitle;
 	const icon = props.icon;
 
+	const pageTypeBadge = usePageTypeBadge();
+
 	const mountedRef = useRef( false );
 	useEffect( () => {
 		mountedRef.current = true;
@@ -180,11 +183,20 @@ export default function DocumentBar( props ) {
 									? decodeEntities( title )
 									: __( 'No title' ) }
 							</span>
-							{ postTypeLabel && ! props.title && (
+							{ pageTypeBadge && (
 								<span className="editor-document-bar__post-type-label">
-									{ '· ' + decodeEntities( postTypeLabel ) }
+									{ `· ${ pageTypeBadge }` }
 								</span>
 							) }
+							{ postTypeLabel &&
+								! props.title &&
+								! pageTypeBadge && (
+									<span className="editor-document-bar__post-type-label">
+										{ `· ${ decodeEntities(
+											postTypeLabel
+										) }` }
+									</span>
+								) }
 						</Text>
 					</motion.div>
 					<span className="editor-document-bar__shortcut">

diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js
@@ -21,22 +21,17 @@ import {
 } from '../../store/constants';
 import { unlock } from '../../lock-unlock';
 import PostActions from '../post-actions';
+import usePageTypeBadge from '../../utils/pageTypeBadge';
 
 export default function PostCardPanel( {
 	postType,
 	postId,
 	onActionPerformed,
 } ) {
-	const { isFrontPage, isPostsPage, title, icon } = useSelect(
+	const { title, icon } = useSelect(
 		( select ) => {
 			const { __experimentalGetTemplateInfo } = select( editorStore );
-			const { canUser, getEditedEntityRecord } = select( coreStore );
-			const siteSettings = canUser( 'read', {
-				kind: 'root',
-				name: 'site',
-			} )
-				? getEditedEntityRecord( 'root', 'site' )
-				: undefined;
+			const { getEditedEntityRecord } = select( coreStore );
 			const _record = getEditedEntityRecord(
 				'postType',
 				postType,
@@ -51,12 +46,13 @@ export default function PostCardPanel( {
 				icon: unlock( select( editorStore ) ).getPostIcon( postType, {
 					area: _record?.area,
 				} ),
-				isFrontPage: siteSettings?.page_on_front === postId,
-				isPostsPage: siteSettings?.page_for_posts === postId,
 			};
 		},
 		[ postId, postType ]
 	);
+
+	const pageTypeBadge = usePageTypeBadge();
+
 	return (
 		<div className="editor-post-card-panel">
 			<HStack
@@ -74,14 +70,9 @@ export default function PostCardPanel( {
 					lineHeight="20px"
 				>
 					{ title ? decodeEntities( title ) : __( 'No title' ) }
-					{ isFrontPage && (
-						<span className="editor-post-card-panel__title-badge">
-							{ __( 'Homepage' ) }
-						</span>
-					) }
-					{ isPostsPage && (
+					{ pageTypeBadge && (
 						<span className="editor-post-card-panel__title-badge">
-							{ __( 'Posts Page' ) }
+							{ pageTypeBadge }
 						</span>
 					) }
 				</Text>

diff --git a/packages/editor/src/utils/pageTypeBadge.js b/packages/editor/src/utils/pageTypeBadge.js
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../store';
+
+/**
+ * Custom hook to get the page type badge for the current post on edit site view.
+ */
+export default function usePageTypeBadge() {
+	const { isFrontPage, isPostsPage } = useSelect( ( select ) => {
+		const { getCurrentPostId } = select( editorStore );
+		const { canUser, getEditedEntityRecord } = select( coreStore );
+		const postId = getCurrentPostId();
+		const siteSettings = canUser( 'read', {
+			kind: 'root',
+			name: 'site',
+		} )
+			? getEditedEntityRecord( 'root', 'site' )
+			: undefined;
+
+		return {
+			isFrontPage: siteSettings?.page_on_front === postId,
+			isPostsPage: siteSettings?.page_for_posts === postId,
+		};
+	} );
+
+	if ( isFrontPage ) {
+		return __( 'Homepage' );
+	} else if ( isPostsPage ) {
+		return __( 'Posts Page' );
+	}
+
+	return false;
+}