Inspector: Display home / posts page badge (WordPress#62071)

Co-authored-by: jameskoster <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: ntsekouras <[email protected]>
patil-vipul · Jun 17, 2024 · f90a7fd · f90a7fd
1 parent 8190e19
commit f90a7fd
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 36 deletions.
diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js
@@ -28,42 +28,52 @@ import {
 import { unlock } from '../../lock-unlock';
 
 export default function PostCardPanel( { actions } ) {
-	const { title, icon, isSync } = useSelect( ( select ) => {
-		const {
-			getEditedPostAttribute,
-			getCurrentPostType,
-			getCurrentPostId,
-			__experimentalGetTemplateInfo,
-		} = select( editorStore );
-		const { getEditedEntityRecord } = select( coreStore );
-		const _type = getCurrentPostType();
-		const _id = getCurrentPostId();
-		const _record = getEditedEntityRecord( 'postType', _type, _id );
-		const _templateInfo =
-			[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes( _type ) &&
-			__experimentalGetTemplateInfo( _record );
-		let _isSync = false;
-		if ( GLOBAL_POST_TYPES.includes( _type ) ) {
-			if ( PATTERN_POST_TYPE === _type ) {
-				// When the post is first created, the top level wp_pattern_sync_status is not set so get meta value instead.
-				const currentSyncStatus =
-					getEditedPostAttribute( 'meta' )?.wp_pattern_sync_status ===
-					'unsynced'
-						? 'unsynced'
-						: getEditedPostAttribute( 'wp_pattern_sync_status' );
-				_isSync = currentSyncStatus !== 'unsynced';
-			} else {
-				_isSync = true;
+	const { isFrontPage, isPostsPage, title, icon, isSync } = useSelect(
+		( select ) => {
+			const {
+				getEditedPostAttribute,
+				getCurrentPostType,
+				getCurrentPostId,
+				__experimentalGetTemplateInfo,
+			} = select( editorStore );
+			const { getEditedEntityRecord } = select( coreStore );
+			const siteSettings = getEditedEntityRecord( 'root', 'site' );
+			const _type = getCurrentPostType();
+			const _id = getCurrentPostId();
+			const _record = getEditedEntityRecord( 'postType', _type, _id );
+			const _templateInfo =
+				[ TEMPLATE_POST_TYPE, TEMPLATE_PART_POST_TYPE ].includes(
+					_type
+				) && __experimentalGetTemplateInfo( _record );
+			let _isSync = false;
+			if ( GLOBAL_POST_TYPES.includes( _type ) ) {
+				if ( PATTERN_POST_TYPE === _type ) {
+					// When the post is first created, the top level wp_pattern_sync_status is not set so get meta value instead.
+					const currentSyncStatus =
+						getEditedPostAttribute( 'meta' )
+							?.wp_pattern_sync_status === 'unsynced'
+							? 'unsynced'
+							: getEditedPostAttribute(
+									'wp_pattern_sync_status'
+							  );
+					_isSync = currentSyncStatus !== 'unsynced';
+				} else {
+					_isSync = true;
+				}
 			}
-		}
-		return {
-			title: _templateInfo?.title || getEditedPostAttribute( 'title' ),
-			icon: unlock( select( editorStore ) ).getPostIcon( _type, {
-				area: _record?.area,
-			} ),
-			isSync: _isSync,
-		};
-	}, [] );
+			return {
+				title:
+					_templateInfo?.title || getEditedPostAttribute( 'title' ),
+				icon: unlock( select( editorStore ) ).getPostIcon( _type, {
+					area: _record?.area,
+				} ),
+				isSync: _isSync,
+				isFrontPage: siteSettings?.page_on_front === _id,
+				isPostsPage: siteSettings?.page_for_posts === _id,
+			};
+		},
+		[]
+	);
 	return (
 		<div className="editor-post-card-panel">
 			<HStack
@@ -83,8 +93,19 @@ export default function PostCardPanel( { actions } ) {
 					className="editor-post-card-panel__title"
 					weight={ 500 }
 					as="h2"
+					lineHeight={ '20px' }
 				>
 					{ title ? decodeEntities( title ) : __( 'No Title' ) }
+					{ isFrontPage && (
+						<span className="editor-post-card-panel__title-badge">
+							{ __( 'Front Page' ) }
+						</span>
+					) }
+					{ isPostsPage && (
+						<span className="editor-post-card-panel__title-badge">
+							{ __( 'Posts Page' ) }
+						</span>
+					) }
 				</Text>
 				{ actions }
 			</HStack>

diff --git a/packages/editor/src/components/post-card-panel/style.scss b/packages/editor/src/components/post-card-panel/style.scss
@@ -7,7 +7,13 @@
 		width: 100%;
 
 		&.editor-post-card-panel__title {
-			margin: 3px 0 0 0;
+			margin: 0;
+			padding: 2px 0;
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			column-gap: $grid-unit-10;
+			row-gap: $grid-unit-05;
 		}
 	}
 
@@ -30,3 +36,15 @@
 .editor-post-card-panel__icon.is-sync {
 	fill: var(--wp-block-synced-color);
 }
+
+.editor-post-card-panel__title-badge {
+	background: $gray-100;
+	color: $gray-700;
+	padding: 0 $grid-unit-05;
+	border-radius: $radius-block-ui;
+	font-size: 12px;
+	font-weight: 400;
+	flex-shrink: 0;
+	line-height: $grid-unit-05 * 5;
+	display: inline-block;
+}