Skip to content

Commit

Permalink
Try: Restore block mover for floats. (#12758)
Browse files Browse the repository at this point in the history
* Try: Restore block mover for floats.

This PR hopes to fix #12736, #11424, #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.
  • Loading branch information
jasmussen authored and youknowriad committed Mar 6, 2019
1 parent 7dd081a commit fa0c11b
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 39 deletions.
8 changes: 5 additions & 3 deletions assets/stylesheets/_z-index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.
Expand Down
30 changes: 15 additions & 15 deletions packages/editor/src/components/block-list/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down
74 changes: 53 additions & 21 deletions packages/editor/src/components/block-list/style.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
}
Expand All @@ -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;

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;

Expand All @@ -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;
}

Expand All @@ -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;
}
}
}


Expand Down
2 changes: 2 additions & 0 deletions packages/editor/src/components/block-mover/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit fa0c11b

Please sign in to comment.