From 7fce392ac694f4dc66ba6300f7b3356e9cdc2123 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 12 Jan 2024 09:30:59 +0100
Subject: [PATCH] Restore visual separator between mover buttons when show
 button label is on (#57640)

* Restore visual separator between mover buttons when show button labels is on.

* Style block movers separator for Top toolbar.

* Reuse existing CSS selector.

* Improve horizontal separator positioning.
---
 .../src/components/block-toolbar/style.scss   | 31 +++++++++++--------
 .../src/components/header/style.scss          | 17 +++++++---
 .../components/header-edit-mode/style.scss    | 20 +++++++++---
 .../src/components/header/style.scss          |  2 +-
 4 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 85020cea2aa23..fc18dba7cc2cf 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -203,6 +203,24 @@
 
 	.block-editor-block-mover .block-editor-block-mover__move-button-container {
 		width: auto;
+
+		@include break-small() {
+			position: relative;
+
+			&::before {
+				content: "";
+				height: $border-width;
+				width: 100%;
+				background: $gray-900;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				// With Top toolbar enabled, this separator has a smaller width. Translating the
+				// X axis allows to make the separator always centered regardless of its width.
+				transform: translate(-50%, 0);
+				margin-top: -$border-width * 0.5;
+			}
+		}
 	}
 
 	.block-editor-block-mover.is-horizontal {
@@ -231,19 +249,6 @@
 		padding-right: $grid-unit-15;
 	}
 
-	@include break-small() {
-		// Specificity override for https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L69
-		.is-up-button.is-up-button.is-up-button {
-			margin-right: 0;
-			border-radius: 0;
-			order: 1;
-		}
-
-		.is-down-button.is-down-button.is-down-button {
-			order: 2;
-		}
-	}
-
 	.block-editor-block-contextual-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
 		width: auto;
 	}
diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss
index a3cf623a2d1aa..84e8328393d7a 100644
--- a/packages/edit-post/src/components/header/style.scss
+++ b/packages/edit-post/src/components/header/style.scss
@@ -69,7 +69,7 @@
 			margin-left: $grid-unit;
 		}
 
-		// Modified group borders
+		// Modified group borders.
 		.components-toolbar-group,
 		.components-toolbar {
 			border-right: none;
@@ -194,18 +194,27 @@
 }
 
 .show-icon-labels {
-
 	.edit-post-header__toolbar .block-editor-block-mover {
+		// Modified group borders.
 		border-left: none;
 
 		&::before {
 			content: "";
 			width: $border-width;
-			margin-top: $grid-unit + $grid-unit-05;
-			margin-bottom: $grid-unit + $grid-unit-05;
+			margin-top: $grid-unit-15;
+			margin-bottom: $grid-unit-15;
 			background-color: $gray-300;
 			margin-left: $grid-unit;
 		}
+
+		// Modified block movers horizontal separator.
+		.block-editor-block-mover__move-button-container {
+			&::before {
+				width: calc(100% - #{$grid-unit-30});
+				background: $gray-300;
+				left: calc(50% + 1px);
+			}
+		}
 	}
 }
 
diff --git a/packages/edit-site/src/components/header-edit-mode/style.scss b/packages/edit-site/src/components/header-edit-mode/style.scss
index 44b762a667bb7..710c20b4e15f1 100644
--- a/packages/edit-site/src/components/header-edit-mode/style.scss
+++ b/packages/edit-site/src/components/header-edit-mode/style.scss
@@ -143,16 +143,26 @@ $header-toolbar-min-width: 335px;
 	}
 
 	.block-editor-block-mover {
+		// Modified group borders.
 		border-left: none;
 
 		&::before {
 			content: "";
 			width: $border-width;
-			margin-top: $grid-unit + $grid-unit-05;
-			margin-bottom: $grid-unit + $grid-unit-05;
+			margin-top: $grid-unit-15;
+			margin-bottom: $grid-unit-15;
 			background-color: $gray-300;
 			margin-left: $grid-unit;
 		}
+
+		// Modified block movers horizontal separator.
+		.block-editor-block-mover__move-button-container {
+			&::before {
+				width: calc(100% - #{$grid-unit-30});
+				background: $gray-300;
+				left: calc(50% + 1px);
+			}
+		}
 	}
 }
 
@@ -164,7 +174,7 @@ $header-toolbar-min-width: 335px;
 			border-bottom: 0;
 		}
 
-		// Modified group borders
+		// Modified group borders.
 		.components-toolbar-group,
 		.components-toolbar {
 			border-right: none;
@@ -172,8 +182,8 @@ $header-toolbar-min-width: 335px;
 			&::after {
 				content: "";
 				width: $border-width;
-				margin-top: $grid-unit + $grid-unit-05;
-				margin-bottom: $grid-unit + $grid-unit-05;
+				margin-top: $grid-unit-15;
+				margin-bottom: $grid-unit-15;
 				background-color: $gray-300;
 				margin-left: $grid-unit;
 			}
diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss
index c5bdc2561d5d5..2a3e3509cb412 100644
--- a/packages/edit-widgets/src/components/header/style.scss
+++ b/packages/edit-widgets/src/components/header/style.scss
@@ -17,7 +17,7 @@
 			border-bottom: 0;
 		}
 
-		// Modified group borders
+		// Modified group borders.
 		.components-toolbar-group,
 		.components-toolbar {
 			border-right: none;