Replace hardcoded CSS_UNITS and inherit values from theme.json (#31822)

Co-authored-by: Riad Benguella <benguella@gmail.com>
WordPress · May 19, 2021 · 7878747 · 7878747
1 parent f085408
commit 7878747
Show file tree

Hide file tree

Showing 20 changed files with 299 additions and 311 deletions.
diff --git a/packages/block-editor/src/components/unit-control/index.js b/packages/block-editor/src/components/unit-control/index.js
@@ -1,46 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUnitControl as BaseUnitControl } from '@wordpress/components';
+import {
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalUnitControl as BaseUnitControl,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import useSetting from '../use-setting';
 
 export default function UnitControl( { units: unitsProp, ...props } ) {
-	const units = useCustomUnits( unitsProp );
-
-	return <BaseUnitControl units={ units } { ...props } />;
-}
-
-/**
- * Filters available units based on values defined by settings.
- *
- * @param {Array} settings Collection of preferred units.
- * @param {Array} units Collection of available units.
- *
- * @return {Array} Filtered units based on settings.
- */
-function filterUnitsWithSettings( settings = [], units = [] ) {
-	return units.filter( ( unit ) => {
-		return settings.includes( unit.value );
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vw',
+		],
+		units: unitsProp,
 	} );
-}
 
-/**
- * Custom hook to retrieve and consolidate units setting from add_theme_support().
- *
- * @param {Array} units Collection of available units.
- *
- * @return {Array} Filtered units based on settings.
- */
-export function useCustomUnits( units ) {
-	const availableUnits = useSetting( 'spacing.units' );
-	const usedUnits = filterUnitsWithSettings(
-		! availableUnits ? [] : availableUnits,
-		units
-	);
-
-	return usedUnits.length === 0 ? false : usedUnits;
+	return <BaseUnitControl units={ units } { ...props } />;
 }
diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -7,7 +7,6 @@ import { has } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Platform } from '@wordpress/element';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
@@ -16,6 +15,7 @@ import {
 	Button,
 	ToggleControl,
 	PanelBody,
+	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -29,35 +29,6 @@ import { InspectorControls } from '../components';
 import useSetting from '../components/use-setting';
 import { LayoutStyle } from '../components/block-list/layout';
 
-const isWeb = Platform.OS === 'web';
-const CSS_UNITS = [
-	{
-		value: '%',
-		label: isWeb ? '%' : __( 'Percentage (%)' ),
-		default: '',
-	},
-	{
-		value: 'px',
-		label: isWeb ? 'px' : __( 'Pixels (px)' ),
-		default: '',
-	},
-	{
-		value: 'em',
-		label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ),
-		default: '',
-	},
-	{
-		value: 'rem',
-		label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ),
-		default: '',
-	},
-	{
-		value: 'vw',
-		label: isWeb ? 'vw' : __( 'Viewport width (vw)' ),
-		default: '',
-	},
-];
-
 function LayoutPanel( { setAttributes, attributes } ) {
 	const { layout = {} } = attributes;
 	const { wideSize, contentSize, inherit = false } = layout;
@@ -67,6 +38,16 @@ function LayoutPanel( { setAttributes, attributes } ) {
 		return getSettings().supportsLayout;
 	}, [] );
 
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'layout.units' ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vw',
+		],
+	} );
+
 	if ( ! themeSupportsLayout ) {
 		return null;
 	}
@@ -103,7 +84,7 @@ function LayoutPanel( { setAttributes, attributes } ) {
 											},
 										} );
 									} }
-									units={ CSS_UNITS }
+									units={ units }
 								/>
 								<Icon icon={ positionCenter } />
 							</div>
@@ -125,7 +106,7 @@ function LayoutPanel( { setAttributes, attributes } ) {
 											},
 										} );
 									} }
-									units={ CSS_UNITS }
+									units={ units }
 								/>
 								<Icon icon={ stretchWide } />
 							</div>

diff --git a/packages/block-editor/src/hooks/margin.js b/packages/block-editor/src/hooks/margin.js
@@ -4,44 +4,17 @@
 import { __ } from '@wordpress/i18n';
 import { Platform } from '@wordpress/element';
 import { getBlockSupport } from '@wordpress/blocks';
