Update elevation in the site editor #65410
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
|
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: +291 B (+0.02%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
jameskoster
added
the
Design System
jasmussen
approved these changes
Sep 26, 2024
|
Flaky tests detected in aec7f08. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10906471907
|
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.
Follow up to #65159
What?
Applies elevation scale values to site editor elements using custom shadows and to any elements that require shadows but currently lack them.
Why?
Consistency and polish.
So far as I can tell there are only two elements that need updating...
Drag chip
When dragging blocks (either on the canvas or in list view) a dark chip appears. I've applied
$elevation-smallhere:Preview frame
It's tricky to see given it appears on such a dark background, but the preview frame has a strong shadow applied. It's much easier to see if we adjust the main background color:
I've switched the resting shadow to
$elevation-x-smallincreasing to$elevation-largeon hover (given the transform animation), in line with the scale outlined in #64108. This change is barely perceptible currently, but will become more apparent when the color scale is expanded (#53612) and modes like light/dark become available. In the mean time here's a demo with an adjusted background color as before:frame.mp4
In addition to updating the elements above, I've added elevation to the 'Content frame'. Once again this isn't visible now due to the dark background, but will become important later. Here's a demonstration of how this would look in a dedicated "Light mode":
Testing Instructions
.edit-site-resizable-frame__inner-contentincluding hover effect (this is easier if you change the background color applied to.edit-site-layoutin dev tools..edit-site-layout__area.