Try sibling inserter tweaks (#7220)

* 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.

* Remove the line that appeared on hover.

Since it only appears on hover, it doesn't help discovery, and although the point is to show where you will insert things, it adds clutter next to the hovered outlines.

* Fix sibling inserter in nested contexts.

* Make plus blue.

* Hide the outline when we click the in between inserter

editor/components/block-list/block.js

@@ -490,6 +490,7 @@ export class BlockListBlock extends Component {
 						rootUID={ rootUID }
 						layout={ layout }
 						canShowInserter={ canShowInBetweenInserter }
+						onInsert={ this.hideHoverEffects }
 					/>
 				) }
 				<BlockDropZone

editor/components/block-list/insertion-point.js

@@ -45,6 +45,9 @@ class BlockInsertionPoint extends Component {
 		props.insertDefaultBlock( { layout }, rootUID, index );
 		props.startTyping();
 		this.onBlurInserter();
+		if ( props.onInsert ) {
+			this.props.onInsert();
+		}
 	}
 
 	render() {

editor/components/block-list/style.scss

@@ -682,41 +682,44 @@
 	height: $block-padding * 2; // Matches the whole empty space between two blocks
 	justify-content: center;
 
-	// Show a clickable plus
+	// Show a clickable plus.
 	.editor-block-list__insertion-point-button {
 		margin-top: -4px;
 		border-radius: 50%;
-		color: $dark-gray-100;
+		color: $blue-medium-focus;
 		background: $white;
 		height: $block-padding * 2 + 8px;
 		width: $block-padding * 2 + 8px;
 
 		&:not(:disabled):not([aria-disabled="true"]):hover {
 			box-shadow: none;
 		}
-
-	}
-
-	// Show a line indicator when hovering, but this is unclickable
-	&:before {
-		position: absolute;
-		top: calc( 50% - #{ $border-width } );
-		height: 2px;
-		left: 0;
-		right: 0;
-		background: $dark-gray-100;
-		content: '';
 	}
 
-	// Hide both the line and button until hovered
+	// Hide both the button until hovered.
 	opacity: 0;
 	transition: opacity 0.1s linear 0.1s;
 
-	&:hover, &.is-visible {
+	&:hover,
+	&.is-visible {
 		opacity: 1;
 	}
 }
 
+// Don't show the sibling inserter before the selected block.
+.edit-post-layout:not( .has-fixed-toolbar ) {
+	// The child selector is necessary for this to work properly in nested contexts.
+	.is-selected > .editor-block-list__insertion-point > .editor-block-list__insertion-point-inserter {
+		opacity: 0;
+		pointer-events: none;
+
+		&.is-visible {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+}
+
 .editor-block-list__block {
 	> .editor-block-list__insertion-point {
 		position: absolute;