Updating styling of header

WordPress · Dec 2, 2024 · f35707b · f35707b
1 parent bdaafd3
commit f35707b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 28 deletions.
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
@@ -18,25 +18,25 @@
 @mixin heading-small() {
 	@include _text-heading();
 	font-size: $font-size-x-small;
-	line-height: $line-height-x-small;
+	line-height: $font-line-height--x-small;
 }
 
 @mixin heading-medium() {
 	@include _text-heading();
 	font-size: $font-size-medium;
-	line-height: $line-height-small;
+	line-height: $font-line-height-small;
 }
 
 @mixin heading-large() {
 	@include _text-heading();
 	font-size: $font-size-large;
-	line-height: $line-height-small;
+	line-height: $font-line-height-small;
 }
 
 @mixin heading-x-large() {
 	@include _text-heading();
 	font-size: $font-size-x-large;
-	line-height: $line-height-medium;
+	line-height: $font-line-height-medium;
 }
 
 @mixin heading-2x-large() {
@@ -48,25 +48,25 @@
 @mixin body-small() {
 	@include _text-body();
 	font-size: $font-size-small;
-	line-height: $line-height-x-small;
+	line-height: $font-line-height-x-small;
 }
 
 @mixin body-medium() {
 	@include _text-body();
 	font-size: $font-size-medium;
-	line-height: $line-height-small;
+	line-height: $font-line-height-small;
 }
 
 @mixin body-large() {
 	@include _text-body();
 	font-size: $font-size-large;
-	line-height: $line-height-medium;
+	line-height: $font-line-height-medium;
 }
 
 @mixin body-x-large() {
 	@include _text-body();
 	font-size: $font-size-x-large;
-	line-height: $line-height-x-large;
+	line-height: $font-line-height-x-large;
 }
 
 /**
@@ -178,15 +178,18 @@
  */
 
 @mixin editor-left($selector) {
-	#{$selector} { /* Set left position when auto-fold is not on the body element. */
+	#{$selector} {
+		/* Set left position when auto-fold is not on the body element. */
 		left: 0;
 
 		@media (min-width: #{ ($break-medium + 1) }) {
 			left: $admin-sidebar-width;
 		}
 	}
 
-	.auto-fold #{$selector} { /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
+	.auto-fold #{$selector} {
+
+		/* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
 		@media (min-width: #{ ($break-medium + 1) }) {
 			left: $admin-sidebar-width-collapsed;
 		}
@@ -236,12 +239,12 @@
 
 @mixin reduce-motion($property: "") {
 
-	@if $property == "transition" {
+	@if $property =="transition" {
 		@media (prefers-reduced-motion: reduce) {
 			transition-duration: 0s;
 			transition-delay: 0s;
 		}
-	} @else if $property == "animation" {
+	} @else if $property =="animation" {
 		@media (prefers-reduced-motion: reduce) {
 			animation-duration: 1ms;
 			animation-delay: 0s;
@@ -265,6 +268,7 @@
 	font-size: $mobile-text-min-font-size;
 	/* Override core line-height. To be reviewed. */
 	line-height: normal;
+
 	@include break-small {
 		font-size: $default-font-size;
 		/* Override core line-height. To be reviewed. */
@@ -447,6 +451,7 @@
 
 	// Fonts smaller than 16px causes mobile safari to zoom.
 	font-size: $mobile-text-min-font-size !important;
+
 	@include break-small {
 		font-size: $default-font-size !important;
 	}
@@ -464,7 +469,7 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 
-@mixin wp-admin-reset( $content-container ) {
+@mixin wp-admin-reset($content-container ) {
 	background: $white;
 
 	#wpcontent {
@@ -515,7 +520,8 @@
 	// Focus style width.
 	// Avoid rounding issues by showing a whole 2px for 1x screens, and 1.5px on high resolution screens.
 	--wp-admin-border-width-focus: 2px;
-	@media ( -webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+
+	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 		--wp-admin-border-width-focus: 1.5px;
 	}
 }
@@ -582,32 +588,33 @@
 
 	/* stylelint-disable @stylistic/function-comma-space-after -- We can not use spacing because of WP multi site kses rule. */
 	.has-vivid-green-cyan-to-vivid-cyan-blue-gradient-background {
-		background: linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%);
+		background: linear-gradient(135deg, rgba(0, 208, 132, 1) 0%, rgba(6, 147, 227, 1) 100%);
 	}
 
 	.has-purple-crush-gradient-background {
-		background: linear-gradient(135deg,rgb(52,226,228) 0%,rgb(71,33,251) 50%,rgb(171,29,254) 100%);
+		background: linear-gradient(135deg, rgb(52, 226, 228) 0%, rgb(71, 33, 251) 50%, rgb(171, 29, 254) 100%);
 	}
 
 	.has-hazy-dawn-gradient-background {
-		background: linear-gradient(135deg,rgb(250,172,168) 0%,rgb(218,208,236) 100%);
+		background: linear-gradient(135deg, rgb(250, 172, 168) 0%, rgb(218, 208, 236) 100%);
 	}
 
 	.has-subdued-olive-gradient-background {
-		background: linear-gradient(135deg,rgb(250,250,225) 0%,rgb(103,166,113) 100%);
+		background: linear-gradient(135deg, rgb(250, 250, 225) 0%, rgb(103, 166, 113) 100%);
 	}
 
 	.has-atomic-cream-gradient-background {
-		background: linear-gradient(135deg,rgb(253,215,154) 0%,rgb(0,74,89) 100%);
+		background: linear-gradient(135deg, rgb(253, 215, 154) 0%, rgb(0, 74, 89) 100%);
 	}
 
 	.has-nightshade-gradient-background {
-		background: linear-gradient(135deg,rgb(51,9,104) 0%,rgb(49,205,207) 100%);
+		background: linear-gradient(135deg, rgb(51, 9, 104) 0%, rgb(49, 205, 207) 100%);
 	}
 
 	.has-midnight-gradient-background {
-		background: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
+		background: linear-gradient(135deg, rgb(2, 3, 129) 0%, rgb(40, 116, 252) 100%);
 	}
+
 	/* stylelint-enable @stylistic/function-comma-space-after */
 }
 
@@ -618,16 +625,20 @@
 		width: 12px;
 		height: 12px;
 	}
