Apply custom scroll style to fixed header block toolbar (#57444)

* Apply custom scroll style to fixed header block toolbar * Fix header height * Scope the fix. * Fix border and parent selector dot * Move styles to each package * Try to get buttons to line up * Try to fix the toolbar shift in the Post Editor * Temp * Try to fix the toolbar shift in the Post Editor * Try to fix the toolbar shift in the Site Editor * Try to fix the toolbar shift in the Widget Editor * Fix border position when "Show button text labels" is enabled * Try: Small fix to center, keep the big buttons. * Revert "Try: Small fix to center, keep the big buttons." This reverts commit c2de530. --------- Co-authored-by: jasmussen <[email protected]>
WordPress · Jan 26, 2024 · 11a9943 · 11a9943
1 parent 5cc984d
commit 11a9943
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 19 deletions.
diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
@@ -2,13 +2,14 @@
 	display: flex;
 	padding: 0;
 	border: none;
+	justify-content: center;
 
 	@include break-small() {
 		.block-editor-block-mover:not(.is-horizontal) & {
 			flex-direction: column;
 
 			> * {
-				height: $block-toolbar-height * 0.5;
+				height: $block-toolbar-height * 0.5 - $grid-unit-05;
 				width: 100%;
 				min-width: 0 !important; // overrides default button width.
 
@@ -19,12 +20,12 @@
 			}
 
 			.block-editor-block-mover-button.is-up-button svg {
-				top: 5px;
+				top: 3px;
 				flex-shrink: 0;
 			}
 
 			.block-editor-block-mover-button.is-down-button svg {
-				bottom: 5px;
+				bottom: 3px;
 				flex-shrink: 0;
 			}
 		}

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -76,6 +76,10 @@
 	.block-editor-block-toolbar {
 		overflow: auto;
 		overflow-y: hidden;
+		@include custom-scrollbars-on-hover($gray-200, $gray-600);
+
+		// Prevents padding from being applied to the left and right sides of the element.
+		scrollbar-gutter: auto;
 
 		> :last-child,
 		> :last-child .components-toolbar-group,
@@ -109,7 +113,10 @@
 			position: absolute;
 			font-size: 16px;
 			right: 0;
-			bottom: $grid-unit-20;
+			height: $button-size-compact;
+			top: 0;
+			display: inline-flex;
+			align-items: center;
 		}
 	}
 }

diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
@@ -53,18 +53,34 @@
 	}
 
 	.selected-block-tools-wrapper {
-		overflow-x: hidden;
+		overflow: hidden;
 		display: flex;
+		align-items: center;
+		height: $header-height;
 
 		.block-editor-block-contextual-toolbar {
 			border-bottom: 0;
+			height: 100%;
+		}
+
+		// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
+		.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),
+			// but there is a -1px top-margin down the stack that affects this.
+			padding-top: math.div($header-height - $button-size-compact, 2) + 1;
+
+			// Match the height of other buttons in the header toolbar.
+			.components-button:not(.block-editor-block-mover-button) {
+				height: $button-size-compact;
+			}
 		}
 
 		&::after {
 			content: "";
 			width: $border-width;
-			margin-top: $grid-unit + $grid-unit-05;
-			margin-bottom: $grid-unit + $grid-unit-05;
+			height: $grid-unit-30;
 			background-color: $gray-300;
 			margin-left: $grid-unit;
 		}
@@ -77,9 +93,9 @@
 			&::after {
 				content: "";
 				width: $border-width;
-				margin-top: $grid-unit + $grid-unit-05;
-				margin-bottom: $grid-unit + $grid-unit-05;
+				height: $grid-unit-30;
 				background-color: $gray-300;
+				margin-top: $grid-unit-05;
 				margin-left: $grid-unit;
 			}
 
@@ -90,6 +106,22 @@
 			}
 		}
 
+		.block-editor-block-mover {
+			// Match the height of other buttons in the header toolbar.
+			&.is-horizontal .block-editor-block-mover-button {
+				height: $button-size-compact;
+				overflow: visible;
+			}
+
+			// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+			@include break-small() {
+				&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+					position: relative;
+					top: -10px;
+				}
+			}
+		}
+
 		&.is-collapsed {
 			display: none;
 		}
