Skip to content

Commit

Permalink
Fix movers in full-wide. (#21097)
Browse files Browse the repository at this point in the history
Fixes #20451. Props @lgersman for advice.

The mover control did not work for full-wide images. I'm honestly surprised it worked in wide and normal settings, because the z-index was -1 meaning it shouldn't be. I suspect it's because the layout canvas has padding left and right that somehow interferes with things here, but couldn't verify.

However the negative z index wasn't a good fix in the first place. The reason it was there, was to make sure that when the mover control animates out, it appears to be coming from "beneath" the block toolbar. The z-index put it below the entire block toolbar, which is the container that has a background color.

This PR changes things so the mover control does not have a z-index, but the switcher button has been elevated, and been given a white background color to cover it.
  • Loading branch information
jasmussen authored Mar 27, 2020
1 parent 712dbfd commit eb2138c
Showing 1 changed file with 10 additions and 1 deletion.
11 changes: 10 additions & 1 deletion packages/block-editor/src/components/block-toolbar/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -202,10 +202,19 @@
top: -1px;
transform: translateX(-48px);
user-select: none;
z-index: -1; // This makes it slide out from underneath the toolbar.
}
}

// Explicitly color the background of the switcher to "cover" the mover control as it animates out.
.block-editor-block-toolbar__block-switcher-wrapper {
background: $white;
border-left: $border-width solid;
border-radius: 0 0 $radius-block-ui $radius-block-ui;
position: relative;
z-index: 1;
margin-left: -$border-width;
}

.block-editor-block-toolbar__mover-trigger-wrapper:not(:empty) {
@include break-medium() {
background-color: $white;
Expand Down

0 comments on commit eb2138c

Please sign in to comment.