Try: Restore block mover for floats. (WordPress#12758)

* Try: Restore block mover for floats.

This PR hopes to fix WordPress#12736, WordPress#11424, WordPress#10300.

Currently we hide the block mover for any floated block. We do this because if you have a left floated image followed by a paragraph, the block mover for the image would overlap exactly with the block mover for the subsequent paragraph block. This would cause moving a float to be fiddly and virtually impossible as the hover states for the two conflicted.

This PR is an experiment to mitigate, or possibly fix that. It's a try branch because it is not necessarily a solid fix. What this PR does:

- It makes it so the block mover cannot be invoked when only hovering a float, but when the float is selected they are permanently visible.
- It changes some z-indexes so floats always have a higher z-index than not a float.
- It changes the footprint of the side-UI container to "cover up" the underlying paragraph block, so it won't invoke unlesss you move the mouse below the footprint.

This is best explained in some GIFs.

The reason this is a "Try" branch is that when you move the mouse over the adjacent paragraph, the block mover is show as overlapping the selected floats block mover. But due to the rearranging of z-indexes, at least this is only a visual issue. A click on the floats block mover will still work as intended.

Why can't the float have on-hover block movers like every other block, you ask? Picture again the test-case of a left floated image followed by a paragraph of text. In this case, hovering over the image would show a block mover that would visually appear to be that of the paragraph block. By showing it when the float is selected, the context is clear.

We could experiment with not showing the hover block mover for float-adjacent blocks when hovered, but this isn't feasible because you might have a float, and then a block that clears this float, in which case the rule would break down.

Lay your thoughts on me.

* Address feedback, and improve dragging edgecase.

This addresses comment feedback by @ZebulanStanphill, thanks, and it also hides the block mover from the ghost when you are dragging.

* Add borders around floats.

Author: jasmussen

assets/stylesheets/_z-index.scss

@@ -5,7 +5,6 @@
 $z-layers: (
 	".editor-block-list__block-edit::before": 0,
 	".editor-block-switcher__arrow": 1,
-	".editor-block-list__block {core/image aligned left or right}": 20,
 	".editor-block-list__block {core/image aligned wide or fullwide}": 20,
 	".block-library-classic__toolbar": 10,
 	".editor-block-list__layout .reusable-block-indicator": 1,
@@ -48,9 +47,12 @@ $z-layers: (
 	".components-drop-zone": 100,
 	".components-drop-zone__content": 110,
 
-	// Block controls, particularly in nested contexts, floats aside block and
+	// The block mover, particularly in nested contexts,
 	// should overlap most block content.
-	".editor-block-list__block.is-{selected,hovered} .editor-block-{settings-menu,mover}": 80,
+	".editor-block-list__block.is-{selected,hovered} .editor-block-mover": 80,
+
+	// The block mover for floats should overlap the controls of adjacent blocks.
+	".editor-block-list__block {core/image aligned left or right}": 81,
 
 	// Small screen inner blocks overlay must be displayed above drop zone,
 	// settings menu, and movers.

packages/editor/src/components/block-list/block.js

@@ -519,25 +519,25 @@ export class BlockListBlock extends Component {
 								clientId={ clientId }
 								rootClientId={ rootClientId }
 							/>
-							{ shouldRenderMovers && (
-								<BlockMover
-									clientIds={ clientId }
-									blockElementId={ blockElementId }
-									isFirst={ isFirst }
-									isLast={ isLast }
-									isHidden={ ! ( isHovered || isSelected ) || hoverArea !== 'left' }
-									isDraggable={
-										isDraggable !== false &&
-										( ! isPartOfMultiSelection && isMovable )
-									}
-									onDragStart={ this.onDragStart }
-									onDragEnd={ this.onDragEnd }
-								/>
-							) }
 							{ isFirstMultiSelected && (
 								<BlockMultiControls rootClientId={ rootClientId } />
 							) }
 							<div className="editor-block-list__block-edit">
+								{ shouldRenderMovers && (
+									<BlockMover
+										clientIds={ clientId }
+										blockElementId={ blockElementId }
+										isFirst={ isFirst }
+										isLast={ isLast }
+										isHidden={ ! ( isHovered || isSelected ) || hoverArea !== 'left' }
+										isDraggable={
+											isDraggable !== false &&
+											( ! isPartOfMultiSelection && isMovable )
+										}
+										onDragStart={ this.onDragStart }
+										onDragEnd={ this.onDragEnd }
+									/>
+								) }
 								{ shouldShowBreadcrumb && (
 									<BlockBreadcrumb
 										clientId={ clientId }

packages/editor/src/components/block-list/style.scss

@@ -1,8 +1,8 @@
 .editor-block-list__layout .components-draggable__clone {
-	// Hide the Block UI when dragging the block
-	// This ensures the page scroll properly (no sticky elements)
+	// Hide the Block UI when dragging the block.
+	// This ensures the page scroll properly (no sticky elements).
 	.editor-block-contextual-toolbar {
-		// I think important is fine here to avoid over complexing the selector
+		// It's probably okay to use !important here to avoid over-complicating the selector.
 		display: none !important;
 	}
 }
@@ -127,7 +127,7 @@
 		}
 	}
 
-	// Selected style
+	// Selected style.
 	&.is-selected > .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
 		outline: $border-width solid $dark-opacity-light-500;
@@ -137,12 +137,12 @@
 		}
 	}
 
-	// Hover style
+	// Hover style.
 	&.is-hovered > .editor-block-list__block-edit::before {
 		outline: $border-width solid theme(outlines);
 	}
 
-	// Spotlight mode
+	// Spotlight mode.
 	&.is-focus-mode:not(.is-multi-selected) {
 		opacity: 0.5;
 		transition: opacity 0.1s linear;
@@ -168,7 +168,7 @@
 		background-color: $blue-medium-highlight;
 	}
 
-	// selection style for multiple blocks
+	// Selection style for multiple blocks.
 	&.is-multi-selected *::selection {
 		background-color: transparent;
 	}
@@ -179,7 +179,7 @@
 		// Use opacity to work in various editor styles.
 		mix-blend-mode: multiply;
 
-		// Collapse extra vertical padding on selection
+		// Collapse extra vertical padding on selection.
 		top: -$block-padding;
 		bottom: -$block-padding;
 
@@ -293,12 +293,6 @@
 			margin-bottom: $border-width;
 		}
 
-		// Hide all additional UI on floats.
-		.editor-block-mover,
-		.editor-block-list__block-mobile-toolbar {
-			display: none;
-		}
-
 		// Position toolbar better on mobile.
 		.editor-block-contextual-toolbar {
 			width: auto;
@@ -506,7 +500,8 @@
 .editor-block-list__block {
 
 	// Left and right block settings and mover.
-	> .editor-block-mover {
+	&.is-multi-selected > .editor-block-mover,
+	> .editor-block-list__block-edit > .editor-block-mover {
 		position: absolute;
 		width: $block-side-ui-width + $block-side-ui-clearance;
 
@@ -516,7 +511,8 @@
 	}
 
 	// Position depending on whether selected or not.
-	> .editor-block-mover {
+	&.is-multi-selected > .editor-block-mover,
+	> .editor-block-list__block-edit > .editor-block-mover {
 		top: -$block-padding - $border-width;
 	}
 
@@ -526,24 +522,60 @@
 		&.is-selected,
 		&.is-hovered {
 			.editor-block-mover {
-				z-index: z-index(".editor-block-list__block.is-{selected,hovered} .editor-block-{settings-menu,mover}");
+				z-index: z-index(".editor-block-list__block.is-{selected,hovered} .editor-block-mover");
 			}
 		}
 	}
 
 	// Left side UI.
-	> .editor-block-mover {
+	&.is-multi-selected > .editor-block-mover,
+	> .editor-block-list__block-edit > .editor-block-mover {
 		padding-right: $block-side-ui-clearance;
 
-		// Position for top level blocks
-		left: -$block-side-ui-width - $block-side-ui-clearance;
+		// Position for top level blocks.
+		left: -$block-side-ui-width - $block-side-ui-clearance - $block-padding - $border-width;
 
-		// Mobile
+		// Hide on mobile, as mobile has a separate solution.
 		display: none;
 		@include break-small() {
 			display: block;
 		}
 	}
+
+	&.is-multi-selected > .editor-block-mover {
+		left: -$block-side-ui-width - $block-side-ui-clearance;
+	}
+
+	// For floats, show block mover when block is selected, and never on hover.
+	&[data-align="left"],
+	&[data-align="right"] {
+		// Show always when the block is selected.
+		&.is-selected > .editor-block-list__block-edit > .editor-block-mover {
+			// Don't show on mobile, allow the special mobile toolbar to work there.
+			display: none;
+			@include break-small() {
+				display: block;
+				opacity: 1;
+				animation: none;
+
+				// Make wider and taller to make "safe" hover area bigger.
+				// The intent is to make it less likely that you hover float-adjacent
+				// blocks that visually appear below the block.
+				width: $block-side-ui-width + $block-side-ui-clearance + $block-padding + $border-width;
+				height: auto;
+				padding-bottom: $block-padding;
+
+				// Unset the negative top margin, or it might overlap the block toolbar.
+				margin-top: 0;
+			}
+		}
+
+		// Don't show on hover, or on the "ghost" when dragging.
+		&.is-hovered > .editor-block-list__block-edit > .editor-block-mover,
+		&.is-dragging > .editor-block-list__block-edit > .editor-block-mover {
+			display: none;
+		}
+	}
 }
 
 

packages/editor/src/components/block-mover/style.scss

@@ -87,6 +87,8 @@
 .editor-block-mover__control-drag-handle:not(:disabled):not([aria-disabled="true"]):not(.is-default),
 .editor-block-mover__control {
 	@include break-small() {
+		.editor-block-list__layout [data-align="right"] &,
+		.editor-block-list__layout [data-align="left"] &,
 		.editor-block-list__layout .editor-block-list__layout & {
 			background: $white;
 			box-shadow: inset 0 0 0 1px $light-gray-500;