close
Skip to content

FontSizePicker: Show min-max range for fluid font sizes in dropdown.#69956

Closed
karthikeya-io wants to merge 1 commit intoWordPress:trunkfrom
karthikeya-io:update/font-size-picker-hints
Closed

FontSizePicker: Show min-max range for fluid font sizes in dropdown.#69956
karthikeya-io wants to merge 1 commit intoWordPress:trunkfrom
karthikeya-io:update/font-size-picker-hints

Conversation

@karthikeya-io
Copy link
Copy Markdown
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
Copy Markdown

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 <karthikeya01@git.wordpress.org>
Co-authored-by: karmatosed <karmatosed@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: uniquesolution <hozefasmile@git.wordpress.org>

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
Copy Markdown
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.

@jasmussen
Copy link
Copy Markdown
Contributor

It seems useful enough, and good motivation. My main question here is whether there's a good dropdown component that supports showing these two lines. The component in question, with the dark border, is an older one. I wonder, would you be able to use Menu instead? I think that could thread the needle, and show the ranges as help-text for each item.

@mirka
Copy link
Copy Markdown
Member

mirka commented Apr 16, 2026

Closing this out now since the original issue was closed already. Thanks!

@mirka mirka closed this Apr 16, 2026
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

5 participants