-import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+import {
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalBoxControl as BoxControl,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import useSetting from '../components/use-setting';
 import { SPACING_SUPPORT_KEY, useCustomSides } from './spacing';
 import { cleanEmptyObject } from './utils';
-import { useCustomUnits } from '../components/unit-control';
-
-const isWeb = Platform.OS === 'web';
-const CSS_UNITS = [
-	{
-		value: '%',
-		label: isWeb ? '%' : __( 'Percentage (%)' ),
-		default: '',
-	},
-	{
-		value: 'px',
-		label: isWeb ? 'px' : __( 'Pixels (px)' ),
-		default: '',
-	},
-	{
-		value: 'em',
-		label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ),
-		default: '',
-	},
-	{
-		value: 'rem',
-		label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ),
-		default: '',
-	},
-	{
-		value: 'vw',
-		label: isWeb ? 'vw' : __( 'Viewport width (vw)' ),
-		default: '',
-	},
-];
 
 /**
  * Determines if there is margin support.
@@ -78,7 +51,15 @@ export function MarginEdit( props ) {
 		setAttributes,
 	} = props;
 
-	const units = useCustomUnits( CSS_UNITS );
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vw',
+		],
+	} );
 	const sides = useCustomSides( blockName, 'margin' );
 
 	if ( useIsMarginDisabled( props ) ) {

diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
@@ -4,44 +4,17 @@
 import { __ } from '@wordpress/i18n';
 import { Platform } from '@wordpress/element';
 import { getBlockSupport } from '@wordpress/blocks';
-import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
+import {
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalBoxControl as BoxControl,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import useSetting from '../components/use-setting';
 import { SPACING_SUPPORT_KEY, useCustomSides } from './spacing';
 import { cleanEmptyObject } from './utils';
-import { useCustomUnits } from '../components/unit-control';
-
-const isWeb = Platform.OS === 'web';
-const CSS_UNITS = [
-	{
-		value: '%',
-		label: isWeb ? '%' : __( 'Percentage (%)' ),
-		default: '',
-	},
-	{
-		value: 'px',
-		label: isWeb ? 'px' : __( 'Pixels (px)' ),
-		default: '',
-	},
-	{
-		value: 'em',
-		label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ),
-		default: '',
-	},
-	{
-		value: 'rem',
-		label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ),
-		default: '',
-	},
-	{
-		value: 'vw',
-		label: isWeb ? 'vw' : __( 'Viewport width (vw)' ),
-		default: '',
-	},
-];
 
 /**
  * Determines if there is padding support.
@@ -79,7 +52,15 @@ export function PaddingEdit( props ) {
 		setAttributes,
 	} = props;
 
-	const units = useCustomUnits( CSS_UNITS );
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vw',
+		],
+	} );
 	const sides = useCustomSides( blockName, 'padding' );
 
 	if ( useIsPaddingDisabled( props ) ) {

diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
@@ -12,21 +12,18 @@ import {
 	BlockVerticalAlignmentToolbar,
 	InspectorControls,
 	useBlockProps,
+	useSetting,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
+	__experimentalUseCustomUnits as useCustomUnits,
 	PanelBody,
 	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import { CSS_UNITS } from '../columns/utils';
-
 function ColumnEdit( {
 	attributes: { verticalAlignment, width, templateLock = false },
 	setAttributes,
@@ -36,6 +33,16 @@ function ColumnEdit( {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'layout.units' ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vw',
+		],
+	} );
+
 	const { columnsIds, hasChildBlocks, rootClientId } = useSelect(
 		( select ) => {
 			const { getBlockOrder, getBlockRootClientId } = select(
@@ -111,7 +118,7 @@ function ColumnEdit( {
 								0 > parseFloat( nextWidth ) ? '0' : nextWidth;
 							setAttributes( { width: nextWidth } );
 						} }
-						units={ CSS_UNITS }
+						units={ units }
 					/>
 				</PanelBody>
 			</InspectorControls>

diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js
@@ -15,13 +15,15 @@ import {
 	BlockVerticalAlignmentToolbar,
 	InspectorControls,
 	store as blockEditorStore,
+	useSetting,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
 	FooterMessageControl,
 	UnitControl,
 	getValueAndUnit,
 	alignmentHelpers,
+	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 /**
@@ -33,7 +35,6 @@ import {
 	getWidths,
 	getWidthWithUnit,
 	isPercentageUnit,
-	CSS_UNITS,
 } from '../columns/utils';
 
 const { isWider } = alignmentHelpers;
@@ -63,6 +64,16 @@ function ColumnEdit( {
 
 	const [ widthUnit, setWidthUnit ] = useState( valueUnit || '%' );
 
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'layout.units' ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vw',
+		],
+	} );
+
 	const updateAlignment = ( alignment ) => {
 		setAttributes( { verticalAlignment: alignment } );
 	};
@@ -169,7 +180,7 @@ function ColumnEdit( {
 									getWidths( columns )[ selectedColumnIndex ]
 								}
 								unit={ widthUnit }
-								units={ CSS_UNITS }
+								units={ units }
 								preview={
 									<ColumnsPreview
 										columnWidths={ getWidths(