Skip to content

Commit

Permalink
Multi-select: Polish further, try new style. (#19094)
Browse files Browse the repository at this point in the history
This PR is an alternative to #19088 and only one should be merged.

This approach taken in this PR is not to paint a background, but to move towards the selction model that apps like Figma leverage, which is to draw a thick border around selected blocks. It makes sense in that you're no longer selecting text, you're selecting blocks.
  • Loading branch information
jasmussen authored and Tammie Lister committed Dec 13, 2019
1 parent d6b3601 commit 4496ec8
Showing 1 changed file with 15 additions and 27 deletions.
42 changes: 15 additions & 27 deletions packages/block-editor/src/components/block-list/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -177,37 +177,25 @@

.block-editor-block-list__layout {

// The primary indicator of selection is the native selection marker.
// To indicate multiple blocks, we provide an additional selection indicator.
// The primary indicator of selection in text is the native selection marker.
// When selecting multiple blocks, we provide an additional selection indicator.
.block-editor-block-list__block.is-multi-selected {
// Show selection borders around every non-nested block's actual footprint.
> .block-editor-block-list__block-edit > [data-block] {
box-shadow: 0 0 0 2px #057cba;
border-radius: 1px;

> .block-editor-block-list__block-edit::before {
border-left-color: $dark-opacity-light-800;
box-shadow: inset $block-left-border-width 0 0 0 $dark-gray-500;

.is-dark-theme & {
border-left-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;
}
}
// Windows High Contrast mode will show this outline.
outline: 2px solid transparent;
}
.block-editor-block-toolbar {
left: $border-width + $border-width + $block-padding;
}
.block-editor-block-mover {
margin-left: $block-padding;
}
}

// The additional marker, we limit only to top level blocks.
.block-editor-block-list__block.is-multi-selected .block-editor-block-list__block.is-multi-selected > .block-editor-block-list__block-edit::before {
box-shadow: none;
}

// Provide exceptions for placeholders.
.components-placeholder {
// Hide the native selection marker once we select multiple blocks.
::selection {
background: transparent;
}
Expand Down

0 comments on commit 4496ec8

Please sign in to comment.