Devel

src/NumberWithUnit/NumberWithUnit.jsx

 import {SelectControl, TextControl} from "@wordpress/components";
 import {useState} from "react";
 
-export default function NumberWithUnit({label, onChange, value, className}) {
+export default function NumberWithUnit({
+										   label, onChange, value, className,
+										   units = [
+											   {label: 'px', value: 'px'},
+											   {label: '%', value: '%'},
+											   {label: 'em', value: 'em'},
+											   {label: 'pt', value: 'pt'},
+										   ]
+									   }) {
 
 	const splitValues = function (fontSize) {
 
@@ -9,22 +17,23 @@ export default function NumberWithUnit({label, onChange, value, className}) {
 			return { size: "0", unit: "px" };
 		}
 
-		const match = fontSize.match(/^(\d+)([a-z%]+)$/i);
+		const match = fontSize.match(/^(\d*\.?\d+)([a-z%]+)$/i);
 
 		if (!match) {
 			return { size: "16", unit: "px" };
 		}
+
 		return {
 			size: match[1],
 			unit: match[2]
 		};
-	}
+	};
+
 
 	const [unit, setUnit] = useState(splitValues(value).unit);
 	const [size, setSize] = useState(splitValues(value).size);
 
 
-
 	const handleChange = (newSize, newUnit) => {
 		if (onChange) {
 			onChange(newSize + newUnit);
@@ -37,7 +46,8 @@ export default function NumberWithUnit({label, onChange, value, className}) {
 			<div className='fi-field-label-wrapper'>
 				<span className='fi-field-label'>{label}</span>
 			</div>
-			<div className={'fi-field-buttons-wrapper fi-input-with-columns fi-numberwithfields-wrapper' + ' ' + className}>
+			<div
+				className={'fi-field-buttons-wrapper fi-input-with-columns fi-numberwithfields-wrapper' + ' ' + className}>
 				<TextControl
 					style={{flex: 3}}
 					type={'number'}
@@ -49,12 +59,7 @@ export default function NumberWithUnit({label, onChange, value, className}) {
 					}}
 				/>
 				<SelectControl
-					options={[
-						{label: 'px', value: 'px'},
-						{label: '%', value: '%'},
-						{label: 'em', value: 'em'},
-						{label: 'pt', value: 'pt'},
-					]}
+					options={units}
 					style={{minWidth: '56px'}}
 					value={unit}
 					onChange={(value) => {