Change header height from 60px to 64px

Update
WordPress · Apr 14, 2024 · cd1d26f · cd1d26f
1 parent e9bccc8
commit cd1d26f
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 11 deletions.
diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
@@ -49,7 +49,7 @@ $button-size: 36px;
 $button-size-next-default-40px: 40px; // transitionary variable for next default button size
 $button-size-small: 24px;
 $button-size-compact: 32px;
-$header-height: 60px;
+$header-height: 64px;
 $panel-header-height: $grid-unit-60;
 $nav-sidebar-width: 360px;
 $admin-bar-height: 32px;

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -433,7 +433,7 @@ $block-inserter-tabs-height: 44px;
 .block-editor-block-patterns-explorer {
 	&__sidebar {
 		position: absolute;
-		top: $header-height + $grid-unit-15;
+		top: $header-height + $grid-unit-10;
 		left: 0;
 		bottom: 0;
 		width: $sidebar-width;

diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
@@ -98,7 +98,7 @@
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	height: $header-height + $grid-unit-15;
+	height: $header-height + $grid-unit-10;
 	width: 100%;
 	z-index: z-index(".components-modal__header");
 	position: absolute;
@@ -150,7 +150,7 @@
 // Modal contents.
 .components-modal__content {
 	flex: 1;
-	margin-top: $header-height + $grid-unit-15;
+	margin-top: $header-height + $grid-unit-10;
 	// Small top padding required to avoid cutting off the visible outline when the first child element is focusable.
 	padding: $grid-unit-05 $grid-unit-40 $grid-unit-40;
 	overflow: auto;

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -53,7 +53,7 @@
 		.block-editor-block-toolbar {
 			height: 100%;
 			// Push down so that buttons are centered vertically.
-			// It should be 14px (60px header height - 32px compact button height = 28 / 2),
+			// It should be 16px (64px header height - 32px compact button height = 32 / 2),
 			// but there is a -1px top-margin down the stack that affects this.
 			padding-top: math.div($header-height - $button-size-compact, 2) + 1;
 

diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -22,8 +22,8 @@
 		// Allow focus ring to be fully visible on furthest right button.
 		@include break-medium() {
 			padding-right: var(--wp-admin-border-width-focus);
-			// Account for the site hub, which is 60x60px.
-			flex-basis: calc(37.5% - 60px);
+			// Account for the site hub, which is 64x64px.
+			flex-basis: calc(37.5% - #{$header-height});
 			// We need this to be overflow hidden so the block toolbar can
 			// overflow scroll. If the overflow is visible, flexbox allows
 			// the toolbar to grow outside of the allowed container space.
@@ -199,7 +199,7 @@
 		.block-editor-block-toolbar {
 			height: 100%;
 			// Push down so that buttons are centered vertically.
-			// It should be 14px (60px header height - 32px compact button height = 28 / 2),
+			// It should be 16px (64px header height - 32px compact button height = 32 / 2),
 			// but there is a -1px top-margin down the stack that affects this.
 			padding-top: math.div($header-height - $button-size-compact, 2) + 1;
 

diff --git a/packages/edit-widgets/src/components/error-boundary/style.scss b/packages/edit-widgets/src/components/error-boundary/style.scss
@@ -2,6 +2,6 @@
 	margin: auto;
 	max-width: 780px;
 	padding: 20px;
-	margin-top: 60px;
+	margin-top: $header-height;
 	box-shadow: $shadow-modal;
 }
diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
@@ -25,7 +25,7 @@
 		.block-editor-block-toolbar {
 			height: 100%;
 			// Push down so that buttons are centered vertically.
-			// It should be 14px (60px header height - 32px compact button height = 28 / 2),
+			// It should be 16px (64px header height - 32px compact button height = 32 / 2),
 			// but there is a -1px top-margin down the stack that affects this.
 			padding-top: math.div($header-height - $button-size-compact, 2) + 1;
 

diff --git a/packages/editor/src/components/error-boundary/style.scss b/packages/editor/src/components/error-boundary/style.scss
@@ -2,6 +2,6 @@
 	margin: auto;
 	max-width: 780px;
 	padding: 20px;
-	margin-top: 60px;
+	margin-top: $header-height;
 	box-shadow: $shadow-modal;
 }