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; } diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss index 6e65b38310b671..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. @@ -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, @@ -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; @@ -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; } } @@ -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; } } } @@ -270,22 +267,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 +275,35 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b &.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; + } } } } @@ -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; @@ -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; diff --git a/packages/block-library/src/block/editor.scss b/packages/block-library/src/block/editor.scss index c49675392a525e..318101f7f52dac 100644 --- a/packages/block-library/src/block/editor.scss +++ b/packages/block-library/src/block/editor.scss @@ -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; } } } diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss index e5df190c2fe851..71659ce6ba717a 100644 --- a/packages/block-library/src/template-part/editor.scss +++ b/packages/block-library/src/template-part/editor.scss @@ -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; } } } 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%; }