[wp-trac] [WordPress Trac] #63922: FontSizePicker incorrectly measures units for selecting elements

[WordPress Trac]

#63922: FontSizePicker incorrectly measures units for selecting elements
-------------------------------+------------------------------
 Reporter:  blackstar1991      |       Owner:  (none)
     Type:  defect (bug)       |      Status:  new
 Priority:  normal             |   Milestone:  Awaiting Review
Component:  General            |     Version:  6.8.2
 Severity:  normal             |  Resolution:
 Keywords:  reporter-feedback  |     Focuses:
-------------------------------+------------------------------

Comment (by 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


 <?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>
                 </>
         );
 }

 }}}

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63922#comment:3>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform