Fix: Allow decimals in spacing controls (#32692)

* Add a default step to all CSS units * add step to roundClamp
WordPress · Jun 18, 2021 · da7a927 · da7a927
1 parent f4f3844
commit da7a927
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/components/src/number-control/index.js b/packages/components/src/number-control/index.js
@@ -155,7 +155,7 @@ export function NumberControl(
 			type === inputControlActionTypes.PRESS_ENTER ||
 			type === inputControlActionTypes.COMMIT
 		) {
-			state.value = roundClamp( currentValue, min, max );
+			state.value = roundClamp( currentValue, min, max, step );
 		}
 
 		return state;

diff --git a/packages/components/src/unit-control/utils.js b/packages/components/src/unit-control/utils.js
@@ -17,90 +17,105 @@ const allUnits = {
 		label: isWeb ? 'px' : __( 'Pixels (px)' ),
 		default: '',
 		a11yLabel: __( 'Pixels (px)' ),
+		step: 1,
 	},
 	percent: {
 		value: '%',
 		label: isWeb ? '%' : __( 'Percentage (%)' ),
 		default: '',
 		a11yLabel: __( 'Percent (%)' ),
+		step: 0.1,
 	},
 	em: {
 		value: 'em',
 		label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ),
 		default: '',
 		a11yLabel: _x( 'ems', 'Relative to parent font size (em)' ),
+		step: 0.01,
 	},
 	rem: {
 		value: 'rem',
 		label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ),
 		default: '',
 		a11yLabel: _x( 'rems', 'Relative to root font size (rem)' ),
+		step: 0.01,
 	},
 	vw: {
 		value: 'vw',
 		label: isWeb ? 'vw' : __( 'Viewport width (vw)' ),
 		default: '',
 		a11yLabel: __( 'Viewport width (vw)' ),
+		step: 0.1,
 	},
 	vh: {
 		value: 'vh',
 		label: isWeb ? 'vh' : __( 'Viewport height (vh)' ),
 		default: '',
 		a11yLabel: __( 'Viewport height (vh)' ),
+		step: 0.1,
 	},
 	vmin: {
 		value: 'vmin',
 		label: isWeb ? 'vmin' : __( 'Viewport smallest dimension (vmin)' ),
 		default: '',
 		a11yLabel: __( 'Viewport smallest dimension (vmin)' ),
+		step: 0.1,
 	},
 	vmax: {
 		value: 'vmax',
 		label: isWeb ? 'vmax' : __( 'Viewport largest dimension (vmax)' ),
 		default: '',
 		a11yLabel: __( 'Viewport largest dimension (vmax)' ),
+		step: 0.1,
 	},
 	ch: {
 		value: 'ch',
 		label: isWeb ? 'ch' : __( 'Width of the zero (0) character (ch)' ),
 		default: '',
 		a11yLabel: __( 'Width of the zero (0) character (ch)' ),
+		step: 0.01,
 	},
 	ex: {
 		value: 'ex',
 		label: isWeb ? 'ex' : __( 'x-height of the font (ex)' ),
 		default: '',
 		a11yLabel: __( 'x-height of the font (ex)' ),
+		step: 0.01,
 	},
 	cm: {
 		value: 'cm',
 		label: isWeb ? 'cm' : __( 'Centimeters (cm)' ),
 		default: '',
 		a11yLabel: __( 'Centimeters (cm)' ),
+		step: 0.001,
 	},
 	mm: {
 		value: 'mm',
 		label: isWeb ? 'mm' : __( 'Millimeters (mm)' ),
 		default: '',
 		a11yLabel: __( 'Millimeters (mm)' ),
+		step: 0.1,
 	},
 	in: {
 		value: 'in',
 		label: isWeb ? 'in' : __( 'Inches (in)' ),
 		default: '',
 		a11yLabel: __( 'Inches (in)' ),
+		step: 0.001,
 	},
 	pc: {
 		value: 'pc',
 		label: isWeb ? 'pc' : __( 'Picas (pc)' ),
 		default: '',
 		a11yLabel: __( 'Picas (pc)' ),
+		step: 1,
 	},
 	pt: {
 		value: 'pt',
 		label: isWeb ? 'pt' : __( 'Points (pt)' ),
 		default: '',
 		a11yLabel: __( 'Points (pt)' ),
+		step: 1,
 	},
 };