Skip to content
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

FontSizePicker: Allow custom units #48468

Merged
merged 3 commits into from
Mar 7, 2023

Conversation

aaronrobertshaw
Copy link
Contributor

What?

Updates the FontSizePicker to allow the customization of the available units when displaying the custom font size control.

Why?

It might benefit theme authors to be able to control the available custom font size units.

How?

  • Adds support for a units prop that can be used to set the available units for the custom font size control.
  • Updates the README to match latest preferred format and add missing size prop

Next Steps

This PR came about through a discussion on filtering or disabling units within the custom font size picker for the editor's typography panel. If we add support for custom units to the FontSizePicker component we'll still need to update our typography panel to handle passing the desired units to the component.

Testing Instructions

  1. Run npm run test:unit packages/components/src/font-size-picker and ensure everything still passes
  2. Load Storybook (npm run storybook:dev) and check the FontSizePicker examples function
  3. Within the controls section of the With Units example update the preset font sizes to match the allowed units
  4. Update the units prop to the desired units e.g. [ 'em' ]
  5. Switch the control to the custom control view and confirm the units available match the units prop.

Note: If you do not update the font sizes you might have a value set in the control containing a non-allowed unit such as px which would show in the available units until the value is changed or control is reset.

Screenshots or screencast

Screen.Recording.2023-02-27.at.1.50.59.pm.mp4

@aaronrobertshaw aaronrobertshaw added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Feb 27, 2023
@aaronrobertshaw aaronrobertshaw self-assigned this Feb 27, 2023
@aaronrobertshaw aaronrobertshaw changed the title Update/font size picker allow custom units FontSizePicker: Allow custom units Feb 27, 2023
Copy link
Contributor

@glendaviesnz glendaviesnz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Worked as advertised for me

@aaronrobertshaw aaronrobertshaw force-pushed the update/font-size-picker-allow-custom-units branch from 0dcae8a to 079056f Compare March 6, 2023 23:32
@github-actions
Copy link

github-actions bot commented Mar 7, 2023

Flaky tests detected in 079056f.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4348986647
📝 Reported issues:

@aaronrobertshaw aaronrobertshaw merged commit ada4efa into trunk Mar 7, 2023
@aaronrobertshaw aaronrobertshaw deleted the update/font-size-picker-allow-custom-units branch March 7, 2023 03:33
@github-actions github-actions bot added this to the Gutenberg 15.4 milestone Mar 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants