Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try: Refresh selection styles #44150

Merged
merged 2 commits into from
Oct 5, 2022
Merged

Try: Refresh selection styles #44150

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f6f942f
Selection styles: Refresh appearance of multi selection.
jasmussen Sep 14, 2022
8c1bfcf
Hide partial selection in multi selected nested blocks.
jasmussen Oct 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
218 changes: 85 additions & 133 deletions packages/block-editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,19 @@
* Cross-Block Selection
*/

@keyframes selection-overlay__fade-in-animation {
from {
opacity: 0;
}
to {
opacity: 0.4;
}
}

// Note to developers refactoring this, please test navigation mode, and
// multi selection and hovering the block switcher to highlight the block.
// Also be sure to test partial selections in Safari, as it draws the
// selection marker with an entirely different model than Blink.
.block-editor-block-list__layout {
position: relative;

Expand All @@ -19,63 +30,88 @@
background: transparent;
}

// 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:not(.is-partially-selected),
.block-editor-block-list__block.is-highlighted,
.block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
.has-multi-selection &::selection {
background: transparent;
}

// Block multi selection
.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
// Hide the native selection indicator, for the selection, and children.
&::selection,
& ::selection {
background: transparent;
}

// Draw a spot color overlay.
&::after {
// Show selection borders around every non-nested block's actual footprint.
content: "";
position: absolute;
z-index: 1;
pointer-events: none;
content: "";
top: $border-width;
right: $border-width;
bottom: $border-width;
left: $border-width;
right: $border-width;
background: var(--wp-admin-theme-color);
opacity: 0.4;

// Everything else.
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
// Animate.
animation: selection-overlay__fade-in-animation 0.1s ease-out;
animation-fill-mode: forwards;
@include reduce-motion("animation");

// Windows High Contrast mode will show this outline.
// Show outline in high contrast mode.
outline: 2px solid transparent;

// Show a lighter color for dark themes.
.is-dark-theme & {
box-shadow: 0 0 0 $border-width $dark-theme-focus;
}
}

// Provide exceptions for placeholders.
.components-placeholder,
.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
::selection {
background: transparent;
}
}
}

// Hide the selection indicator on .block-editor-block-list__layout, else Safari will show it stacked.
.has-multi-selection &::selection {
background: transparent;
}
// Block highlight, and navigation mode, not focus.
// By not using a pseudo element, we can limit ourselves to only
// using ::after, leaving ::before free. Otherwise, highlight + multi-select
// would require the opacity-changing overlay to be on ::before.
.block-editor-block-list__block.is-highlighted,
.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
&.is-navigate-mode .block-editor-block-list__block.is-selected,
& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
border-radius: $radius-block-ui;
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);

.block-editor-block-list__block.is-highlighted::after {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
outline: $border-width solid transparent;
// Show outline in high contrast mode.
outline: 2px solid transparent;
}

&.is-navigate-mode .block-editor-block-list__block.is-selected::after,
& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
outline: 2px solid transparent;
// Block focus.
.block-editor-block-list__block:not([contenteditable]):focus {
outline: none;

// We're using a pseudo element to overflow placeholder borders
// and any border inside the block itself.
&::after {
content: "";
position: absolute;
z-index: 1;
pointer-events: none;
top: $border-width;
right: $border-width;
bottom: $border-width;
left: $border-width;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.

// Show a light color for dark themes.
.is-dark-theme & {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
}
}
}

// Moving blocks using keyboard (Ellipsis > Move).
& .is-block-moving-mode.block-editor-block-list__block.is-selected {
box-shadow: none;
outline: none;

&::before {
&::after {
content: "";
position: absolute;
z-index: 0;
Expand All @@ -90,14 +126,10 @@
border-radius: $radius-block-ui;
border-top: 4px solid $gray-400;
}

&::after {
content: none;
}
}

& .is-block-moving-mode.can-insert-moving-block.block-editor-block-list__block.is-selected {
&::before {
&::after {
border-color: var(--wp-admin-theme-color);
}
}
Expand Down Expand Up @@ -134,29 +166,16 @@
}

.block-editor-block-list__layout .block-editor-block-list__block {
// With `position: static`, Safari marks a full-width selection rectangle, including margins.
// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
// Blink based browsers, but it also does "crop" the marker, which can result in a small line
// from the preceeding paragraph showing, which is effectively the above selection bleeding in.
// We choose relative, as that matches the multi-selection, which is limited to the block footprint.
position: relative;

// Re-enable text-selection on editable blocks.
user-select: text;

// Hide the select style pseudo element as otherwise it gets shwon as "selected" in Safari.
&.is-partially-selected::after {
// By positioning this pseudo element outside the boundaries of the parent block,
// when partially selected it hides the pseudo element selection in Safari.
top: -0.5px;
right: -0.5px;
bottom: -0.5px;
left: -0.5px;
}

&.is-highlighted::after,
&.is-highlighted ~ .is-multi-selected::after {
top: 0;
right: 0;
bottom: 0;
left: 0;
}

// Break long strings of text without spaces so they don't overflow the block.
overflow-wrap: break-word;

Expand All @@ -167,7 +186,6 @@
/**
* Notices
*/

.components-placeholder .components-with-notices-ui {
margin: -10px 0 12px 0;
}
Expand All @@ -186,56 +204,6 @@
}
}


/**
* Block Layout
*/

// Navigate mode & Focused wrapper.
// We're using a pseudo element to overflow placeholder borders
// and any border inside the block itself.
&:not([contenteditable]):focus {
outline: none;

&::after {
position: absolute;
z-index: 1;
pointer-events: none;
content: "";
top: $border-width;
bottom: $border-width;
left: $border-width;
right: $border-width;

// 2px outside.
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.

// Show a light color for dark themes.
.is-dark-theme & {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
}
}
}

/**
* Block styles and alignments
*/
&::after {
content: "";
pointer-events: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: $radius-block-ui;
box-shadow: 0 0 0 0 transparent;
transition: box-shadow 0.1s linear;
@include reduce-motion("transition");
}

// Warnings
&.has-warning {
min-height: $grid-unit-60;
Expand Down Expand Up @@ -282,7 +250,7 @@
}
}

// Reusable blocks parent borer.
// Reusable blocks parent border.
&.is-reusable.has-child-selected::after {
box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
}
Expand All @@ -296,16 +264,8 @@
.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
&.is-hovered {
cursor: default;

&::after {
top: $border-width;
left: $border-width;
right: $border-width;
bottom: $border-width;
box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
// Border is outset, so subtract the width to achieve correct radius.
border-radius: $radius-block-ui - $border-width;
}
box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color);
border-radius: $radius-block-ui;
}

&.is-selected {
Expand All @@ -315,19 +275,11 @@
cursor: unset;
}

&::after {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Selected not focussed.
top: $border-width;
left: $border-width;
right: $border-width;
bottom: $border-width;
border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
}
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); // Selected not focussed.
border-radius: $radius-block-ui;

&:focus {
&::after {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}
}
}
Expand Down