Don't hardcode CSS units (#32482)

* letter-spacing * expose ALL_CSS_UNITS * border * Add defaults to letter-spacing * expose parseUnit instead of ALL_CSS_UNITS * rename parseUnit to __experimentalParseUnit
WordPress · Jun 10, 2021 · 4941b46 · 4941b46
1 parent 183069a
commit 4941b46
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 68 deletions.
diff --git a/packages/block-editor/src/components/letter-spacing-control/index.js b/packages/block-editor/src/components/letter-spacing-control/index.js
@@ -1,29 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
-import { Platform } from '@wordpress/element';
+import {
+	__experimentalUnitControl as UnitControl,
+	__experimentalUseCustomUnits as useCustomUnits,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const isWeb = Platform.OS === 'web';
-
-const CSS_UNITS = [
-	{
-		value: 'px',
-		label: isWeb ? 'px' : __( 'Pixels (px)' ),
-		default: '2',
-	},
-	{
-		value: 'em',
-		label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ),
-		default: '.2',
-	},
-	{
-		value: 'rem',
-		label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ),
-		default: '.2',
-	},
-];
+/**
+ * Internal dependencies
+ */
+import useSetting from '../../components/use-setting';
 
 /**
  * Control for letter-spacing.
@@ -34,12 +21,16 @@ const CSS_UNITS = [
  * @return {WPElement}                      Letter-spacing control.
  */
 export default function LetterSpacingControl( { value, onChange } ) {
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'layout.units' ) || [ 'px', 'em', 'rem' ],
+		defaultValues: { px: '2', em: '.2', rem: '.2' },
+	} );
 	return (
 		<UnitControl
 			label={ __( 'Letter-spacing' ) }
 			value={ value }
 			__unstableInputWidth="60px"
-			units={ CSS_UNITS }
+			units={ units }
 			onChange={ onChange }
 		/>
 	);

diff --git a/packages/block-editor/src/hooks/border-radius.js b/packages/block-editor/src/hooks/border-radius.js
@@ -1,15 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
+import {
+	__experimentalUnitControl as UnitControl,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseUnit as parseUnit,
+} from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { CSS_UNITS, parseUnit } from './border';
 import { cleanEmptyObject } from './utils';
+import useSetting from '../components/use-setting';
 
 const MIN_BORDER_RADIUS_VALUE = 0;
 
@@ -28,7 +32,8 @@ export function BorderRadiusEdit( props ) {
 
 	// Step value is maintained in state so step is appropriate for current unit
 	// even when current radius value is undefined.
-	const initialStep = parseUnit( style?.border?.radius ) === 'px' ? 1 : 0.25;
+	const initialStep =
+		parseUnit( style?.border?.radius )[ 1 ] === 'px' ? 1 : 0.25;
 	const [ step, setStep ] = useState( initialStep );
 
 	const onUnitChange = ( newUnit ) => {
@@ -51,6 +56,10 @@ export function BorderRadiusEdit( props ) {
 		setAttributes( { style: newStyle } );
 	};
 
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'layout.units' ) || [ 'px', 'em', 'rem' ],
+	} );
+
 	return (
 		<UnitControl
 			value={ style?.border?.radius }
@@ -59,7 +68,7 @@ export function BorderRadiusEdit( props ) {
 			onChange={ onChange }
 			onUnitChange={ onUnitChange }
 			step={ step }
-			units={ CSS_UNITS }
+			units={ units }
 		/>
 	);
 }
diff --git a/packages/block-editor/src/hooks/border-width.js b/packages/block-editor/src/hooks/border-width.js
@@ -1,15 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
+import {
+	__experimentalUnitControl as UnitControl,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseUnit as parseUnit,
+} from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { CSS_UNITS, parseUnit } from './border';
 import { cleanEmptyObject } from './utils';
+import useSetting from '../components/use-setting';
 
 const MIN_BORDER_WIDTH = 0;
 
@@ -28,7 +32,8 @@ export const BorderWidthEdit = ( props ) => {
 
 	// Step value is maintained in state so step is appropriate for current unit
 	// even when current radius value is undefined.
-	const initialStep = parseUnit( style?.border?.width ) === 'px' ? 1 : 0.25;
+	const initialStep =
+		parseUnit( style?.border?.width )[ 1 ] === 'px' ? 1 : 0.25;
 	const [ step, setStep ] = useState( initialStep );
 
 	const onUnitChange = ( newUnit ) => {
@@ -51,6 +56,10 @@ export const BorderWidthEdit = ( props ) => {
 		setAttributes( { style: newStyle } );
 	};
 
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'layout.units' ) || [ 'px', 'em', 'rem' ],
+	} );
+
 	return (
 		<UnitControl
 			value={ style?.border?.width }
@@ -59,7 +68,7 @@ export const BorderWidthEdit = ( props ) => {
 			onChange={ onChange }
 			onUnitChange={ onUnitChange }
 			step={ step }
-			units={ CSS_UNITS }
+			units={ units }
 		/>
 	);
 };
diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
@@ -16,44 +16,7 @@ import { BorderRadiusEdit } from './border-radius';
 import { BorderStyleEdit } from './border-style';
 import { BorderWidthEdit } from './border-width';
 
-const isWeb = Platform.OS === 'web';
-
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
-export const CSS_UNITS = [
-	{
-		value: 'px',
-		label: isWeb ? 'px' : __( 'Pixels (px)' ),
-		default: '',
-		a11yLabel: __( 'Pixels (px)' ),
-	},
-	{
-		value: 'em',
-		label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ),
-		default: '',
-		a11yLabel: __( 'Relative to parent font size (em)' ),
-	},
-	{
-		value: 'rem',
-		label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ),
-		default: '',
-		a11yLabel: __( 'Relative to root font size (rem)' ),
-	},
-];
-
-/**
- * Parses a CSS unit from a border CSS value.
- *
- * @param {string} cssValue CSS value to parse e.g. `10px` or `1.5em`.
- * @return {string}          CSS unit from provided value or default 'px'.
- */
-export function parseUnit( cssValue ) {
-	const value = String( cssValue ).trim();
-	const unitMatch = value.match( /[\d.\-\+]*\s*(.*)/ )[ 1 ];
-	const unit = unitMatch !== undefined ? unitMatch.toLowerCase() : '';
-	const currentUnit = CSS_UNITS.find( ( item ) => item.value === unit );
-
-	return currentUnit?.value || 'px';
-}
 
 export function BorderPanel( props ) {
 	const isDisabled = useIsBorderDisabled( props );

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
@@ -137,6 +137,7 @@ export { Truncate as __experimentalTruncate } from './truncate';
 export {
 	default as __experimentalUnitControl,
 	useCustomUnits as __experimentalUseCustomUnits,
+	parseUnit as __experimentalParseUnit,
 } from './unit-control';
 export { default as VisuallyHidden } from './visually-hidden';
 export { VStack as __experimentalVStack } from './v-stack';

diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
@@ -200,5 +200,5 @@ function UnitControl(
 
 const ForwardedUnitControl = forwardRef( UnitControl );
 
-export { useCustomUnits } from './utils';
+export { parseUnit, useCustomUnits } from './utils';
 export default ForwardedUnitControl;