Unify DataViews Header Title & Subtitle (#62429)

* Unify DataViews Patterns Header Title & Subtitle * Don't wrap text * Apply same logic to Pages, Templates Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>
WordPress · Jun 12, 2024 · d375f00 · d375f00
1 parent bda08ff
commit d375f00
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 2 deletions.
diff --git a/packages/edit-site/src/components/page-patterns/header.js b/packages/edit-site/src/components/page-patterns/header.js
@@ -58,12 +58,18 @@ export default function PatternsHeader( {
 	}
 
 	return (
-		<VStack className="edit-site-patterns__section-header" spacing={ 0 }>
+		<VStack className="edit-site-patterns__section-header" spacing={ 1 }>
 			<HStack
 				justify="space-between"
 				className="edit-site-patterns__title"
 			>
-				<Heading as="h2" level={ 3 } id={ titleId } weight={ 500 }>
+				<Heading
+					as="h2"
+					level={ 3 }
+					id={ titleId }
+					weight={ 500 }
+					truncate
+				>
 					{ title }
 				</Heading>
 				<HStack expanded={ false }>

diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
@@ -98,6 +98,12 @@
 
 		.edit-site-patterns__title {
 			min-height: $grid-unit-50;
+
+			.components-heading {
+				flex-grow: 1;
+				flex-basis: 0;
+				white-space: nowrap;
+			}
 		}
 
 		.edit-site-patterns__sub-title {

diff --git a/packages/edit-site/src/components/page/header.js b/packages/edit-site/src/components/page/header.js
@@ -22,6 +22,7 @@ export default function Header( { title, subTitle, actions } ) {
 					level={ 3 }
 					weight={ 500 }
 					className="edit-site-page-header__title"
+					truncate
 				>
 					{ title }
 				</Heading>

diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
@@ -24,6 +24,12 @@
 
 	.edit-site-page-header__page-title {
 		min-height: $grid-unit-50;
+
+		.components-heading {
+			flex-grow: 1;
+			flex-basis: 0;
+			white-space: nowrap;
+		}
 	}
 
 	.edit-site-page-header__sub-title {