wp-react-components/TextSizeControl.js

import { useState, Fragment } from '@wordpress/element';
import { __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, __experimentalUnitControl as UnitControl, Icon } from '@wordpress/components';
import { useSettings } from '@wordpress/block-editor';
import { settings } from '@wordpress/icons';

export default function TextSizeControl({ value = '', onChange, title = 'Font Size' }) {
    const { typography } = useSettings() || {};
    const fontSizes = (typography && typography.fontSizes) || [];

    const letters = ['S', 'M', 'L', 'XL', 'XXL'];
    const sizeMap = {};
    fontSizes.forEach((fs, index) => {
        const cssSize = fs.fluid?.max || fs.size;
        const key = letters[index] || fs.slug || fs.name;
        sizeMap[key] = cssSize;
    });

    const initialKey = Object.keys(sizeMap).find(k => sizeMap[k] === value) || Object.keys(sizeMap)[0];
    const [selected, setSelected] = useState(initialKey);
    const [advanced, setAdvanced] = useState(false); // toggle between preset and UnitControl

    const handleToggleChange = (key) => {
        setSelected(key);
        if (onChange) onChange(sizeMap[key]);
        console.log('[TextSizeControl] Toggle selected:', key, '=>', sizeMap[key]);
    };

    return (
        <Fragment>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem', cursor: 'pointer' }}
                 onClick={() => setAdvanced(!advanced)}
            >
                <span style={{ fontWeight: 'bold' }}>{title}</span>
                <Icon icon={settings} />
            </div>

            {!advanced ? (
                <ToggleGroupControl
                    label=""
                    isBlock
                    value={selected}
                    onChange={handleToggleChange}
                >
                    {Object.keys(sizeMap).map((key) => (
                        <ToggleGroupControlOption key={key} value={key} label={key} />
                    ))}
                </ToggleGroupControl>
            ) : (
                <UnitControl
                    value={value || ''}
                    onChange={(newValue) => {
                        console.log('[TextSizeControl] UnitControl value:', newValue);
                        if (onChange) onChange(newValue);
                    }}
                    label="" // optional, already have header
                />
            )}
        </Fragment>
    );
}