Skip to content

Conversation

@karthikeya-io
Copy link
Contributor

@karthikeya-io karthikeya-io commented Apr 21, 2025

What?

Closes #69939

This PR updates the FontSizePickerSelect component to improve how fluid font size presets are displayed in the dropdown. Instead of using the size property as the hint, it now shows values from the fluid property (min and max) when they are available.

Why?

Currently, the FontSizePickerSelect component uses the size property as the hint, even when the fluid property is present. However, the size may not accurately represent the rendered font size for fluid presets, as it is derived from the min–max fluid range.

This change helps reduce confusion by explicitly displaying the fluid font size range in the UI.

How?

Updated the FontSizePickerSelect component to:

  • Check for the presence of fluid.min and fluid.max
  • Display:
    • Fluid (min – max) when both are defined
    • Fluid (≥ min) when only min is defined
    • Fluid (≤ max) when only max is defined

Testing Instructions

  1. Select a block like paragraph or heading
  2. Open the Typography → Font Size settings
  3. Verify that the dropdown hints use values from the fluid property when its present.
    Note: Update theme.json to have atleast 6 sizes to enable the dropdown selector instead of toggle.

Testing Instructions for Keyboard

Same

Screenshots or screencast

Before After
image image

@karthikeya-io karthikeya-io marked this pull request as ready for review April 22, 2025 07:42
@github-actions
Copy link

github-actions bot commented Apr 22, 2025

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: karthikeya-io <[email protected]>
Co-authored-by: karmatosed <[email protected]>
Co-authored-by: uniquesolution <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components Needs Design Feedback Needs general design feedback. labels Apr 22, 2025
@karmatosed
Copy link
Member

We could have done with design feedback on the issue before jumping to PR so let's do that first then consider this PR after. For now please don't merge this until a direction is decided.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Needs Design Feedback Needs general design feedback. [Package] Components /packages/components [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fluid Font size digit value in font selector dropdown is confusing

3 participants