Shadows instead of borders on interface skeleton #61835
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
richtabor
added
[Type] Enhancement
|
@t-hamano what would you suggest for windows high contrast? |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +779 B (+0.04%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 5519af0. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9198721003
|
|
Something's going on here:
The shadow stacks, likely due to the use of opacity. Any neat trick to improve this? Sidenote, if we go with this, you'll need to combine it with something like an |
|
When it comes to high contrast mode in Windows, we certainly want outlines as a fallback. trunk| This PR
From what I've tested, you can make the following changes to this current PR: diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index 9d8c40aaee..e4af3d01a4 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -130,6 +130,7 @@ html.interface-interface-skeleton__html-container {
@include break-medium() {
box-shadow: -$border-width 0 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+ outline: 1px solid transparent;
}
}
@@ -139,6 +140,7 @@ html.interface-interface-skeleton__html-container {
@include break-medium() {
box-shadow: $border-width 0 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+ outline: 1px solid transparent;
}
}
@@ -148,6 +150,7 @@ html.interface-interface-skeleton__html-container {
box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
z-index: z-index(".interface-interface-skeleton__header");
color: $gray-900;
+ outline: 1px solid transparent;
}
.interface-interface-skeleton__footer { |
I have an idea, though it's a long shot I think. |
richtabor
force-pushed
the
try/ui-shadows-instead-of-borders
branch
from
43ad3c4 to
5ee2445
Compare
Fixed 🎉
|
|
Nice work. Here are some of the effects of this. On colored backgrounds, the shadow through opacity absorbs part of the color:
Consequently on dark backgrounds, that means the canvas can feel like it almost bleeds into the shadow:
It also appears to give 1px of "extra available space" all around the canvas, so in-canvas borders now actually overlap the shadow:
It's not clear to me that's problematic or not, I don't mind it — it's UI after all. One thing that's slightly more visible is the inconsistency around the site logo. Compare these upscaled versions, post editor: Site editor:
Both are 61px tall, that's the header height plus a 1px border below. But there's something different in the visual, not quite sure what it is. In both cases, should they now be 60px, since this PR effectively removes the discrepancy that was previously in place with the non-opacity border? |
Yes, the idea is that the shadow is visible when it's needed to define the separation between UI and editor (the lighter the background, the more definition is needed). The same effect is employed on color palette swatches, so that you can see where the color selector is contained to, when you don't see a visual difference between the UI background and the color itself.
Yes, this is also intentional, making the selection styles on fullwidth blocks much sharper and clear, as they're not right up against the light gray. Here's a before/after:
I'll take a look. |
|
@jasmussen updated the fullscreen close/site logo to be 1:1 across both:
|
|
Very nice. |
t-hamano
approved these changes
May 29, 2024
There was a problem hiding this comment.
LGTM!
I tested several scenarios on Windows OS.
Chrome:
Firefox:
Chrome, High Contrast Mode:
Firefox, High Contrast Mode:
Nit: We may want to avoid hard-coding color values.
diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss
index be8eced71d..5b77075b95 100644
--- a/packages/interface/src/components/interface-skeleton/style.scss
+++ b/packages/interface/src/components/interface-skeleton/style.scss
@@ -129,7 +129,7 @@ html.interface-interface-skeleton__html-container {
overflow: hidden;
@include break-medium() {
- box-shadow: -$border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+ box-shadow: -$border-width $border-width 0 0 rgba($color: $black, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
}
}
@@ -139,7 +139,7 @@ html.interface-interface-skeleton__html-container {
right: 0;
@include break-medium() {
- box-shadow: $border-width $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+ box-shadow: $border-width $border-width 0 0 rgba($color: $black, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
}
}
@@ -147,7 +147,7 @@ html.interface-interface-skeleton__html-container {
.interface-interface-skeleton__header {
flex-shrink: 0;
height: auto; // Keep the height flexible.
- box-shadow: 0 $border-width 0 0 rgba($color: #000, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
+ box-shadow: 0 $border-width 0 0 rgba($color: $black, $alpha: 0.133); // 0.133 = $gray-200 but with alpha.
z-index: z-index(".interface-interface-skeleton__header");
color: $gray-900;
outline: 1px solid transparent; // Shown for Windows 10 High Contrast mode.
carstingaxion
pushed a commit
to carstingaxion/gutenberg
that referenced
this pull request
Jun 4, 2024
* use shadows instead of borders * fix shadow overlap with header * transparent outline for high contrast windows * consistent fullscreen mode/site icon
patil-vipul
pushed a commit
to patil-vipul/gutenberg
that referenced
this pull request
Jun 17, 2024
* use shadows instead of borders * fix shadow overlap with header * transparent outline for high contrast windows * consistent fullscreen mode/site icon
|
Pardon me for being too lazy to make an issue at the moment and if I'm attributing this to the wrong PR. I'm seeing the block toolbar somehow not being shadowed: Can anyone confirm? Though I've been seeing it through various restarts of |
|
I was able to reproduce the issue as well. I haven't been able to fully investigate if this PR is related, but the issue does not occur in WP6.5. In the video below, the first half tests the latest Gutenberg, and the second half tests WP6.5.4. aaf0201dbdb95b00ff38d445d9eb9573.mp4 |
|
I used I've reported the issue on #62639. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Part of the exploration in #60286 and an alternate to #42282, attempting to reduce visual conflicts when viewing sites with background colors that are not lighter than $gray-200. Currently if the background color of the site is darker than the border, you end up with a slight distortion around the edges of the interface.
Also fixes a 1px offset when the Inspector is closed, from the animation adjusting the canvas based on the width of the sidebar (not accounting for the 1px border) in #60561.
How?
Replace borders with box shadows.
Testing Instructions
Screenshots or screencast