Fix fixed block toolbar positioning (#49990)

* use editor-left mixin to fix and simplify fixed toolbar positioning * Fix comment Co-authored-by: Joen A. <[email protected]> --------- Co-authored-by: Joen A. <[email protected]>
WordPress · Apr 21, 2023 · a7da188 · a7da188
1 parent bd432f1
commit a7da188
Showing 1 changed file with 23 additions and 88 deletions.
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
@@ -89,6 +89,9 @@
  * Block Toolbar when contextual.
  */
 
+// Base left position for the toolbar when fixed.
+@include editor-left(".block-editor-block-contextual-toolbar.is-fixed");
+
 .block-editor-block-contextual-toolbar {
 	// Block UI appearance.
 	display: inline-flex;
@@ -104,7 +107,6 @@
 	&.is-fixed {
 		position: sticky;
 		top: 0;
-		left: 0;
 		z-index: z-index(".block-editor-block-popover");
 		display: block;
 		width: 100%;
@@ -121,14 +123,15 @@
 
 	// on desktop and tablet viewports the toolbar is fixed
 	// on top of interface header
+
 	@include break-medium() {
 		&.is-fixed {
 
+			// leave room for block inserter
+			margin-left: $grid-unit-80;
 			// position on top of interface header
 			position: fixed;
-			top: $grid-unit-50 - 2;
-			// leave room for block inserter
-			left: $grid-unit-80 + $grid-unit-40;
+			top: $admin-bar-height + $grid-unit;
 			// Don't fill up when empty
 			min-height: initial;
 			// remove the border
@@ -137,15 +140,17 @@
 			display: flex;
 
 			&.is-collapsed {
-				left: $grid-unit-10 * 32;
+				width: initial;
+				margin-left: $grid-unit-80 * 3 + $grid-unit-30;
 			}
 
 			.is-fullscreen-mode & {
-				top: $grid-unit - 2;
 				// leave room for block inserter
-				left: $grid-unit-80 + $grid-unit-70;
+				margin-left: $grid-unit-80 + $grid-unit-70;
+				top: $grid-unit;
 				&.is-collapsed {
-					left: $grid-unit-10 * 35;
+					width: initial;
+					margin-left: $grid-unit-80 * 4 + $grid-unit-30;
 				}
 			}
 
@@ -183,16 +188,21 @@
 			}
 
 			.show-icon-labels & {
-				left: $grid-unit-80 + $grid-unit-50;
+
+				margin-left: $grid-unit-80;
 
 				&.is-collapsed {
-					left: $grid-unit-10 * 56;
+					margin-left: $grid-unit-80 * 6;
 				}
 
 				.is-fullscreen-mode & {
-					left: $grid-unit-80 + $grid-unit-80;
+					margin-left: $grid-unit-80 + $grid-unit-80;
+					&.is-collapsed {
+						margin-left: $grid-unit-80 * 7;
+					}
 				}
 
+
 				.block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
 					left: 0;
 				}
@@ -250,35 +260,7 @@
 	// except for the inserter on the left
 	@include break-medium() {
 		&.is-fixed {
-
-			left: 28 * $grid-unit;
-			width: calc(100% - #{28 * $grid-unit});
-
-			&.is-collapsed {
-				// when collapsed minimize area
-				width: initial;
-				left: $grid-unit * 48;
-			}
-
-			// collapsed wp admin sidebar when not in full screen mode
-			.auto-fold & {
-				left: $grid-unit-80 + $grid-unit-40;
-				width: calc(100% - #{$grid-unit-80 + $grid-unit-40});
-
-				&.is-collapsed {
-					left: $grid-unit * 32;
-				}
-			}
-
-			.is-fullscreen-mode & {
-				width: calc(100% - #{$grid-unit-80 + $grid-unit-70});
-				left: $grid-unit-80 + $grid-unit-70;
-				&.is-collapsed {
-					left: $grid-unit * 36;
-					// when collapsed minimize area
-					width: initial;
-				}
-			}
+			width: 100%;
 		}
 	}
 
@@ -287,54 +269,7 @@
 	// for the block inserter the publish button
 	@include break-large() {
 		&.is-fixed {
-
-			.auto-fold & {
-				// Don't fill the whole header, minimize area
-				width: initial;
-
-				// leave room for block inserter and the dashboard navigation
-				left: $grid-unit-80 + $grid-unit-40 + ( $grid-unit-80 * 2 );
-
-				&.is-collapsed {
-					// when collapsed minimize area
-					width: initial;
-					left: $grid-unit * 48;
-				}
-
-			}
-
-			// collapsed wp admin sidebar when not in full screen mode
-			.auto-fold.folded & {
-				width: initial;
-				left: $grid-unit-80 + $grid-unit-40;
-
-				&.is-collapsed {
-					// when collapsed minimize area
-					width: initial;
-					left: $grid-unit * 32;
-				}
-
-			}
-
-			.auto-fold.is-fullscreen-mode & {
-				// Don't fill the whole header, minimize area
-				width: initial;
-				left: $grid-unit-80 + $grid-unit-70;
-
-				&.is-collapsed {
-					// when collapsed minimize area
-					width: initial;
-					left: $grid-unit * 36;
-				}
-			}
-
-			.auto-fold.is-fullscreen-mode .show-icon-labels & {
-				left: $grid-unit-80 * 2;
-				&.is-collapsed {
-					left: $grid-unit * 48;
-				}
-			}
-
+			width: initial;
 		}
 	}