FontSizePicker incorrectly measures units for selecting elements

[blackstar1991]

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 />

I saw this. ->

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"

[yashjawale]

Hi @blackstar1991
Thanks for reporting the error, however, I'm not able to reproduce the problem on my end. After selecting the predefined sizes I get px unit back as expected

Also your problem looks more related to Gutenberg & perhaps can be better discussed over there

​https://github.com/WordPress/gutenberg/issues

Perhaps, you can provide more details so that this error can be reproduced & then fixed consecutively

---

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.8.2
• PHP: 8.2.23
• Server: nginx/1.26.1
• Database: mysqli (Server: 8.0.35 / Client: mysqlnd 8.2.23)
• Browser: Chrome 139.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.3
• MU Plugins: None activated
• Plugins:
  • FontSizePicker Unit Bug Replication 1.0.0
  • Gutenberg 21.5.0
  • Test Reports 1.2.0

Actual Results

1. ⚠️ Unable to reproduce problem -- more info needed

Additional Notes

• I tested the problem by spinning up a new plugin generated by AI, a simple one that uses FontSizePicker component (Attaching the plugin file to ticket)
• I also tried unitless mode of the component, where it falls back to px by default, there too it was working as expected

Supplemental Artifacts

Screencast: ​https://files.catbox.moe/yfdzyi.mov

[yashjawale]

Test plugin that tries to reproduce bug

[blackstar1991]

Hi, @yashjawale I have created a simple example that is used in a large plugin. I hope this helps to understand why this problem occurs and that some warnings might be added to the WordPress core to prevent it.

You can see problem here ->
Plugin test-font-size ​https://drive.google.com/file/d/1kLQ_gVps0T3Oh7r37M6YN_Jj0La139Wu/view?usp=sharing

<?php
import { __ } from '@wordpress/i18n';
import { RichText, InspectorControls, FontSizePicker, useBlockProps } from '@wordpress/block-editor';
import { PanelBody } from '@wordpress/components';
import { useEffect, useMemo } from '@wordpress/element';
import './editor.scss';

function normalizeSize( value ) {
        if ( value === undefined || value === null || value === '' ) {
                return undefined;
        }
        if ( typeof value === 'number' ) {
                return value;
        }

        const m = String( value ).match( /^([\d.]+)/ );
        if ( m ) {
                return parseFloat( m[1] );
        }
        return undefined;
}

export default function Edit({ attributes, setAttributes }) {
        const { otherSiteTitle, titleFontSize, titleFontUnit } = attributes;

        const numericFontSize = normalizeSize( titleFontSize );
        const fontSizeValue = numericFontSize ? `${ numericFontSize }${ titleFontUnit || 'px' }` : undefined;

        useEffect(() => {
                console.log('[DEBUG block attrs]', { titleFontSize, titleFontUnit, numericFontSize, fontSizeValue, otherSiteTitle });
        }, [ titleFontSize, titleFontUnit, otherSiteTitle, numericFontSize, fontSizeValue ]);

        const blockProps = useBlockProps();
        const wrapperKey = useMemo(() => `font-${fontSizeValue || 'default'}`, [ fontSizeValue ]);

        return (
                <>
                        <InspectorControls>
                                <PanelBody title={ __( 'Typography', 'test-font-size' ) } initialOpen={ true }>
                                        <FontSizePicker
                                                fontSizes={[
                                                        { name: 'Small', size: 12, slug: 'small' },
                                                        { name: 'Normal', size: 16, slug: 'normal' },
                                                        { name: 'Big', size: 26, slug: 'big' },
                                                ]}
                                                value={ numericFontSize !== undefined ? numericFontSize : undefined }
                                                onChange={ ( newSize ) => {
                                                        setAttributes({
                                                                titleFontSize: newSize === undefined ? '' : newSize,
                                                                titleFontUnit: 'px',
                                                        });
                                                }}
                                                withSlider
                                        />
                                </PanelBody>
                        </InspectorControls>

                        <div
                                key={ wrapperKey }
                                { ...blockProps }
                                style={ {
                                        fontSize: fontSizeValue,
                                } }
                        >
                                <RichText
                                        tagName="p"
                                        value={ otherSiteTitle }
                                        onChange={ ( val ) => setAttributes({ otherSiteTitle: val }) }
                                        placeholder={ __( 'Add other side text', 'test-font-size' ) }
                                />
                        </div>
                </>
        );
}

[yashjawale]

Thanks @blackstar1991 for the update!
I'll check this & report the findings here

[blackstar1991]

Can anyone help? I don't understand what the problem is with this element.

[wildworks]

@blackstar1991 Do you mind submitting a new issue on ​the Gutenberg GitHub repo? This is because the FontSizePicker component is developed there.

[blackstar1991]

Thanks, created ​https://github.com/WordPress/gutenberg/issues/71967