border

WordPress · Jun 10, 2021 · c36f3ba · c36f3ba
1 parent 8eafae5
commit c36f3ba
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 30 deletions.
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,
+} from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { CSS_UNITS, parseUnit } from './border';
+import { parseUnit } from './border';
 import { cleanEmptyObject } from './utils';
+import useSetting from '../components/use-setting';
 
 const MIN_BORDER_RADIUS_VALUE = 0;
 
@@ -51,6 +55,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 +67,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,
+} from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { CSS_UNITS, parseUnit } from './border';
+import { parseUnit } from './border';
 import { cleanEmptyObject } from './utils';
+import useSetting from '../components/use-setting';
 
 const MIN_BORDER_WIDTH = 0;
 
@@ -51,6 +55,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 +67,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
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { PanelBody } from '@wordpress/components';
+import { PanelBody, ALL_CSS_UNITS } from '@wordpress/components';
 import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
@@ -16,29 +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.
@@ -50,7 +28,7 @@ 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 );
+	const currentUnit = ALL_CSS_UNITS.find( ( item ) => item.value === unit );
 
 	return currentUnit?.value || 'px';
 }