Add vw and vh units to the custom font size picker #60607
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
|
@ramonjd Hi, I am pinging you early because I think I am missing something. I am trying to add the vw and vh units to the font size picker, and I don't think it can be as easy as this? I can't help thinking that, if it only required this code change, why did we not add it earlier? There must be a rabbit hole somewhere :) |
|
Size Change: +5 B (0%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
|
Thanks for the ping @carolinan
How many times have I thought this too 😄 ? The PR tests well in the editor. I can't think of any technical reason why we couldn't support these units. Not to say there aren't rabbit holes, yet from a code perspective I can't see any obvious ones. The only issue that occurs to me right now is that fluid typography doesn't yet support So a user might be left wondering why some units are converted to clamp values and others not. I suppose one day this could be communicated via the UI somehow, or integrated into any controls we might consider, e.g., Pinging @jasmussen for a design perspective. |
|
I suppose we could ask the community if this would be useful without clamp(). I'll ask in the issue. |
|
The motivation for fluid typography is one of "it just works", and both vh and vw units are fluid in their own way. To that end I'd think this could be as simple as just allowing those units as Carolina suggests. There's still a very separate question around how the initial theme.json font size array can be built using the editor, and since theme.json allows a font size preset to be fluid or not, that's something you need to be able to build using global styles. That's mostly a UI design question, but it might eventually overlap with some of aspects of this conversation. |
carolinan
changed the title
|
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. |
|
Flaky tests detected in 838066c. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/8657300338
|
|
Just to first confirm that we're making the intended changes — do we want to expand the unit types that are available in the Typography panel only? Or expand the default unit types for everybody that uses the FontSizePicker component? The PR description suggests that the intent was the former, but the code changes here will do the latter. Let me know and I can advise on where to make the changes. |
|
🤔 Great question. I think these units are relevant enough to be added to the component... |
mirka
reviewed
Apr 23, 2024
There was a problem hiding this comment.
I noticed that there is some isValueUnitRelative logic that determines whether to tweak the max and step values. vw and vh are both relative values — can we bunch them in with em and rem for this same logic, or do we want other values for max and step for these units?
gutenberg/packages/components/src/font-size-picker/index.tsx
Lines 253 to 254 in 6527034
I wouldn't consider this a "breaking" change so I don't mind either way, but I'm just wondering whether I also wanted to make sure it was clear that we're changing the defaults. Any consumer of FontSizePicker could've already passed |
|
For the range slider, it makes sense to me to limit the max value to 10 instead of 100, not least because starting at 50 would be very large. What about the native file? I probably should not have touched it @WordPress/native-mobile. |
|
Here is the range slider in the custom font size control in the Typography panel, with the decimals and max value at 10. Screen.Recording.2024-04-24.at.10.56.33.mp4 |
I'll take a look 👍 |
|
All working well on mobile, thanks for the ping! 🚀 |
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?
Add the
vwandvhunits to the custom font size picker.Partial for #23323
Why?
The custom font size picker is limited to using px, em, rem. Users are asking for the units to be extended (The units are also more limited than in the custom spacing control, where px, em, rem %, vw and vh are supported)
How?
The PR updates the units in the font size picker component.
Testing Instructions
Add a text based block like a paragraph.
Open the block settings and open the Typography panel.
Select "Set custom size".
Confirm that vw and vh units can be selected.
Select them and confirm that the units are used in the editor and front.
Testing Instructions for Keyboard
Screenshots or screencast