diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss
index b21bff104a6ca7..b8f00482e84af7 100644
--- a/assets/stylesheets/_z-index.scss
+++ b/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.
diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js
index 82e7154b76995b..fc795752580112 100644
--- a/packages/editor/src/components/block-list/block.js
+++ b/packages/editor/src/components/block-list/block.js
@@ -519,25 +519,25 @@ export class BlockListBlock extends Component {
clientId={ clientId }
rootClientId={ rootClientId }
/>
- { shouldRenderMovers && (
-
- ) }
{ isFirstMultiSelected && (
) }
+ { shouldRenderMovers && (
+
+ ) }
{ shouldShowBreadcrumb && (
.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;
+ }
+ }
}
diff --git a/packages/editor/src/components/block-mover/style.scss b/packages/editor/src/components/block-mover/style.scss
index 8c6a0b6e4136cb..12ebccbe0035e4 100644
--- a/packages/editor/src/components/block-mover/style.scss
+++ b/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;