improve the responsiveness of the fixed block toolbar

WordPress · Jun 30, 2023 · a3b27fe · a3b27fe
1 parent 259d3f1
commit a3b27fe
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
@@ -143,14 +143,18 @@
 			// has to be flex for collapse button to fit
 			display: flex;
 
+			//hide overflow and scroll
+			overflow: hidden;
+			overflow-x: scroll;
+
 			&.is-collapsed {
 				width: initial;
 			}
 
 			.is-fullscreen-mode & {
 				// leave room for block inserter, undo and redo, list view
 				// and some margin left
-				margin-left: $grid-unit-80 * 4 - 2 * $grid-unit + $grid-unit-05;
+				margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
 				top: $grid-unit - $border-width;
 				&.is-collapsed {
 					width: initial;
@@ -170,7 +174,7 @@
 					margin-right: 0;
 					background-color: $gray-300;
 					position: relative;
-					left: -$grid-unit-05;
+					left: math.div(-$grid-unit-05, 2);
 					top: -1px;
 				}
 			}
@@ -210,6 +214,7 @@
 				border: none;
 
 				.show-icon-labels & {
+					width: $grid-unit-80 * 4;
 					.components-button.has-icon {
 						// Hide the button icons when labels are set to display...
 						svg {
@@ -231,7 +236,7 @@
 					margin-bottom: $grid-unit + $grid-unit-05;
 					background-color: $gray-300;
 					position: relative;
-					left: -10px;
+					left: -8px;
 					height: 3 * $grid-unit;
 					top: -1px;
 				}
@@ -321,7 +326,9 @@
 	// for the block inserter the publish button
 	@include break-large() {
 		&.is-fixed {
-			width: initial;
+			// the combined with of the tools at the right of the header and the margin left
+			// of the toolbar which includes four buttons
+			width: calc(100% - 240px - #{4 * $grid-unit-80});
 		}
 	}
 

diff --git a/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss b/packages/edit-site/src/components/header-edit-mode/document-actions/style.scss
@@ -16,6 +16,14 @@
 		color: currentColor;
 		background: $gray-200;
 	}
+
+	@include break-medium() {
+		width: 50%;
+	}
+
+	@include break-large() {
+		width: min(100%, 450px);
+	}
 }
 
 .edit-site-document-actions__command {

diff --git a/packages/edit-site/src/components/layout/style.scss b/packages/edit-site/src/components/layout/style.scss
@@ -4,18 +4,6 @@
 	color: $gray-400;
 	display: flex;
 	flex-direction: column;
-
-	// Expand the fixed block toolbar to cover the document title control.
-	.block-editor-block-contextual-toolbar {
-		@include break-medium() {
-			&.is-fixed {
-				// the combined with of the tools at the right of the header and the margin left
-				// of the toolbar which includes four buttons
-				width: calc(100% - 240px - #{4 * $grid-unit-80});
-			}
-		}
-	}
-
 }
 
 .edit-site-layout__hub {