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

Enhance block outlines and selection interactions #60757

Merged
merged 7 commits into from
May 8, 2024
Merged

Enhance block outlines and selection interactions #60757

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0228c5e
Remove block overlay styles
richtabor Apr 15, 2024
2222f69
Use outline color for synced pats and template parts
richtabor Apr 15, 2024
f1412bf
Remove is-hovered
richtabor Apr 15, 2024
2f70709
Remove border radius from focus editor canvas
richtabor Apr 15, 2024
9ab896d
Enhance outlines
richtabor Apr 15, 2024
bc01b63
Remove hover on is-selected blocks
richtabor May 7, 2024
a787730
Refactor to mixin
scruffian May 8, 2024
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
32 changes: 0 additions & 32 deletions packages/block-editor/src/components/block-content-overlay/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,6 @@
.block-editor-block-list__block.has-block-overlay {
cursor: default;

&::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
border: none;
border-radius: $radius-block-ui;
z-index: z-index(".block-editor-block-list__block.has-block-overlay");
}

&:not(.is-multi-selected)::after {
content: none !important;
}

&:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
}

&.is-reusable:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before,
&.wp-block-template-part:hover:not(.is-dragging-blocks):not(.is-multi-selected)::before {
background: rgba(var(--wp-block-synced-color--rgb), 0.04);
box-shadow: 0 0 0 $border-width var(--wp-block-synced-color) inset;
}

&.is-selected:not(.is-dragging-blocks)::before {
box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset;
}

.block-editor-block-list__block {
pointer-events: none;
}
Expand Down
96 changes: 51 additions & 45 deletions packages/block-editor/src/components/block-list/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,19 @@
}
}

@mixin selectedOutline() {
content: "";
position: absolute;
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
outline-color: var(--wp-admin-theme-color);
outline-style: solid;
outline-width: var(--wp-admin-border-width-focus);
outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
}

// Hide selections on this element, otherwise Safari will include it stacked
// under your actual selection.
Expand All @@ -39,12 +52,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
position: relative;

// Block multi selection
// Apply a rounded radius to the entire block when multi selected, but with low specificity
// so explicit radii set by tools are preserved.
&:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)) {
border-radius: $radius-block-ui;
}

.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
// Hide the native selection indicator, for the selection, and children.
&::selection,
Expand All @@ -64,7 +71,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
left: 0;
background: var(--wp-admin-theme-color);
opacity: 0.4;
border-radius: $radius-block-ui;

// Animate.
animation: selection-overlay__fade-in-animation 0.1s ease-out;
Expand All @@ -77,7 +83,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b

// Don't show the highlight focus style when multi selected.
&.is-highlighted::after {
box-shadow: none;
outline-color: transparent;
}
}

Expand All @@ -95,21 +101,12 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
// We're using a pseudo element to overflow placeholder borders
// and any border inside the block itself.
&::after {
content: "";
position: absolute;
@include selectedOutline();
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;
outline-color: $dark-theme-focus;
}
}
}
Expand Down Expand Up @@ -270,40 +267,43 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
}
}

.is-outline-mode .block-editor-block-list__block {
&.is-hovered {
cursor: default;

&::after {
content: "";
position: absolute;
pointer-events: none;
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-radius: $radius-block-ui - $border-width;
}
}
.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {

&.is-selected {
cursor: default;

&.rich-text {
cursor: unset;
}
}

&.is-hovered:not(.is-selected),
&:not(.rich-text):not([contenteditable="true"]).is-selected {

&::after {
content: "";
position: absolute;
pointer-events: none;
top: $border-width;
left: $border-width;
right: $border-width;
bottom: $border-width;
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
border-radius: $radius-block-ui;
@include selectedOutline();
}
}
}

// Colorize outlines for template parts and synced patterns (.is-reusable).
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {

&.is-hovered::after,
&.is-selected::after,
&.is-highlighted::after {
outline-color: var(--wp-block-synced-color);
}

&.block-editor-block-list__block:not([contenteditable]):focus {
&::after {
outline-color: var(--wp-block-synced-color);

// Show a light color for dark themes.
.is-dark-theme & {
outline-color: $dark-theme-focus;
}
}
}
}
Expand Down Expand Up @@ -336,7 +336,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
animation-timing-function: ease-out;
animation-delay: 0.1s;
animation-fill-mode: backwards;
border-radius: $radius-block-ui;
bottom: 0;
content: "";
left: 0;
Expand Down Expand Up @@ -385,10 +384,17 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
z-index: z-index("{core/image aligned left or right} .wp-block");
}

// Increase width when zoomed out to match visually.
body.is-zoomed-out {
display: flex;
flex-direction: column;

.is-outline-mode .block-editor-block-list__block:not(.remove-outline):not(.rich-text).is-selected::after,
.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered:not(.is-selected)::after {
outline-width: calc(2 * var(--wp-admin-border-width-focus)); // Adjusted for the zoom scale.
outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
}

> .is-root-container {
flex: 1;
display: flex;
Expand Down
12 changes: 7 additions & 5 deletions packages/block-library/src/block/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,19 @@
}

.edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable {
&.is-highlighted,
&.is-selected {
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);

&.is-highlighted::after,
&.is-selected::after {
outline-color: var(--wp-block-synced-color);
}

&.block-editor-block-list__block:not([contenteditable]):focus {
&::after {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
outline-color: var(--wp-block-synced-color);

// Show a light color for dark themes.
.is-dark-theme & {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
outline-color: $dark-theme-focus;
}
}
}
Expand Down
13 changes: 5 additions & 8 deletions packages/block-library/src/template-part/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,24 +24,21 @@
}

// We don't use .is-outline-mode in this case so colors take effect properly in the block editor.
// Will be a better result when outlines are not shadows, but outlines, so we can target outline-color, not redefine the entire shadow.
.block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
.block-editor-block-list__block:not(.remove-outline).is-reusable {

&.is-highlighted::after,
&.is-selected::after {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
}

&.is-hovered::after {
box-shadow: 0 0 0 $border-width var(--wp-block-synced-color);
outline-color: var(--wp-block-synced-color);
}

&.block-editor-block-list__block:not([contenteditable]):focus {
&::after {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
outline-color: var(--wp-block-synced-color);

// Show a light color for dark themes.
.is-dark-theme & {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
outline-color: $dark-theme-focus;
}
}
}
Expand Down
1 change: 0 additions & 1 deletion packages/edit-site/src/components/block-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,6 @@
}

.edit-site-visual-editor__editor-canvas {
border-radius: $radius-block-ui;
max-height: 100%;
}

Expand Down
Loading