From 0228c5e0728d5c04d911c40d6902619a69453d26 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 15 Apr 2024 12:56:12 -0400 Subject: [PATCH 1/7] Remove block overlay styles --- .../block-content-overlay/content.scss | 32 ------------------- 1 file changed, 32 deletions(-) diff --git a/packages/block-editor/src/components/block-content-overlay/content.scss b/packages/block-editor/src/components/block-content-overlay/content.scss index 41ed71e0b4c27c..26fc91d03c185a 100644 --- a/packages/block-editor/src/components/block-content-overlay/content.scss +++ b/packages/block-editor/src/components/block-content-overlay/content.scss @@ -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; } From 2222f698f46c762eee2c95d4de9dca72ae2b664b Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 15 Apr 2024 13:09:00 -0400 Subject: [PATCH 2/7] Use outline color for synced pats and template parts --- packages/block-library/src/block/editor.scss | 13 ++++++++----- .../block-library/src/template-part/editor.scss | 14 ++++++-------- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/block/editor.scss b/packages/block-library/src/block/editor.scss index c49675392a525e..85756848e18322 100644 --- a/packages/block-library/src/block/editor.scss +++ b/packages/block-library/src/block/editor.scss @@ -16,17 +16,20 @@ } .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-hovered::after, + &.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; } } } diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index e5df190c2fe851..5f92e7c86381ac 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -24,24 +24,22 @@ } // 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-hovered::after, &.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; } } } From f1412bfcd9eadcdfd6436b3c063eb54f4cb51d78 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 15 Apr 2024 13:09:39 -0400 Subject: [PATCH 3/7] Remove is-hovered --- packages/block-library/src/block/editor.scss | 1 - packages/block-library/src/template-part/editor.scss | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/block-library/src/block/editor.scss b/packages/block-library/src/block/editor.scss index 85756848e18322..318101f7f52dac 100644 --- a/packages/block-library/src/block/editor.scss +++ b/packages/block-library/src/block/editor.scss @@ -17,7 +17,6 @@ .edit-post-visual-editor .block-editor-block-list__block:not(.remove-outline).is-reusable { - &.is-hovered::after, &.is-highlighted::after, &.is-selected::after { outline-color: var(--wp-block-synced-color); diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index 5f92e7c86381ac..71659ce6ba717a 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -27,7 +27,6 @@ .block-editor-block-list__block:not(.remove-outline).wp-block-template-part, .block-editor-block-list__block:not(.remove-outline).is-reusable { - &.is-hovered::after, &.is-highlighted::after, &.is-selected::after { outline-color: var(--wp-block-synced-color); From 2f70709fd7404d8636e47c9d25dbec29a6d8c12f Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 15 Apr 2024 13:10:32 -0400 Subject: [PATCH 4/7] Remove border radius from focus editor canvas --- packages/edit-site/src/components/block-editor/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index a470308dbb7008..1c6a1178862267 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -47,7 +47,6 @@ } .edit-site-visual-editor__editor-canvas { - border-radius: $radius-block-ui; max-height: 100%; } From 9ab896dc22a071bd81fcca87d88cb8db24f9d1d2 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Mon, 15 Apr 2024 13:15:44 -0400 Subject: [PATCH 5/7] Enhance outlines --- .../src/components/block-list/content.scss | 91 +++++++++++-------- 1 file changed, 52 insertions(+), 39 deletions(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index 6e65b38310b671..accb45a78e348a 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -39,12 +39,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, @@ -64,7 +58,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; @@ -77,7 +70,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; } } @@ -99,17 +92,18 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b 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. + 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)); // 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; } } } @@ -270,22 +264,7 @@ _::-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; @@ -293,17 +272,45 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b &.rich-text { cursor: unset; } + } + + &.is-hovered, + &: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; + top: 0; + left: 0; + right: 0; + bottom: 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)); + } + } +} + +// 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; + } } } } @@ -336,7 +343,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; @@ -385,10 +391,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; From bc01b63a76dd9222f200adc4c3570be03b366e80 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 7 May 2024 16:01:44 +0900 Subject: [PATCH 6/7] Remove hover on is-selected blocks --- packages/block-editor/src/components/block-list/content.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index accb45a78e348a..6e132a22b8d4f4 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -274,7 +274,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b } } - &.is-hovered, + &.is-hovered:not(.is-selected), &:not(.rich-text):not([contenteditable="true"]).is-selected { &::after { From a787730e6d7bb2045d967ceb788cf76cc92d88c4 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 8 May 2024 09:49:49 +0900 Subject: [PATCH 7/7] Refactor to mixin --- .../src/components/block-list/content.scss | 37 ++++++++----------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index 6e132a22b8d4f4..e3fa9444c62f34 100644 --- a/packages/block-editor/src/components/block-list/content.scss +++ b/packages/block-editor/src/components/block-list/content.scss @@ -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. @@ -88,18 +101,8 @@ _::-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: 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)); // Show a light color for dark themes. .is-dark-theme & { @@ -278,17 +281,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b &:not(.rich-text):not([contenteditable="true"]).is-selected { &::after { - content: ""; - position: absolute; - pointer-events: none; - top: 0; - left: 0; - right: 0; - bottom: 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)); + @include selectedOutline(); } } }