Initial

TextSizeControl.js

@@ -0,0 +1,60 @@
+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>
+    );
+}