From c4b057b1e892b5fb582fa89dc1c0d9f6d94b17b7 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Fri, 27 Sep 2019 10:27:28 +0200
Subject: [PATCH] Try: Show horizontal movers for Social Links.

This is more of a proof of concept and experiment, than it is final PR. So *do not merge as is*.

We might find that we like this, in which case it might need a little polish, and _then_ we can ship it. But for now this PR has been created to help further discussion in #16637.

This PR does the following:

- Starts with Social Links, because that is the first block to "absorb child block UI", and therefore a good test-bed for this.
- Additionally, Social Links has been merged with _no mover controls_. This PR resurfaces them.
- It restyles, positions, and rotates the mover control to be horizontal.
- It restyles and positions the ellipsis menu.

The overall pattern it mimics, is that of gallery items, which also have horizontal movers, even though those are not yet technically child blocks.

Your feedback is much apprecated.
---
 .../src/components/block-mover/style.scss     |  1 -
 .../src/social-links/editor.scss              | 80 +++++++++++++++++--
 2 files changed, 75 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index a506b3282fad4..b773fd0204191 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -1,7 +1,6 @@
 .block-editor-block-mover {
 
 	@include break-small() {
-		min-height: $empty-paragraph-height;
 		opacity: 0;
 		background: $white;
 		border: 1px solid $dark-opacity-light-800;
diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
index 9996e30b4e12a..d9cd4949e8a55 100644
--- a/packages/block-library/src/social-links/editor.scss
+++ b/packages/block-library/src/social-links/editor.scss
@@ -36,9 +36,7 @@
 
 	// 4. Minimize the block outlines.
 	.wp-block-social-links > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block > .block-editor-block-list__block-edit::before {
-		border-right: none;
-		border-top: none;
-		border-bottom: none;
+		border: none;
 	}
 
 	.wp-block-social-links > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block.is-hovered:not(.is-navigate-mode) > .block-editor-block-list__block-edit::before {
@@ -59,13 +57,85 @@
 	}
 
 	// Hide the breadcrumb.
-	// Hide the mover.
 	// Hide the sibling inserter.
+	// Hide the block type indicator.
 	.wp-block-social-links .block-editor-block-list__insertion-point,
 	.wp-block-social-links .block-editor-block-list__breadcrumb,
-	.wp-block-social-links .block-editor-block-mover.block-editor-block-mover { // Needs specificity.
+	.wp-block-social-links .block-editor-block-toolbar > .components-toolbar:first-child {
 		display: none;
 	}
+
+	// Change the style of selected child block to be more like gallery.
+	// @todo, if we like this it should not be CSS overrides like this, it should probably be a prop or something.
+	// Hide the drag handle.
+	// Hide the block type indicator.
+	.wp-block-social-links .block-editor-block-mover__control-drag-handle,
+	.wp-block-social-links .block-editor-block-toolbar > .components-toolbar:first-child {
+		display: none;
+	}
+
+	// Make block movers horizontal.
+	.wp-block-social-links .wp-block.is-selected .block-editor-block-mover {
+		margin-top: 0;
+		padding-right: 0;
+		width: 48px + 2px;
+		left: -70px; // @todo: replace these two with variables.
+		display: flex;
+
+		.block-editor-block-mover__control {
+			width: 24px;
+			height: 24px;
+
+			svg {
+				width: 24px;
+				transform: rotate(-90deg);
+				padding: 3px;
+			}
+		}
+	}
+
+	// Move ellipsis to the right.
+	.wp-block-social-links .wp-block.is-selected .block-editor-block-contextual-toolbar {
+		position: absolute;
+		right: 8px;
+		transform: none;
+
+		.block-editor-block-toolbar {
+			box-shadow: none;
+			top: 0;
+			left: 0;
+
+			.components-toolbar {
+				background: $white;
+				border: 1px solid $dark-opacity-light-800;
+				border-radius: $radius-round-rectangle;
+			}
+
+			.block-editor-block-settings-menu {
+				padding: 0;
+			}
+
+			.block-editor-block-settings-menu .components-dropdown-menu__toggle {
+				border: none;
+				padding: 2px;
+				border-radius: $radius-round-rectangle;
+
+				&:hover {
+					box-shadow: none;
+				}
+			}
+		}
+	}
+
+	// Position mover and ellipsis the same, vertically.
+	.wp-block-social-links .wp-block.is-selected .block-editor-block-mover,
+	.wp-block-social-links .wp-block.is-selected .block-editor-block-contextual-toolbar {
+		top: 50%;
+	}
+	.wp-block-social-links .wp-block.is-selected .block-editor-block-contextual-toolbar .block-editor-block-toolbar,
+	.wp-block-social-links .wp-block.is-selected .block-editor-block-mover {
+		transform: translateY(-50%);
+	}
 }
 
 // Polish the Appender.