Adding Font size presets UI #63057
Adding Font size presets UI #63057
Conversation
|
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: +1.96 kB (+0.11%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
matiasbenedetto
added
[Type] Feature
|
It looks amazing :) Good job @matiasbenedetto 👍 One question: Couldn't this component be used for margins and paddings too, so they can be adjusted centrally? |
@BenjaminZekavica do you mean implementing this kind of UI to manage the spacing presets? |
|
Took this one for a spin. It's close!
I'm not sure if all of the following feedback has to be addressed in this PR, probably much of it are existing issues. But we should circle back to fix these, they are starting to compound. One issue:
This is using the "ItemGroup" pattern. Those should always be 40px tall, like buttons. This one is ~44px. CC: @richtabor as I know you've worked on an adjacent palette drilldown, in case there's some DNA we can share. If the heading should match from ItemGroup to drilldown title, it should say "Font size presets" (note, no number of presets, and fix the typo that says "Font sizes presets". Depending on what Rich says, though, we might want to change it to "Edit size presets". Similarly, these itemgroup items are ~32px, and should also be 40px:
A few more things:
There's still some curious focus style issue for itemgroup items: When I open the modal to rename a preset, focus is on the dialog itself:
Can you set focus on the input field? Then it will match similar rename dialogs elsewhere in the UI:
This option could use an "Are you sure" confirm:
For the individual font sizes:
A possible followup to consider; if you set a min-value that's larger than the max value, nothing happens, and the max value is used. Perhaps we can be smarter? Or maybe it's fine? With that, I think we can land this one. |
|
@jasmussen Thanks for the review! I implemented all your suggestions. I left out only 2 items:
This seems related to the styles of that component. This PR doesn't add or modify the styles of that component so I consider this item out of the scope of this PR.
Make the controls smarter seems good for a follow-up. I think it should not block this implementation. |
|
This is getting close. Here's a status:
A question:
What happens to the base "Size" when you add custom fluid values? The preview appears to still render from the base size. This may become a rabbit hole, but I wonder if the base size panel should be grayed and say "Fluid" in italic" inside the disabled field, when custom values are added? Kind of like how Image dimensions say "auto"? Would appreciate a gut-check by @WordPress/gutenberg-design on this one. These items are now 49px tall:
As I noted in another PR, every ItemGroup should be exactly 40px tall, unless we're looking at edgecases where the text wraps. I also noted that this may be a separate issue. The padding left and right is also larger than in other ItemGroup Items. But in case you added a "large" prop here, best remove it at least. A way to think of it is that we are creating a typography counterpart to this palette screen:
The last piece is this one, and I'd also love additional input on this: IMO it should say either "Font size presets" (without a number), or it should say "Edit size presets" (also without a number). The former matches the drilldown page title, the latter is more active language. If there's broad support for including the number, then it should be "6 font size presets" (lowercase f), but let's hear from @WordPress/gutenberg-design. These all seem small, so nice work, this is very close! Agreed many of the feedback items can be separate. |
I removed the large prop, but the tall of the ItemGroup component seems out of the scope of this PR because it wasn't changed in any way in this implementation and I think it should not block it. |
It seems like the base size is ignore when a min a max is set so it would good to add some kind of visual hint about that. |
| selectedBlockClientId, | ||
| selectedBlockName, | ||
| blockHasGlobalStyles, | ||
| navigator, |
There was a problem hiding this comment.
This new dependency on navigator is causing the push-to-global-styles test to fail. The test expects to need to click the "Headings" button in the Styles panel, but the Styles panel path is now updated whenever the selected block changes, which means the Headings panel is opened automatically when a Heading block is selected.
This saves a click, but I'm not sure what the intended behaviour is. Either:
- The Styles panel path should update whenever the selected block changes - saves on clicks, but is different to the current behaviour.
- The Styles panel path does not change regardless of the selected block, and it will only change with direct interaction (i.e. navigation) within the Styles panel.
If it's number 1 we should update the test to remove these additional navigation clicks; if it's number 2 then I think we should remove the dependency on navigator here.
What?
Adds UI to Global styles to allow modification of font size presets.
Fixes: #61987
This implementation started here #62328 but the approach used changed so I'm continuing that work in this new PR.
Why?
To allow users to edit the font size presets using the editor.
How?
By implementing the UI to handling creation, update and removal of font size presets.
Testing Instructions
Watch the screencast to see how the UI works and try to use the feature on your testing env.
Screenshots or screencast
Screencast.from.02-07-24.17.45.39.webm
📝 Reminder:
Before merging add the props from the first PR: