From 113dc6fcdfef9efb2d26cb0201a85b6aca29b29e Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Fri, 8 Jun 2018 09:52:34 +0200
Subject: [PATCH] Try sibling inserter tweaks

This PR is based on feedback in #7168. It does this:

- It doesn't show the sibling inserter when hovering before the selected block.
- It shows the separator line when hovering the plus, never before.

This PR is a "try", and if we like it we'd want to make a few further improvements. Like we might actually want to allow showing the sibling inserter _before_ the selected block, if the user has chosen to dock the block toolbar to the top.

We might also want to look at improving it further by fading out hover outlines if you're hovering the sibling inserter. We'd need someone like @aduth or @youknowriad's help here.
---
 .../components/block-list/insertion-point.js  |  1 +
 editor/components/block-list/style.scss       | 31 ++++++++++++++-----
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/editor/components/block-list/insertion-point.js b/editor/components/block-list/insertion-point.js
index f205d6812dd68..fdea1af4b609f 100644
--- a/editor/components/block-list/insertion-point.js
+++ b/editor/components/block-list/insertion-point.js
@@ -64,6 +64,7 @@ class BlockInsertionPoint extends Component {
 							onFocus={ this.onFocusInserter }
 							onBlur={ this.onBlurInserter }
 						/>
+						<div class="editor-block-list__insertion-point-sibling-indicator"></div>
 					</div>
 				) }
 			</div>
diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
index 2f3e02146ef93..0a7f960aa041f 100644
--- a/editor/components/block-list/style.scss
+++ b/editor/components/block-list/style.scss
@@ -659,7 +659,12 @@
 	height: $block-padding * 2; // Matches the whole empty space between two blocks
 	justify-content: center;
 
-	// Show a clickable plus
+	// Don't show the sibling inserter before the selected block.
+	.is-selected & {
+		display: none;
+	}
+
+	// Show a clickable plus.
 	.editor-block-list__insertion-point-button {
 		margin-top: -4px;
 		border-radius: 50%;
@@ -672,24 +677,34 @@
 			box-shadow: none;
 		}
 
+		// Show the sibling inserter indicator when hovering the plus button.
+		&:hover + .editor-block-list__insertion-point-sibling-indicator {
+			left: $block-padding;
+			right: $block-padding;
+			opacity: 1;
+		}
 	}
 
-	// Show a line indicator when hovering, but this is unclickable
-	&:before {
+	// This is the indicator shown when using the Sibling Inserter.
+	.editor-block-list__insertion-point-sibling-indicator {
+		transition: all 0.1s ease-out 0.1s;
 		position: absolute;
+		z-index: -1;
 		top: calc( 50% - 1px);
 		height: 2px;
-		left: 0;
-		right: 0;
-		background: $dark-gray-100;
+		left: 50%;
+		right: 50%;
+		background: $dark-gray-500;
 		content: '';
+		opacity: 0;
 	}
 
-	// Hide both the line and button until hovered
+	// Hide both the line and button until hovered.
 	opacity: 0;
 	transition: opacity 0.1s linear 0.1s;
 
-	&:hover, &.is-visible {
+	&:hover,
+	&.is-visible {
 		opacity: 1;
 	}
 }