Skip to content

Commit

Permalink
Use a left border for hover + selection states (#14145)
Browse files Browse the repository at this point in the history 
* Add thick borders to the left of blocks when they're hovred + selected.

* Add thick left border to the page title.

* Turn off block toolbar centering for alignwide blocks.

This splits the left border in two, which looks a bit weird.

* Move block breadcrump to the left side, position it on top of the block.

* Clean up the block toolbar's left border.

* Use inset borders on mobile.

* Prevent inset borders from overlapping with full-bleed content.

* Use a gray border instead of a blue one on hover.

* Use a sass variable to define the left block border width

* Fix breadcrumb potision for alignfull blocks.

* Clean up breadcrumb position for left & right-aligned blocks.

* Sync block mover animation up with the hover state.

* Darken focused block borders slightly.

From $light-gray-500 to $light-gray-800.

* Switch to using border instead of outline for block borders.

Also, change the thick left border to a solid color, to prevent weird overlap.

* Make this work better with Windows High Contrast Mode

* Adjust z-index of border + breadcrumb for child blocks.

So that they're not overlapped by the parent block's border + toolbar.

* Remove extra z-index rule from the block border.

Turns out this wasn't needed anyway.

* Remove extra z-index rule from the block border. Minor description cleanup.

* Ensure these styles are compatible with Top Toolbar mode.

* Use the new gray value for the mobile toolbar border.

* Add a matching left border to the post permalink area above the title.

* Improve border position for mobile screens, especially for elements that float left/right.

* Remove a couple unnecessary border updates from 047e1e4.

Turns out these styles can be preserved on all screen sizes with no ill effect.

* Clean up bugs related to the hover + focus states of the classic editor block.

* Classic Block toolbar icon cleanup.

Even out margins, remove white background.

* Reusable Block border cleanup.

* Keeping a light border on the classic block when it's inactive.

* Clean up borders on warning blocks.

* Switch to a solid color border color for the permalink box.

This mirrors the approach we use for block toolbars, and also ensures that we don't layer opacities and make the permalink toolbar darker than intended.

* Update z-index rule name to match the one used in the latest merge.

* Combine full-wide toolbar centering rules.

Previously, these were declared in two separate palces.

* Add a darker hover state for dark themes.

* Remove the left toolbar border on mobile screens.

This fixes some visual bugs with themes like TwentyNineteen, which include margins on either side of the block on mobile.
  • Loading branch information
@kjellr
kjellr authored Mar 15, 2019
1 parent 7723b06 commit 08bf9e1
Show file tree
Hide file tree
Showing 11 changed files with 228 additions and 70 deletions.
1 change: 1 addition & 0 deletions assets/stylesheets/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ $resize-handler-size: 16px;
$resize-handler-container-size: $resize-handler-size + ($grid-size-small * 2); // Make the resize handle container larger so there's a larger grabbable area.

// Blocks
$block-left-border-width: $border-width * 3;
$block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
$block-spacing: 4px; // Vertical space between blocks.
$block-side-ui-width: 28px; // Width of the movers/drag handle UI.
Expand Down
1 change: 1 addition & 0 deletions assets/stylesheets/_z-index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ $z-layers: (
".block-library-classic__toolbar": 10,
".block-editor-block-list__layout .reusable-block-indicator": 1,
".block-editor-block-list__breadcrumb": 2,
".editor-inner-blocks .block-editor-block-list__breadcrumb": 22,
".components-form-toggle__input": 1,
".components-panel__header.edit-post-sidebar__panel-tabs": -1,
".edit-post-sidebar .components-panel": -2,
Expand Down
155 changes: 115 additions & 40 deletions packages/block-editor/src/components/block-list/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
// While block is being dragged, dim the slot dragged from, and hide some UI.
&.is-dragging {
.block-editor-block-list__block-edit::before {
outline: none;
border: none;
}

> .block-editor-block-list__block-edit > * {
Expand Down Expand Up @@ -105,7 +105,7 @@
}

/**
* Block outline layout
* Block border layout
*/

.block-editor-block-list__block-edit {
Expand All @@ -115,10 +115,15 @@
z-index: z-index(".block-editor-block-list__block-edit::before");
content: "";
position: absolute;
outline: $border-width solid transparent;
transition: outline 0.1s linear;
border: $border-width solid transparent;
border-left: none;
box-shadow: none;
transition: border-color 0.1s linear, box-shadow 0.1s linear;
pointer-events: none;

// Include a transparent outline for Windows High Contrast mode.
outline: $border-width solid transparent;

// Go edge-to-edge on mobile.
right: -$block-padding;
left: -$block-padding;
Expand All @@ -128,18 +133,36 @@
}

// Selected style.
&.is-selected > .block-editor-block-list__block-edit::before {
// Use opacity to work in various editor styles.
outline: $border-width solid $dark-opacity-light-500;
&.is-selected {

.is-dark-theme & {
outline-color: $light-opacity-light-500;
> .block-editor-block-list__block-edit::before {
// Use opacity to work in various editor styles.
border-color: $dark-opacity-light-800;
box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500;

.is-dark-theme & {
border-color: $light-opacity-light-800;
box-shadow: inset $block-left-border-width 0 0 0 $light-gray-600;
}

// Switch to outset borders on larger screens.
@include break-small() {
box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;

.is-dark-theme & {
box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
}
}
}
}

// Hover style.
&.is-hovered > .block-editor-block-list__block-edit::before {
outline: $border-width solid theme(outlines);
box-shadow: -$block-left-border-width 0 0 0 $light-gray-500;

.is-dark-theme & {
box-shadow: -$block-left-border-width 0 0 0 $dark-gray-600;
}
}

// Spotlight mode.
Expand Down Expand Up @@ -213,12 +236,23 @@
}
}

&.has-warning:not(.is-hovered) .block-editor-block-list__block-edit::before {
&.has-warning .block-editor-block-list__block-edit::before {
// Use opacity to work in various editor styles.
border-color: $dark-opacity-light-500;
border-left: $border-width solid $dark-opacity-light-500;

.is-dark-theme & {
border-color: $light-opacity-light-600;
}
}

&.has-warning.is-selected .editor-block-list__block-edit::before {
// Use opacity to work in various editor styles.
outline-color: $dark-opacity-light-500;
border-color: $dark-opacity-light-800;
border-left-color: transparent;

.is-dark-theme & {
outline-color: $light-opacity-light-500;
border-color: $light-opacity-light-800;
}
}

Expand Down Expand Up @@ -260,11 +294,21 @@

// Reusable blocks
&.is-reusable > .block-editor-block-list__block-edit::before {
border: $border-width dashed $dark-opacity-light-500;

.is-dark-theme & {
border-color: $light-opacity-light-600;
}
}

&.is-reusable.is-selected > .block-editor-block-list__block-edit::before {
// Use opacity to work in various editor styles.
outline: $border-width dashed $dark-opacity-light-500;
border-color: $dark-opacity-light-800;
border-left-color: transparent;

.is-dark-theme & {
outline-color: $light-opacity-light-500;
border-color: $light-opacity-light-800;
border-left-color: transparent;
}
}

Expand All @@ -278,7 +322,7 @@
// When images are floated, the block itself should collapse to zero height.
height: 0;

// Hide block outline when an image is floated.
// Hide block border when an image is floated.
.block-editor-block-list__block-edit {
&::before {
content: none;
Expand All @@ -296,7 +340,7 @@
// Position toolbar better on mobile.
.block-editor-block-contextual-toolbar {
width: auto;
border-bottom: $border-width solid $light-gray-500;
border-bottom: $border-width solid $light-gray-800;
bottom: auto;
}
}
Expand Down Expand Up @@ -424,9 +468,9 @@

// Full-wide
&[data-align="full"] {
// Position hover label on the right for the top level block.
// Position hover label on the left for the top level block.
> .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb {
right: 0;
left: 0;
}

// Compensate for main container padding and subtract border.
Expand Down Expand Up @@ -595,13 +639,16 @@
margin-top: $block-toolbar-height;
margin-right: -$block-padding;
margin-left: -$block-padding;
border-top: $border-width solid $light-gray-500;
border-top: $border-width solid $light-gray-800;
height: $block-toolbar-height;

@include break-small() {
display: none;
}

// Add a white background to prevent the block's left border from showing through.
background-color: $white;

// Show a shadow below the selected block to imply separation.
box-shadow: $shadow-below-only;
@include break-small() {
Expand Down Expand Up @@ -707,7 +754,7 @@

// Hide both the button until hovered.
opacity: 0;
transition: opacity 0.1s linear 0.1s;
transition: opacity 0.1s linear;

&:hover,
&.is-visible {
Expand Down Expand Up @@ -791,12 +838,12 @@

// Position toolbar below the block on mobile.
position: absolute;
bottom: $block-toolbar-height - $block-padding;
bottom: $block-toolbar-height - $block-padding - $border-width;
left: -$block-padding;
right: -$block-padding;

// Paint the borders on the toolbar itself on mobile.
border-top: $border-width solid $light-gray-500;
border-top: $border-width solid $light-gray-800;
.components-toolbar {
border-top: none;
border-bottom: none;
Expand All @@ -805,17 +852,31 @@
@include break-small() {
border-top: none;
.components-toolbar {
border-top: $border-width solid $light-gray-500;
border-bottom: $border-width solid $light-gray-500;
border-top: $border-width solid $light-gray-800;
border-bottom: $border-width solid $light-gray-800;
}
}
}

// Floated items have special needs for the contextual toolbar position.
// Floated items have special needs for the contextual toolbar position + the thicker left border.
&[data-align="left"] .block-editor-block-contextual-toolbar,
&[data-align="right"] .block-editor-block-contextual-toolbar {
margin-bottom: $border-width;
margin-top: -$block-toolbar-height;

// Display the box-shadow on the parent element.
box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;
.is-dark-theme & {
box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
}

@include break-small() {
box-shadow: none;
}

.editor-block-toolbar {
border-left: none;
}
}

// Make block toolbar full width on mobile.
Expand Down Expand Up @@ -903,7 +964,8 @@

// This prevents floats from messing up the position of the block toolbar on floats-adjacent blocks when selected.
position: absolute;
left: 0;
left: $border-width;
top: $border-width;
}
}

Expand All @@ -917,20 +979,24 @@
line-height: 1;
z-index: z-index(".block-editor-block-list__breadcrumb");

// Position in the top right of the border.
right: -$block-padding;
top: -$block-padding - $border-width;
// Position in the top left of the border.
left: -$block-padding - $block-left-border-width;
top: (($block-padding * -2) - $block-left-border-width);

.components-toolbar {
padding: 0;
border: none;
background: transparent;
line-height: 1;
font-family: $default-font;
font-size: 11px;
padding: 4px 4px;
background: theme(outlines);
color: $white;
background: $light-gray-500;
color: $dark-gray-900;

.is-dark-theme & {
background: $dark-gray-600;
color: $white;
}

// Animate in
.block-editor-block-list__block:hover & {
Expand All @@ -939,11 +1005,20 @@
}
}

// Position the breadcrumb closer on mobile.
[data-align="left"] &,
// Position this above the toolbar of parent blocks.
.editor-inner-blocks & {
z-index: z-index(".editor-inner-blocks .block-editor-block-list__breadcrumb");
}

// Remove negative left breadcrumb position for left aligned blocks.
[data-align="left"] & {
left: 0;
}

// Right-align the breadcrumb for right-aligned blocks.
[data-align="right"] & {
left: auto;
right: 0;
top: 0;
}
}

Expand Down Expand Up @@ -992,12 +1067,12 @@
.block-editor-block-list__block .block-editor-warning {
z-index: z-index(".block-editor-warning");
position: relative;
margin-right: -$block-padding - $border-width;
margin-left: -$block-padding - $border-width;
margin-right: -$block-padding;
margin-left: -$block-padding;

// Pull the warning upwards to the edge, and add a negative bottom margin to compensate.
margin-bottom: -$block-padding - $border-width;
transform: translateY(-$block-padding - $border-width);
margin-bottom: -$block-padding;
transform: translateY(-$block-padding);

// Bigger padding on mobile where blocks are edge to edge.
padding: 10px $block-padding;
Expand Down
32 changes: 25 additions & 7 deletions packages/block-editor/src/components/block-toolbar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,40 @@
width: 100%;
overflow: auto; // Allow horizontal scrolling on mobile.
position: relative;
transition: border-color 0.1s linear, box-shadow 0.1s linear;
border-left: $border-width solid $light-gray-800;

// Allow overflow on desktop.
@include break-small() {
// Allow overflow on desktop.
overflow: inherit;
}

// Show a left border on the parent container.
border-left: $border-width solid $light-gray-500;
// Show a left border on the parent container.
border-left: none;
box-shadow: -$block-left-border-width 0 0 0 $dark-gray-500;

// Show a lighter version for dark themes.
.is-dark-theme & {
box-shadow: -$block-left-border-width 0 0 0 $light-gray-600;
}
}

// The component is born with a border, but we only need some of them.
.components-toolbar {
border: 0;
border-top: $border-width solid $light-gray-500;
border-bottom: $border-width solid $light-gray-500;
border-top: $border-width solid $light-gray-800;
border-bottom: $border-width solid $light-gray-800;

// Add a right border to show as separator in the block toolbar.
border-right: $border-width solid $light-gray-500;
border-right: $border-width solid $light-gray-800;
}

// Add a left border and adjust the color for Top Toolbar mode.
.has-fixed-toolbar & {
box-shadow: none;
border-left: $border-width solid $light-gray-500;

.components-toolbar {
border-color: $light-gray-500;
}
}
}
10 changes: 10 additions & 0 deletions packages/block-editor/src/components/warning/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,16 @@
background-color: transparent;
}

.is-selected & {
// Use opacity to work in various editor styles.
border-color: $dark-opacity-light-800;
border-left-color: transparent;

.is-dark-theme & {
border-color: $light-opacity-light-800;
}
}

.block-editor-warning__message {
line-height: $default-line-height;
font-family: $default-font;
Expand Down
Loading

0 comments on commit 08bf9e1

Please sign in to comment.