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 <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: jameskoster <[email protected]>
WordPress · Dec 19, 2024 · ec681ff · ec681ff · github-actions · Dec 19, 2024
1 parent c01cb99
commit ec681ff
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 30 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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";