@@ -201,9 +233,9 @@
 		&::before {
 			content: "";
 			width: $border-width;
-			margin-top: $grid-unit-15;
-			margin-bottom: $grid-unit-15;
+			height: $grid-unit-30;
 			background-color: $gray-300;
+			margin-top: $grid-unit-05;
 			margin-left: $grid-unit;
 		}
 

diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -149,9 +149,9 @@ $header-toolbar-min-width: 335px;
 		&::before {
 			content: "";
 			width: $border-width;
-			margin-top: $grid-unit-15;
-			margin-bottom: $grid-unit-15;
+			height: $grid-unit-30;
 			background-color: $gray-300;
+			margin-top: $grid-unit-05;
 			margin-left: $grid-unit;
 		}
 
@@ -168,10 +168,36 @@ $header-toolbar-min-width: 335px;
 
 .has-fixed-toolbar {
 	.selected-block-tools-wrapper {
-		overflow-x: scroll;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		height: $header-height;
 
 		.block-editor-block-contextual-toolbar {
 			border-bottom: 0;
+			height: 100%;
+		}
+
+		// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
+		.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),
+			// but there is a -1px top-margin down the stack that affects this.
+			padding-top: math.div($header-height - $button-size-compact, 2) + 1;
+
+			// Match the height of other buttons in the header toolbar.
+			.components-button:not(.block-editor-block-mover-button) {
+				height: $button-size-compact;
+			}
+		}
+
+		&::after {
+			content: "";
+			width: $border-width;
+			height: $grid-unit-30;
+			background-color: $gray-300;
+			margin-left: $grid-unit;
 		}
 
 		// Modified group borders.
@@ -182,9 +208,9 @@ $header-toolbar-min-width: 335px;
 			&::after {
 				content: "";
 				width: $border-width;
-				margin-top: $grid-unit-15;
-				margin-bottom: $grid-unit-15;
+				height: $grid-unit-30;
 				background-color: $gray-300;
+				margin-top: $grid-unit-05;
 				margin-left: $grid-unit;
 			}
 
@@ -195,6 +221,22 @@ $header-toolbar-min-width: 335px;
 			}
 		}
 
+		.block-editor-block-mover {
+			// Match the height of other buttons in the header toolbar.
+			&.is-horizontal .block-editor-block-mover-button {
+				height: $button-size-compact;
+				overflow: visible;
+			}
+
+			// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+			@include break-small() {
+				&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+					position: relative;
+					top: -10px;
+				}
+			}
+		}
+
 		&.is-collapsed {
 			display: none;
 		}

diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
@@ -11,10 +11,28 @@
 	}
 
 	.selected-block-tools-wrapper {
-		overflow-x: hidden;
+		overflow: hidden;
+		display: flex;
+		align-items: center;
+		height: $header-height;
 
 		.block-editor-block-contextual-toolbar {
 			border-bottom: 0;
+			height: 100%;
+		}
+
+		// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
+		.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),
+			// but there is a -1px top-margin down the stack that affects this.
+			padding-top: math.div($header-height - $button-size-compact, 2) + 1;
+
+			// Match the height of other buttons in the header toolbar.
+			.components-button:not(.block-editor-block-mover-button) {
+				height: $button-size-compact;
+			}
 		}
 
 		// Modified group borders.
@@ -25,9 +43,9 @@
 			&::after {
 				content: "";
 				width: $border-width;
-				margin-top: $grid-unit + $grid-unit-05;
-				margin-bottom: $grid-unit + $grid-unit-05;
+				height: $grid-unit-30;
 				background-color: $gray-300;
+				margin-top: $grid-unit-05;
 				margin-left: $grid-unit;
 			}
 
@@ -37,6 +55,22 @@
 				}
 			}
 		}
+
+		.block-editor-block-mover {
+			// Match the height of other buttons in the header toolbar.
+			&.is-horizontal .block-editor-block-mover-button {
+				height: $button-size-compact;
+				overflow: visible;
+			}
+
+			// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+			@include break-small() {
+				&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+					position: relative;
+					top: -10px;
+				}
+			}
+		}
 	}
 }
 
@@ -45,7 +79,9 @@
 	align-items: center;
 	justify-content: center;
 	flex-shrink: 2;
+	padding-right: $grid-unit-10;
 	padding-left: $grid-unit-20;
+	overflow: hidden;
 }
 
 .edit-widgets-header__title {