Skip to content

FontSizePicker incorrectly measures units for selecting elements #71967

Open

Description

@BlackStar1991

Description

I see that WordPress show incorrect information of units of FontSizePicker if user choose default to the labels 'S / M / L / XL / XXL'.

Example my component

<FontSizePicker
	__next40pxDefaultSize
	fontSizes={ [
		{
			name: 'Small',
			size: 12,
			slug: 'small',
		},
		{
			name: 'Normal',
			size: 16,
			slug: 'normal',
		},
		{
			name: 'Big',
			size: 26,
			slug: 'big',
		},
	] }
	value={ titleFontSize ? parseFloat( titleFontSize ) : undefined }
	onChange={ ( newSize ) => {
		if ( newSize === undefined ) {
			setAttributes( {
				titleFontSize: '16',
				titleFontUnit: 'px',
			} );
			return;
		}
		setAttributes( {
			titleFontSize: String( newSize ),
			titleFontUnit: 'px',
		} );
	} }
	withSlider
/>;

Step-by-step reproduction instructions

I created a simple plugin to see the problem

Screenshots, screen recording, code snippet

I saw this. ->

Image
This component does not correctly indicate the units of measurement when switching between different states. Ideally it should show the font size in "px" but in fact it displays the value in "rem", but writes that it is "px"

Image

Environment info

I use WordPress Version 6.8.2 with current Gutenberg

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Activity

  1. CharlesAustin commented on Oct 15, 2025

    @CharlesAustin

    Took a quick look and wasn't able to reproduce this, do you have a link to a git repository as opposed to a zip file for more in-depth testing?

  2. BlackStar1991 commented on Oct 22, 2025

    @BlackStar1991
    Author
  3. github-actions commented on Nov 22, 2025

    @github-actions

    Hi,
    This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
    Thanks for helping out.

  4. added
    [Status] StaleGives the original author opportunity to update before closing. Can be reopened as needed.
    on Nov 22, 2025
  5. added and removed
    Needs TestingNeeds further testing to be confirmed.
    [Status] StaleGives the original author opportunity to update before closing. Can be reopened as needed.
    on Dec 10, 2025
  6. SirLouen commented on Dec 10, 2025

    @SirLouen
    Member

    Reproduction Report

    Description

    ✅ This report can validate that the issue can be reproduced.

    Environment

    • WordPress: 7.0-alpha-61215-src
    • PHP: 8.2.29
    • Server: nginx/1.29.3
    • Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
    • Browser: Chrome 143.0.0.0
    • OS: Windows 10/11
    • Theme: Twenty Twenty-Five 1.4
    • MU Plugins: None activated
    • Plugins:
      • Example Static 0.1.0
      • Gutenberg 22.2.0
      • Test Reports 1.2.1

    Testing Instructions

    1. Using the following Playground setup with the plugin provided by the user here:
      https://playground.wordpress.net/?blueprint-url=https%3A%2F%2Fgist.githubusercontent.com%2FSirLouen%2Fad20b27776227c6a53b418a44b564817%2Fraw%2Fe5b5d0b828980041584f1f01416125353f4cb146%2Fgistfile1.txt&php=8.3&wp=trunk&networking=yes&language=&multisite=no&random=47puqlcay9y

    Raw blueprint: https://gist.githubusercontent.com/SirLouen/ad20b27776227c6a53b418a44b564817/raw/e5b5d0b828980041584f1f01416125353f4cb146/gistfile1.txt

    1. Create a new post
    2. Add the Test block
    3. Set font size to custom 16px
    4. Click on the Use size preset button
    5. Select S
    6. Click on the Set custom size button
    7. ❓ Size is set to 0.875 px

    Actual Results

    1. ✅ Issue condition is ocurring

    Additional Notes

    • I have updated this report and updated the reproduction instructions as I've managed to reproduce it.
  7. BlackStar1991 commented on Dec 10, 2025

    @BlackStar1991
    Author

    @SirLouen Please try again
    Windows 10 Wordpress 6.9 Chrome 147

    Image

  8. SirLouen commented on Dec 10, 2025

    @SirLouen
    Member

    @SirLouen Please try again
    Windows 10 Wordpress 6.9

    Image

    Are you using the playground link I put? Which browser are you using?

    Oh wait I think I can reproduce it, I will give it a second go later

  9. added
    Needs TestingNeeds further testing to be confirmed.
    and removed on Dec 11, 2025
  10. self-assigned this
    on Dec 11, 2025
  11. added theissue type on Dec 11, 2025
  12. added
    [Type] DiscussionFor issues that are high-level and not yet ready to implement.
    and removed
    [Type] BugAn existing feature does not function as intended
    on Dec 11, 2025
  13. removed theissue type on Dec 11, 2025
  14. SirLouen commented on Dec 11, 2025

    @SirLouen
    Member

    I've been able to reproduce it with your conditions, and I've updated the instructions for the reproduction report so now it's very easy to follow

    Be aware that I'm not 100% confident that the plugin provided is working as it should, and if this is or isn't the expected behavior. All I've done is testing with the provided instructions. I have not dug further into the font-size-picker component and I'm not sure if this should be extended in your plugin to cover your use case, or if it's actually a bug, or an enhancement.

    I'm going to switch the Type to Discussion, I would like to have someone more versed in this component that I am comment with a better opinion. If it can be confirmed, that this is actually a bug, I will switch it back to Bug.

    cc @luminuu

  15. removed their assignment
    on Dec 11, 2025
  16. sarthaknagoshe2002 commented on Jul 2, 2026

    @sarthaknagoshe2002
    Contributor

    I have investigated this and tested it using multiple plugins and multiple ways. I am unable to reproduce the issue; the FontSizePicker component appears to be working fine natively on my end.

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Package] Components/packages/components[Type] DiscussionFor issues that are high-level and not yet ready to implement.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions