Initial

blocks/components/LCPDimensionControl.js

@@ -0,0 +1,55 @@
+import { __ } from '@wordpress/i18n';
+import { SelectControl, TextControl } from '@wordpress/components';
+
+const LCPDimensionControl = ({ label, value, onChange, unitTypes }) => {
+    // Parse the current value into number and unit
+    const parseValue = (val) => {
+        const match = val?.match(/^(\d+)(.*)$/);
+        return match ? {
+            number: parseInt(match[1], 10),
+            unit: match[2] || 'px'
+        } : { number: 300, unit: 'px' };
+    };
+
+    const { number, unit } = parseValue(value);
+
+    // Default units
+    const allUnits = [
+        { label: 'Pixels (px)', value: 'px' },
+        { label: 'Percentage (%)', value: '%' },
+        { label: 'Viewport Width (vw)', value: 'vw' },
+        { label: 'Viewport Height (vh)', value: 'vh' }
+    ];
+
+    // Filter units based on unitTypes prop or use allUnits if unitTypes is not passed
+    const units = unitTypes && unitTypes.length > 0 
+        ? allUnits.filter(unit => unitTypes.includes(unit.value)) 
+        : allUnits;
+
+    return (
+        <div className="lcp-dimension-control">
+            <label className="components-base-control__label">{label}</label>
+            <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
+                <TextControl
+                    type="number"
+                    value={number}
+                    onChange={(newNumber) => {
+                        onChange(`${newNumber}${unit}`);
+                    }}
+                    min={0}
+                    style={{ width: '80px' }}
+                />
+                <SelectControl
+                    value={unit}
+                    options={units}
+                    onChange={(newUnit) => {
+                        onChange(`${number}${newUnit}`);
+                    }}
+                    style={{ minWidth: '100px' }}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default LCPDimensionControl;