+
 	&::-webkit-scrollbar-track {
 		background-color: transparent;
 	}
+
 	&::-webkit-scrollbar-thumb {
 		background-color: $handle-color;
 		border-radius: 8px;
 		border: 3px solid transparent;
 		background-clip: padding-box;
 	}
-	&:hover::-webkit-scrollbar-thumb, // This needs specificity.
+
+	&:hover::-webkit-scrollbar-thumb,
+	// This needs specificity.
 	&:focus::-webkit-scrollbar-thumb,
 	&:focus-within::-webkit-scrollbar-thumb {
 		background-color: $handle-color-hover;
@@ -659,7 +670,7 @@
 	outline-color: var(--wp-admin-theme-color);
 	outline-style: solid;
 	outline-width: calc(#{$widthRatio} * (var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
-	outline-offset: calc(#{$widthRatio} * ((-1 * var(--wp-admin-border-width-focus) ) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
+	outline-offset: calc(#{$widthRatio} * ((-1 * var(--wp-admin-border-width-focus)) / var(--wp-block-editor-iframe-zoom-out-scale, 1)));
 }
 
 @mixin selected-block-focus($widthRatio: 1) {

diff --git a/packages/edit-site/src/components/post-edit-header/index.js b/packages/edit-site/src/components/post-edit-header/index.js
@@ -28,14 +28,15 @@ export default function PostEditHeader( { postType, postId } ) {
 	const { icon, labels } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, getPostType } = select( coreStore );
+			const { getPostIcon } = unlock( select( editorStore ) );
 			const _record = getEditedEntityRecord(
 				'postType',
 				postType,
 				ids[ 0 ]
 			);
 
 			return {
-				icon: unlock( select( editorStore ) ).getPostIcon( postType, {
+				icon: getPostIcon( postType, {
 					area: _record?.area,
 				} ),
 				labels: getPostType( postType )?.labels,
@@ -50,7 +51,7 @@ export default function PostEditHeader( { postType, postId } ) {
 
 	return (
 		<VStack spacing={ 1 } className="edit-site-post-edit-header">
-			<HStack spacing={ 2 } align="flex-start" justify="normal">
+			<HStack spacing={ 2 } align="center" justify="normal">
 				<Icon
 					className="edit-site-post-edit-header__icon"
 					icon={ icon }
@@ -59,9 +60,7 @@ export default function PostEditHeader( { postType, postId } ) {
 					numberOfLines={ 2 }
 					truncate
 					className="edit-site-post-edit-header__title"
-					weight={ 500 }
 					as="h2"
-					lineHeight="20px"
 				>
 					{ labels?.name &&
 						sprintf(

diff --git a/packages/edit-site/src/components/post-edit-header/style.scss b/packages/edit-site/src/components/post-edit-header/style.scss
@@ -4,6 +4,6 @@
 	}
 
 	.edit-site-post-edit-header__title {
-		padding: 2px 0;
+		@include heading-medium();
 	}
 }