Data views: Align page headers (#62115)

Co-authored-by: jameskoster <[email protected]> Co-authored-by: jasmussen <[email protected]>
WordPress · May 30, 2024 · 1568b81 · 1568b81 · github-actions · May 30, 2024
1 parent 5c5f3db
commit 1568b81
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 26 deletions.
diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -108,7 +108,11 @@ export default function AddNewPattern() {
 				<DropdownMenu
 					controls={ controls }
 					icon={ null }
-					toggleProps={ { variant: 'primary', showTooltip: false } }
+					toggleProps={ {
+						variant: 'primary',
+						showTooltip: false,
+						__next40pxDefaultSize: true,
+					} }
 					text={ addNewPatternLabel }
 					label={ addNewPatternLabel }
 				/>

diff --git a/packages/edit-site/src/components/add-new-template/index.js b/packages/edit-site/src/components/add-new-template/index.js
@@ -354,6 +354,7 @@ function NewTemplate() {
 				variant="primary"
 				onClick={ () => setShowModal( true ) }
 				label={ postType.labels.add_new_item }
+				__next40pxDefaultSize
 			>
 				{ postType.labels.add_new_item }
 			</Button>

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -498,7 +498,11 @@ export default function PagePages() {
 			actions={
 				addNewLabel && (
 					<>
-						<Button variant="primary" onClick={ openModal }>
+						<Button
+							variant="primary"
+							onClick={ openModal }
+							__next40pxDefaultSize
+						>
 							{ addNewLabel }
 						</Button>
 						{ showAddPageModal && (

diff --git a/packages/edit-site/src/components/page-patterns/header.js b/packages/edit-site/src/components/page-patterns/header.js
@@ -58,9 +58,12 @@ export default function PatternsHeader( {
 	}
 
 	return (
-		<VStack className="edit-site-patterns__section-header" gap={ 3 }>
-			<HStack justify="space-between">
-				<Heading as="h2" level={ 4 } id={ titleId }>
+		<VStack className="edit-site-patterns__section-header" spacing={ 0 }>
+			<HStack
+				justify="space-between"
+				className="edit-site-patterns__title"
+			>
+				<Heading as="h2" level={ 3 } id={ titleId } weight={ 500 }>
 					{ title }
 				</Heading>
 				<HStack expanded={ false }>
@@ -96,7 +99,12 @@ export default function PatternsHeader( {
 				</HStack>
 			</HStack>
 			{ description ? (
-				<Text variant="muted" as="p" id={ descriptionId }>
+				<Text
+					variant="muted"
+					as="p"
+					id={ descriptionId }
+					className="edit-site-patterns__sub-title"
+				>
 					{ description }
 				</Text>
 			) : null }

diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss
@@ -87,14 +87,22 @@
 
 	.edit-site-patterns__section-header {
 		border-bottom: 1px solid #f0f0f0;
-		min-height: 72px;
-		padding: $grid-unit-30 $grid-unit-60;
+		padding: $grid-unit-20 $grid-unit-60;
 		position: sticky;
 		top: 0;
 		z-index: 2;
 		flex-shrink: 0;
 		transition: padding ease-out 0.1s;
 		@include reduce-motion("transition");
+		min-height: $grid-unit-50;
+
+		.edit-site-patterns__title {
+			min-height: $grid-unit-50;
+		}
+
+		.edit-site-patterns__sub-title {
+			margin-bottom: $grid-unit-10;
+		}
 	}
 
 	.edit-site-patterns__pattern-title {

diff --git a/packages/edit-site/src/components/page/header.js b/packages/edit-site/src/components/page/header.js
@@ -5,7 +5,7 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
-	FlexBlock,
+	__experimentalVStack as VStack,
 	FlexItem,
 } from '@wordpress/components';
 
@@ -15,8 +15,8 @@ import {
 
 export default function Header( { title, subTitle, actions } ) {
 	return (
-		<HStack as="header" alignment="left" className="edit-site-page-header">
-			<FlexBlock className="edit-site-page-header__page-title">
+		<VStack className="edit-site-page-header" as="header" spacing={ 0 }>
+			<HStack className="edit-site-page-header__page-title">
 				<Heading
 					as="h2"
 					level={ 3 }
@@ -25,15 +25,19 @@ export default function Header( { title, subTitle, actions } ) {
 				>
 					{ title }
 				</Heading>
-				{ subTitle && (
-					<Text as="p" className="edit-site-page-header__sub-title">
-						{ subTitle }
-					</Text>
-				) }
-			</FlexBlock>
-			<FlexItem className="edit-site-page-header__actions">
-				{ actions }
-			</FlexItem>
-		</HStack>
+				<FlexItem className="edit-site-page-header__actions">
+					{ actions }
+				</FlexItem>
+			</HStack>
+			{ subTitle && (
+				<Text
+					variant="muted"
+					as="p"
+					className="edit-site-page-header__sub-title"
+				>
+					{ subTitle }
+				</Text>
+			) }
+		</VStack>
 	);
 }
diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss
@@ -17,15 +17,17 @@
 	z-index: z-index(".edit-site-page-header");
 	transition: padding ease-out 0.1s;
 	@include reduce-motion("transition");
-	.components-text {
-		color: $gray-800;
-	}
+
 	.components-heading {
 		color: $gray-900;
 	}
+
+	.edit-site-page-header__page-title {
+		min-height: $grid-unit-50;
+	}
+
 	.edit-site-page-header__sub-title {
-		margin-top: $grid-unit-10;
-		color: $gray-700;
+		margin-bottom: $grid-unit-10;
 	}
 }