From ec681ff31bce36aca02cc6a9128fa7ebdcae92ca Mon Sep 17 00:00:00 2001
From: Juan Aldasoro <juanfraa@gmail.com>
Date: Thu, 19 Dec 2024 16:13:21 +0100
Subject: [PATCH] Use Badge component in page markers (#68103)

* Use Badge component in page markers
* Remove redundant prop.
* Remove import.
* Fix the title alignment.

Co-authored-by: juanfra <juanfra@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
---
 .../src/components/post-card-panel/index.js     | 10 ++++++----
 .../src/components/post-card-panel/style.scss   | 17 ++++-------------
 .../fields/src/fields/page-title/style.scss     | 10 ----------
 packages/fields/src/fields/page-title/view.tsx  |  7 +++++--
 packages/fields/src/style.scss                  |  1 -
 5 files changed, 15 insertions(+), 30 deletions(-)
 delete mode 100644 packages/fields/src/fields/page-title/style.scss

diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js
index 7849f014ab49c..78f9522ba5f44 100644
--- a/packages/editor/src/components/post-card-panel/index.js
+++ b/packages/editor/src/components/post-card-panel/index.js
@@ -6,6 +6,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalText as Text,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
@@ -25,6 +26,7 @@ import { unlock } from '../../lock-unlock';
 import PostActions from '../post-actions';
 import usePageTypeBadge from '../../utils/pageTypeBadge';
 import { getTemplateInfo } from '../../utils/get-template-info';
+const { Badge } = unlock( componentsPrivateApis );
 
 /**
  * Renders a title of the post type and the available quick actions available within a 3-dot dropdown.
@@ -109,11 +111,11 @@ export default function PostCardPanel( {
 					className="editor-post-card-panel__title"
 					as="h2"
 				>
-					{ title }
+					<span className="editor-post-card-panel__title-name">
+						{ title }
+					</span>
 					{ pageTypeBadge && postIds.length === 1 && (
-						<span className="editor-post-card-panel__title-badge">
-							{ pageTypeBadge }
-						</span>
+						<Badge>{ pageTypeBadge }</Badge>
 					) }
 				</Text>
 				<PostActions
diff --git a/packages/editor/src/components/post-card-panel/style.scss b/packages/editor/src/components/post-card-panel/style.scss
index c3638b313a828..5fa54c67f14e5 100644
--- a/packages/editor/src/components/post-card-panel/style.scss
+++ b/packages/editor/src/components/post-card-panel/style.scss
@@ -9,7 +9,6 @@
 		&.editor-post-card-panel__title {
 			@include heading-medium();
 			margin: 0;
-			padding: 2px 0;
 			display: flex;
 			align-items: center;
 			flex-wrap: wrap;
@@ -34,19 +33,11 @@
 		margin-bottom: $grid-unit-10;
 	}
 
+	.editor-post-card-panel__title-name {
+		padding: 2px 0;
+	}
+
 	.editor-post-card-panel__description {
 		color: $gray-700;
 	}
 }
-
-.editor-post-card-panel__title-badge {
-	background: $gray-100;
-	color: $gray-800;
-	padding: 0 $grid-unit-05;
-	border-radius: $radius-small;
-	font-size: 12px;
-	font-weight: 400;
-	flex-shrink: 0;
-	line-height: $grid-unit-05 * 5;
-	display: inline-block;
-}
diff --git a/packages/fields/src/fields/page-title/style.scss b/packages/fields/src/fields/page-title/style.scss
deleted file mode 100644
index def56aa466a8a..0000000000000
--- a/packages/fields/src/fields/page-title/style.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.fields-field__page-title__badge {
-	background: $gray-100;
-	color: $gray-800;
-	padding: 0 $grid-unit-05;
-	border-radius: $radius-small;
-	font-size: 12px;
-	font-weight: 400;
-	flex-shrink: 0;
-	line-height: $grid-unit-05 * 5;
-}
diff --git a/packages/fields/src/fields/page-title/view.tsx b/packages/fields/src/fields/page-title/view.tsx
index 0be4c16d5d29a..eb5184362ec82 100644
--- a/packages/fields/src/fields/page-title/view.tsx
+++ b/packages/fields/src/fields/page-title/view.tsx
@@ -5,12 +5,15 @@ import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import type { Settings } from '@wordpress/core-data';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import type { CommonPost } from '../../types';
 import { BaseTitleView } from '../title/view';
+import { unlock } from '../../lock-unlock';
+const { Badge } = unlock( componentsPrivateApis );
 
 export default function PageTitleView( { item }: { item: CommonPost } ) {
 	const { frontPageId, postsPageId } = useSelect( ( select ) => {
@@ -27,11 +30,11 @@ export default function PageTitleView( { item }: { item: CommonPost } ) {
 	return (
 		<BaseTitleView item={ item } className="fields-field__page-title">
 			{ [ frontPageId, postsPageId ].includes( item.id as number ) && (
-				<span className="fields-field__page-title__badge">
+				<Badge>
 					{ item.id === frontPageId
 						? __( 'Homepage' )
 						: __( 'Posts Page' ) }
-				</span>
+				</Badge>
 			) }
 		</BaseTitleView>
 	);
diff --git a/packages/fields/src/style.scss b/packages/fields/src/style.scss
index d9a571270fbb6..96b1f816de5b6 100644
--- a/packages/fields/src/style.scss
+++ b/packages/fields/src/style.scss
@@ -3,5 +3,4 @@
 @import "./fields/featured-image/style.scss";
 @import "./fields/template/style.scss";
 @import "./fields/title/style.scss";
-@import "./fields/page-title/style.scss";
 @import "./fields/pattern-title/style.scss";