Skip to content

Commit

Permalink
Initial work to remove the pseudo element.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jasmussen
jasmussen committed Sep 16, 2022
1 parent a7b0673 commit 3f014c8
Showing 1 changed file with 84 additions and 133 deletions.
217 changes: 84 additions & 133 deletions packages/block-editor/src/components/block-list/style.scss
View file
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,87 @@
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.
&::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 +125,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 +165,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 +185,6 @@
/**
* Notices
*/

.components-placeholder .components-with-notices-ui {
margin: -10px 0 12px 0;
}
Expand All @@ -186,56 +203,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 +249,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 +263,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 +274,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

0 comments on commit 3f014c8

Please sign in to comment.