Skip to content

Commit

Permalink
Try making the hover state of nested blocks more visible (#16820)
Browse files Browse the repository at this point in the history
* Try using a solid border for the hover state of nested blocks.

* Try using slightly lighter dashed borders.

This allows for us to match the existing hover color on hover.

* Add dark mode styles.

* Expand hover styles to cover all children of a parent block.

This ensures that they apply correctly in a 3+ level deep scenario.
  • Loading branch information
kjellr authored and Tammie Lister committed Aug 2, 2019
1 parent ac56950 commit 87da09e
Showing 1 changed file with 50 additions and 7 deletions.
57 changes: 50 additions & 7 deletions packages/block-editor/src/components/block-list/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
border-left: none;
box-shadow: none;
pointer-events: none;
transition: border-color 0.1s linear, box-shadow 0.1s linear;
transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
@include reduce-motion("transition");

// Include a transparent outline for Windows High Contrast mode.
Expand Down Expand Up @@ -182,21 +182,64 @@
&.has-child-selected {

> .block-editor-block-list__block-edit::before {
border: $border-width dashed $dark-opacity-light-800;
border: $border-width dashed $dark-opacity-light-600;

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

> .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before {
border: $border-width dashed $dark-opacity-light-800;
border: $border-width dashed $dark-opacity-light-600;

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

&.is-hovered > .block-editor-block-list__block-edit::before,
> .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before,
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before,
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before {
border-style: solid;
border-color: $dark-opacity-light-500;
border-left-color: transparent;

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

// Add extra border to child blocks when they are selected.
&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before,
&.is-selected > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before {
border: $border-width dashed $dark-opacity-light-800;
&.is-selected {

> .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected),
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected),
> .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) {

> .block-editor-block-list__block-edit::before {
border: $border-width dashed $dark-opacity-light-600;

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

&.is-hovered > .block-editor-block-list__block-edit::before {
border-style: solid;
border-color: $dark-opacity-light-500;
border-left-color: transparent;

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

Expand Down

0 comments on commit 87da09e

Please sign in to comment.