-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
Allow using CSS level 4 viewport-relative units #54415
Conversation
Size Change: +1.09 kB (0%) Total Size: 1.65 MB
ℹ️ View Unchanged
|
38e563f
to
c37bdad
Compare
c37bdad
to
71c990e
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code-wise this looks good to me. It enables components/themes to use these new units without enabling them by default.
@aristath, I'll leave the decision of updating labels to you.
febc88b
to
fe741ae
Compare
Hey folks, when making changes to |
My apologies @ciampo, I missed that. Do you want me to do a quick follow-up PR? |
That would be great, thank you! Feel free to ping me for the review :) |
Thanks! Added a PR in #55201 👍 |
Seemingly related to this PR above, Chiming in that this opt-in of new units works correct for padding, block gap, min height, BUT is not showing up in the dropdown for Dimensions > Height > Fixed (a field that only appears for certain nested group/stack/row blocks for example) Started an issue here to discuss and shared a screenshot etc: #67750 |
What?
Adds support for viewport-relative, CSS level-4 units.
These units are not exposed anywhere by default, but if a user enables them via
theme.json
, they should be available.All these units have good browser support (see https://caniuse.com/viewport-unit-variants) and will allow designers to build more versatile interfaces.
Fixes #52441
Why?
Because we should not explicitly forbid the use of CSS units - which is what happens if they are not defined in our lists of available CSS units.
How?
Testing Instructions
theme.json
file. Insettings.spacing.units
we have an array of units that the theme supports. In that array, add some of the units defined in this PR (like for examplesvmin
,svmax
)Testing Instructions for Keyboard
Nothing specific for keyboard users. This change allows selecting more units, and does not change the existing selectors so nothing changes in the UI/UX.
Screenshots or screencast