Font size picker: use t-shirt sizes for the ToggleGroupControl component #43074
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
- Use t-shirt sizes for the first 5 font sizes, where there are fewer than font sizes in total. - Remove unused code.
ramonjd
added
[Status] In Progress
|
Size Change: +3.63 kB (0%) Total Size: 1.27 MB
ℹ️ View Unchanged
|
|
Nice! I see the numbers before: And the t-shirt sizes after:
I'm missing the little tips, though: I'm aware those can get out of sync as we sequentially blanket apply the t-shirt sizes, unaware of what theme.json might have defined. But I still think it's a nice generic scale to apply as a guideline for sizes, plus there's the option of adding 6 sizes for total customizability in the dropdown. What do you think? |
For sure. I think theme authors are clued in enough to understand that they can determine the order of theme.json font sizes. 👍
Whoops! Updated. |
jasmussen
approved these changes
Aug 10, 2022
Added @aaronrobertshaw for when he has time to cast his eye over the changes. 🙇 |
There was a problem hiding this comment.
Thanks for iterating on this control @ramonjd 👍
The t-shirt aliases work as advertised for me.
✅ Unit tests pass.
✅ Worked with various combinations in theme.json
✅ Tested with a few themes e.g. TwentyTwenty, TT1, TwentyTwentyTwo, Blockpress, emptytheme etc.
I've added @ntsekouras to the reviewers given his prior work and knowledge around this component. He might be aware of some edge cases we haven't yet considered.
We'll need a changelog for this as well.
ntsekouras
reviewed
Aug 11, 2022
There was a problem hiding this comment.
Thanks for the PR @ramonjd!
I haven't tested the PR, but the code seems good..
The main issue, that you mention already, would be that the labels are applied based on the order of declaration of the font sizes and these might not be in ascending order.. That was the reason for adding the alias in theme.json in the other PR - which is not the case here.
ntsekouras
reviewed
Aug 11, 2022
Co-authored-by: Aaron Robertshaw <[email protected]> Co-authored-by: Nik Tsekouras <[email protected]>
…h safecss_filter_attr
|
Thanks for the reviews @ntsekouras and @aaronrobertshaw 🙇 I've committed your suggestions. |
|
Just a note that with the spacing presets we went with the format |
Thanks @glendaviesnz Do you think it's worth unifying here? Side-by-side, would the controls appear disjointed? I can merge as is for a start - as you say, there won't be more than 5 sizes for fonts. I'm very happy to add follow ups. |
Let's just see how it looks once the spacing sizes UI is merged. |
💥 |
|
Thank you! |
|
I'm testing out TT3 (so it's very possible this is a TT3 issue), but I'm seeing an "undefined" name for the XXL value:
Here are the theme.json definitions: The XXL name doesn't show up unless I add |
|
@ramonjd I may have forgotten to test the 5th (XXL) t-shirt size as TT2 comes with 4 presets. 🙈 |
Hmmm, so long as there are five presets it doesn't matter what the content of the properties are 🤔
That would do it! 😇 |
Forgive me I'm not sure I understand. Just to be clear, so long as you have 5 size presets or less, the should map to the segmented control. And they do, which is good! The problem is that only the 4 first sizes properly get their |
Ah got it, thanks. Yeah, that doesn't sound right! I'll take a look at this. |
15 tasks
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?
A very quick POC PR.
The t-shirt sizes do not take into account the order of or the values of the font sizes.
The first five font sizes, however they are ordered will be labelled according to the t-shirt aliases:
[ 'S', 'M', 'L', 'XL', 'XXL' ]Related PRs:
Why?
For context see:
How?
Looking at a previous commit that attempted to do something similar: 9a83492
Testing Instructions
Use emptytheme or another theme.json that has fewer than 6 font sizes defined.
Example theme.json
{ "version": 2, "settings": { "appearanceTools": true, "layout": { "contentSize": "840px", "wideSize": "1100px" }, "typography": { "fluid": true, "fontSizes": [ { "size": "clamp(36.00rem, calc(32.00rem + 10.00vw), 40.00rem)", "slug": "small", "fluid": false, "name": "NOT small" }, { "size": "4rem", "slug": "medium", "name": "Not medium" }, { "size": "10px", "slug": "largish", "name": "Largish" }, { "size": "13px", "fluid": false, "slug": "largey", "name": "NotXtra Large" }, { "size": "14px", "fluid": false, "slug": "colossal", "name": "Colossal" } ] } } }Open up the editor.
Insert a text block.
Check the font size picker.
2022-08-08.12.01.42.mp4