Initial

2025-01-15 02:06:22 -08:00
commit 7df4855b60
20 changed files with 22169 additions and 0 deletions
--- a/components/LCPDimensionControl.js
+++ b/components/LCPDimensionControl.js
@ -0,0 +1,49 @@
+import { __ } from '@wordpress/i18n';
+import { SelectControl, TextControl } from '@wordpress/components';
+
+const LCPDimensionControl = ({ label, value, onChange }) => {
+    // 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);
+
+    const units = [
+        { label: 'Pixels (px)', value: 'px' },
+        { label: 'Percentage (%)', value: '%' },
+        { label: 'Viewport Width (vw)', value: 'vw' },
+        { label: 'Viewport Height (vh)', value: 'vh' }
+    ];
+
+    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;