Top toolbar to use same metrics as block toolbar (#61126)

* Clean up top toolbar to resemble block toolbar * undo `top: -$grid-unit` change * Formatting * Update CHANGELOG.md
WordPress · Apr 29, 2024 · a2a8ec9 · a2a8ec9
1 parent 872bef5
commit a2a8ec9
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -90,11 +90,6 @@
 		}
 	}
 
-	.block-editor-block-toolbar .components-toolbar-group,
-	.block-editor-block-toolbar .components-toolbar {
-		border-right-color: $gray-200;
-	}
-
 	& > .block-editor-block-toolbar {
 		flex-grow: initial;
 		width: initial;
@@ -109,14 +104,16 @@
 
 		// Parent selector dot divider
 		&::after {
-			content: "\00B7";
+			align-items: center;
+			background-color: $gray-900;
+			border-radius: 100%;
+			content: "";
+			display: inline-flex;
+			height: 2px;
 			position: absolute;
-			font-size: 16px;
 			right: 0;
-			height: $button-size-compact;
-			top: 0;
-			display: inline-flex;
-			align-items: center;
+			top: $grid-unit-20 - $border-width;
+			width: 2px;
 		}
 	}
 }

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -7,6 +7,7 @@
 -   `InputControl`: Add a password visibility toggle story ([#60898](https://github.com/WordPress/gutenberg/pull/60898)).
 -   `View`: Fix prop types ([#60919](https://github.com/WordPress/gutenberg/pull/60919)).
 -   `Placeholder`: Unify appearance across. ([#59275](https://github.com/WordPress/gutenberg/pull/59275)).
+-   `Toolbar`: Adjust top toolbar to use same metrics as block toolbar ([#61126](https://github.com/WordPress/gutenberg/pull/61126)).
 
 ### Bug Fix
 

diff --git a/packages/components/src/toolbar/toolbar/style.scss b/packages/components/src/toolbar/toolbar/style.scss
@@ -84,8 +84,8 @@
 		// This needs specificity.
 		&.has-icon.has-icon {
 			// Reduce the default padding when a button only has an icon.
-			padding-left: $grid-unit-15;
-			padding-right: $grid-unit-15;
+			padding-left: $grid-unit-10;
+			padding-right: $grid-unit-10;
 			min-width: $block-toolbar-height;
 		}
 

diff --git a/packages/editor/src/components/collapsible-block-toolbar/style.scss b/packages/editor/src/components/collapsible-block-toolbar/style.scss
@@ -28,21 +28,23 @@
 		width: $border-width;
 		height: $grid-unit-30;
 		background-color: $gray-300;
-		margin-left: $grid-unit;
+		margin-right: $grid-unit - $border-width;
 	}
 
 	// Modified group borders.
 	.components-toolbar-group,
 	.components-toolbar {
 		border-right: none;
+		position: relative;
 
 		&::after {
 			content: "";
 			width: $border-width;
 			height: $grid-unit-30;
 			background-color: $gray-300;
-			margin-top: $grid-unit-05;
-			margin-left: $grid-unit;
+			top: $grid-unit-05;
+			position: absolute;
+			right: -$border-width;
 		}
 
 		& .components-toolbar-group.components-toolbar-group {