From d64f5865459c2b08b4e02865b8125d6da90282d9 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 19 May 2021 21:08:32 +0300
Subject: [PATCH] Replace hardcoded CSS_UNITS and inherit values from
 theme.json (#31822)

Co-authored-by: Riad Benguella <benguella@gmail.com>
---
 .../src/components/unit-control/index.js      |  47 ++----
 packages/block-editor/src/hooks/layout.js     |  45 ++----
 packages/block-editor/src/hooks/margin.js     |  45 ++----
 packages/block-editor/src/hooks/padding.js    |  45 ++----
 packages/block-library/src/column/edit.js     |  19 ++-
 .../block-library/src/column/edit.native.js   |  15 +-
 .../block-library/src/columns/edit.native.js  |  15 +-
 packages/block-library/src/columns/utils.js   |  36 -----
 .../src/cover/controls.native.js              |  17 +-
 packages/block-library/src/cover/edit.js      |  16 +-
 packages/block-library/src/cover/shared.js    |  32 ----
 packages/block-library/src/search/edit.js     |   9 +-
 packages/block-library/src/search/utils.js    |  25 ---
 .../components/src/font-size-picker/index.js  |  28 +---
 packages/components/src/index.js              |   5 +-
 packages/components/src/index.native.js       |   5 +-
 packages/components/src/unit-control/index.js |   1 +
 .../src/unit-control/index.native.js          |   1 +
 packages/components/src/unit-control/utils.js | 147 +++++++++++++++++-
 .../src/components/sidebar/spacing-panel.js   |  57 ++-----
 20 files changed, 299 insertions(+), 311 deletions(-)

diff --git a/packages/block-editor/src/components/unit-control/index.js b/packages/block-editor/src/components/unit-control/index.js
index af8f65c2dee6c3..5af8830dc48c25 100644
--- a/packages/block-editor/src/components/unit-control/index.js
+++ b/packages/block-editor/src/components/unit-control/index.js
@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUnitControl as BaseUnitControl } from '@wordpress/components';
+import {
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalUnitControl as BaseUnitControl,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -9,38 +12,16 @@ import { __experimentalUnitControl as BaseUnitControl } from '@wordpress/compone
 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
index f0b144d3026ed8..14a540cf3284fd 100644
--- 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
index 50bc080cfa3822..19a6103b8cb3a4 100644
--- a/packages/block-editor/src/hooks/margin.js
+++ b/packages/block-editor/src/hooks/margin.js
@@ -4,7 +4,10 @@
 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
@@ -12,36 +15,6 @@ import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
 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
index 7804199e52c757..709470bed5cc98 100644
--- a/packages/block-editor/src/hooks/padding.js
+++ b/packages/block-editor/src/hooks/padding.js
@@ -4,7 +4,10 @@
 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
@@ -12,36 +15,6 @@ import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
 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
index f1d8559c8041e2..ae8d3083e2f01d 100644
--- 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
index bb3bbe045eec43..e30db2f4b0fd87 100644
--- a/packages/block-library/src/column/edit.native.js
+++ b/packages/block-library/src/column/edit.native.js
@@ -15,6 +15,7 @@ import {
 	BlockVerticalAlignmentToolbar,
 	InspectorControls,
 	store as blockEditorStore,
+	useSetting,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -22,6 +23,7 @@ import {
 	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(
diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js
index 241e5fe247e358..e72fdabd88b572 100644
--- a/packages/block-library/src/columns/edit.native.js
+++ b/packages/block-library/src/columns/edit.native.js
@@ -15,6 +15,7 @@ import {
 	getValueAndUnit,
 	GlobalStylesContext,
 	alignmentHelpers,
+	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -22,6 +23,7 @@ import {
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
 	BlockVariationPicker,
+	useSetting,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { withDispatch, useSelect } from '@wordpress/data';
@@ -49,7 +51,6 @@ import {
 	getWidths,
 	getWidthWithUnit,
 	isPercentageUnit,
-	CSS_UNITS,
 } from './utils';
 import {
 	getColumnsInRow,
@@ -105,6 +106,16 @@ function ColumnsEditContainer( {
 	const { verticalAlignment, align } = attributes;
 	const { width } = sizes || {};
 
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'layout.units' ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vw',
+		],
+	} );
+
 	useEffect( () => {
 		if ( columnCount === 0 ) {
 			const newColumnCount = columnCount || DEFAULT_COLUMNS_NUM;
@@ -211,7 +222,7 @@ function ColumnsEditContainer( {
 						onChangeWidth( nextWidth, valueUnit, column.clientId );
 					} }
 					unit={ valueUnit }
-					units={ CSS_UNITS }
+					units={ units }
 					preview={
 						<ColumnsPreview
 							columnWidths={ getWidths( innerWidths, false ) }
diff --git a/packages/block-library/src/columns/utils.js b/packages/block-library/src/columns/utils.js
index 0d9c5d9db59623..c99b4e504b07fa 100644
--- a/packages/block-library/src/columns/utils.js
+++ b/packages/block-library/src/columns/utils.js
@@ -3,12 +3,6 @@
  */
 import { sumBy, merge, mapValues } from 'lodash';
 
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Platform } from '@wordpress/element';
-
 /**
  * Returns a column width attribute value rounded to standard precision.
  * Returns `undefined` if the value is not a valid finite number.
@@ -169,36 +163,6 @@ export function getWidthWithUnit( width, unit ) {
 	return `${ width }${ unit }`;
 }
 
-const isWeb = Platform.OS === 'web';
-
-export 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: '',
-	},
-];
-
 /**
  * Returns a boolean whether passed unit is percentage
  *
diff --git a/packages/block-library/src/cover/controls.native.js b/packages/block-library/src/cover/controls.native.js
index 85665069e22d71..5645d3f9323bbf 100644
--- a/packages/block-library/src/cover/controls.native.js
+++ b/packages/block-library/src/cover/controls.native.js
@@ -17,11 +17,12 @@ import {
 	TextControl,
 	BottomSheet,
 	ToggleControl,
+	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 import { useState, useCallback, useRef } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { MediaUpload } from '@wordpress/block-editor';
+import { useSetting, MediaUpload } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -35,7 +36,6 @@ import {
 	COVER_MIN_HEIGHT,
 	COVER_MAX_HEIGHT,
 	COVER_DEFAULT_HEIGHT,
-	CSS_UNITS,
 	IMAGE_BACKGROUND_TYPE,
 	VIDEO_BACKGROUND_TYPE,
 } from './shared';
@@ -68,6 +68,17 @@ function Controls( {
 		[ minHeight ]
 	);
 
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [
+			'px',
+			'em',
+			'rem',
+			'vw',
+			'vh',
+		],
+		defaultValues: { px: '430', em: '20', rem: '20', vw: '20', vh: '50' },
+	} );
+
 	const onOpacityChange = useCallback( ( value ) => {
 		setAttributes( { dimRatio: value } );
 	}, [] );
@@ -292,7 +303,7 @@ function Controls( {
 					value={ CONTAINER_HEIGHT }
 					onChange={ onHeightChange }
 					onUnitChange={ onChangeUnit }
-					units={ CSS_UNITS }
+					units={ units }
 					style={ styles.rangeCellContainer }
 					key={ minHeightUnit }
 				/>
diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
index 4bbf14c17dfd48..cd0f85b1a9e78b 100644
--- a/packages/block-library/src/cover/edit.js
+++ b/packages/block-library/src/cover/edit.js
@@ -20,6 +20,7 @@ import {
 	Spinner,
 	ToggleControl,
 	withNotices,
+	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalBoxControl as BoxControl,
 } from '@wordpress/components';
 import { compose, withInstanceId, useInstanceId } from '@wordpress/compose';
@@ -32,6 +33,7 @@ import {
 	withColors,
 	ColorPalette,
 	useBlockProps,
+	useSetting,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	__experimentalUseGradient,
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
@@ -54,7 +56,6 @@ import {
 	IMAGE_BACKGROUND_TYPE,
 	VIDEO_BACKGROUND_TYPE,
 	COVER_MIN_HEIGHT,
-	CSS_UNITS,
 	backgroundImageStyles,
 	dimRatioToClass,
 	isContentPositionCenter,
@@ -97,6 +98,17 @@ function CoverHeightInput( {
 	const inputId = `block-cover-height-input-${ instanceId }`;
 	const isPx = unit === 'px';
 
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [
+			'px',
+			'em',
+			'rem',
+			'vw',
+			'vh',
+		],
+		defaultValues: { px: '430', em: '20', rem: '20', vw: '20', vh: '50' },
+	} );
+
 	const handleOnChange = ( unprocessedValue ) => {
 		const inputValue =
 			unprocessedValue !== ''
@@ -135,7 +147,7 @@ function CoverHeightInput( {
 				step="1"
 				style={ { maxWidth: 80 } }
 				unit={ unit }
-				units={ CSS_UNITS }
+				units={ units }
 				value={ inputValue }
 			/>
 		</BaseControl>
diff --git a/packages/block-library/src/cover/shared.js b/packages/block-library/src/cover/shared.js
index 2ab602be5467cf..df92ad9a70a6a6 100644
--- a/packages/block-library/src/cover/shared.js
+++ b/packages/block-library/src/cover/shared.js
@@ -2,8 +2,6 @@
  * WordPress dependencies
  */
 import { getBlobTypeByURL, isBlobURL } from '@wordpress/blob';
-import { __ } from '@wordpress/i18n';
-import { Platform } from '@wordpress/element';
 
 const POSITION_CLASSNAMES = {
 	'top left': 'is-position-top-left',
@@ -28,36 +26,6 @@ export function backgroundImageStyles( url ) {
 }
 export const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
 
-const isWeb = Platform.OS === 'web';
-
-export const CSS_UNITS = [
-	{
-		value: 'px',
-		label: isWeb ? 'px' : __( 'Pixels (px)' ),
-		default: '430',
-	},
-	{
-		value: 'em',
-		label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ),
-		default: '20',
-	},
-	{
-		value: 'rem',
-		label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ),
-		default: '20',
-	},
-	{
-		value: 'vw',
-		label: isWeb ? 'vw' : __( 'Viewport width (vw)' ),
-		default: '20',
-	},
-	{
-		value: 'vh',
-		label: isWeb ? 'vh' : __( 'Viewport height (vh)' ),
-		default: '50',
-	},
-];
-
 export function dimRatioToClass( ratio ) {
 	return ratio === 0 || ratio === 50 || ! ratio
 		? null
diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js
index 06b2c62ad3941d..1508583257fbec 100644
--- a/packages/block-library/src/search/edit.js
+++ b/packages/block-library/src/search/edit.js
@@ -24,6 +24,7 @@ import {
 	ResizableBox,
 	PanelBody,
 	BaseControl,
+	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { search } from '@wordpress/icons';
@@ -41,7 +42,6 @@ import {
 	toggleLabel,
 } from './icons';
 import {
-	CSS_UNITS,
 	PC_WIDTH_DEFAULT,
 	PX_WIDTH_DEFAULT,
 	MIN_WIDTH,
@@ -76,6 +76,11 @@ export default function SearchEdit( {
 	const unitControlInstanceId = useInstanceId( UnitControl );
 	const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
 
+	const units = useCustomUnits( {
+		availableUnits: [ '%', 'px' ],
+		defaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT },
+	} );
+
 	const getBlockClassNames = () => {
 		return classnames(
 			className,
@@ -278,7 +283,7 @@ export default function SearchEdit( {
 							style={ { maxWidth: 80 } }
 							value={ `${ width }${ widthUnit }` }
 							unit={ widthUnit }
-							units={ CSS_UNITS }
+							units={ units }
 						/>
 
 						<ButtonGroup
diff --git a/packages/block-library/src/search/utils.js b/packages/block-library/src/search/utils.js
index c696736f372594..b54048b609eb33 100644
--- a/packages/block-library/src/search/utils.js
+++ b/packages/block-library/src/search/utils.js
@@ -1,36 +1,11 @@
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Platform } from '@wordpress/element';
-
 /**
  * Constants
  */
-const isWeb = Platform.OS === 'web';
-
 export const PC_WIDTH_DEFAULT = 50;
 export const PX_WIDTH_DEFAULT = 350;
 export const MIN_WIDTH = 220;
 export const MIN_WIDTH_UNIT = 'px';
 
-export const CSS_UNITS = [
-	{
-		value: '%',
-		label: isWeb ? '%' : __( 'Percentage (%)' ),
-		default: PC_WIDTH_DEFAULT,
-	},
-	{
-		value: 'px',
-		label: isWeb ? 'px' : __( 'Pixels (px)' ),
-		default: PX_WIDTH_DEFAULT,
-	},
-];
-
 /**
  * Returns a boolean whether passed unit is percentage
  *
diff --git a/packages/components/src/font-size-picker/index.js b/packages/components/src/font-size-picker/index.js
index da6c925aaac5d2..5a1080c8d8b523 100644
--- a/packages/components/src/font-size-picker/index.js
+++ b/packages/components/src/font-size-picker/index.js
@@ -8,38 +8,20 @@ import { isNumber, isString } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { textColor } from '@wordpress/icons';
-import { useMemo, forwardRef, Platform } from '@wordpress/element';
+import { useMemo, forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Button from '../button';
 import RangeControl from '../range-control';
-import UnitControl from '../unit-control';
+import { default as UnitControl, useCustomUnits } from '../unit-control';
 import CustomSelectControl from '../custom-select-control';
 import VisuallyHidden from '../visually-hidden';
 
 const DEFAULT_FONT_SIZE = 'default';
 const CUSTOM_FONT_SIZE = 'custom';
 const MAX_FONT_SIZE_DISPLAY = '25px';
-const isWeb = Platform.OS === 'web';
-const CSS_UNITS = [
-	{
-		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: '',
-	},
-];
 
 function getSelectValueFromFontSize( fontSizes, value ) {
 	if ( value ) {
@@ -95,6 +77,10 @@ function FontSizePicker(
 	const isPixelValue =
 		isNumber( value ) || ( isString( value ) && value.endsWith( 'px' ) );
 
+	const units = useCustomUnits( {
+		availableUnits: [ 'px', 'em', 'rem' ],
+	} );
+
 	const options = useMemo(
 		() => getSelectOptions( fontSizes, disableCustomFontSizes ),
 		[ fontSizes, disableCustomFontSizes ]
@@ -143,7 +129,7 @@ function FontSizePicker(
 								onChange( nextSize );
 							}
 						} }
-						units={ CSS_UNITS }
+						units={ units }
 					/>
 				) }
 				<Button
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 7d3da34a689b18..0378e2e69e038a 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -131,7 +131,10 @@ export {
 } from './tree-grid';
 export { default as TreeSelect } from './tree-select';
 export { Truncate as __experimentalTruncate } from './truncate';
-export { default as __experimentalUnitControl } from './unit-control';
+export {
+	default as __experimentalUnitControl,
+	useCustomUnits as __experimentalUseCustomUnits,
+} from './unit-control';
 export { default as VisuallyHidden } from './visually-hidden';
 export { VStack as __experimentalVStack } from './v-stack';
 export { default as IsolatedEventContainer } from './isolated-event-container';
diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js
index 2ff204cd832efc..2e85b124fe2735 100644
--- a/packages/components/src/index.native.js
+++ b/packages/components/src/index.native.js
@@ -48,7 +48,10 @@ export { default as QueryControls } from './query-controls';
 export { default as Notice } from './notice';
 export { default as NoticeList } from './notice/list';
 export { default as RadioControl } from './radio-control';
-export { default as UnitControl } from './unit-control';
+export {
+	default as UnitControl,
+	useCustomUnits as __experimentalUseCustomUnits,
+} from './unit-control';
 export { default as Disabled } from './disabled';
 
 // Higher-Order Components
diff --git a/packages/components/src/unit-control/index.js b/packages/components/src/unit-control/index.js
index adee0b8de04f8c..c3806baf2f75dc 100644
--- a/packages/components/src/unit-control/index.js
+++ b/packages/components/src/unit-control/index.js
@@ -200,4 +200,5 @@ function UnitControl(
 
 const ForwardedUnitControl = forwardRef( UnitControl );
 
+export { useCustomUnits } from './utils';
 export default ForwardedUnitControl;
diff --git a/packages/components/src/unit-control/index.native.js b/packages/components/src/unit-control/index.native.js
index c8a918627237e3..4a7e0ff0a5da42 100644
--- a/packages/components/src/unit-control/index.native.js
+++ b/packages/components/src/unit-control/index.native.js
@@ -177,4 +177,5 @@ function UnitControl( {
 	);
 }
 
+export { useCustomUnits } from './utils';
 export default memo( withPreferredColorScheme( UnitControl ) );
diff --git a/packages/components/src/unit-control/utils.js b/packages/components/src/unit-control/utils.js
index 74ddc01669d759..b9981dae6d2ce1 100644
--- a/packages/components/src/unit-control/utils.js
+++ b/packages/components/src/unit-control/utils.js
@@ -7,6 +7,105 @@ import { isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
+import { Platform } from '@wordpress/element';
+
+const isWeb = Platform.OS === 'web';
+
+/**
+ * An array of all available CSS length units.
+ */
+export const ALL_CSS_UNITS = [
+	{
+		value: 'px',
+		label: isWeb ? 'px' : __( 'Pixels (px)' ),
+		default: '',
+		a11yLabel: __( 'Pixels (px)' ),
+	},
+	{
+		value: '%',
+		label: isWeb ? '%' : __( 'Percentage (%)' ),
+		default: '',
+		a11yLabel: __( 'Percent (%)' ),
+	},
+	{
+		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)' ),
+	},
+	{
+		value: 'vw',
+		label: isWeb ? 'vw' : __( 'Viewport width (vw)' ),
+		default: '',
+		a11yLabel: __( 'Viewport width (vw)' ),
+	},
+	{
+		value: 'vh',
+		label: isWeb ? 'vh' : __( 'Viewport height (vh)' ),
+		default: '',
+		a11yLabel: __( 'Viewport height (vh)' ),
+	},
+	{
+		value: 'vmin',
+		label: isWeb ? 'vmin' : __( 'Viewport smallest dimension (vmin)' ),
+		default: '',
+		a11yLabel: __( 'Viewport smallest dimension (vmin)' ),
+	},
+	{
+		value: 'vmax',
+		label: isWeb ? 'vmax' : __( 'Viewport largest dimension (vmax)' ),
+		default: '',
+		a11yLabel: __( 'Viewport largest dimension (vmax)' ),
+	},
+	{
+		value: 'ch',
+		label: isWeb ? 'ch' : __( 'Width of the zero (0) character (ch)' ),
+		default: '',
+		a11yLabel: __( 'Width of the zero (0) character (ch)' ),
+	},
+	{
+		value: 'ex',
+		label: isWeb ? 'ex' : __( 'x-height of the font (ex)' ),
+		default: '',
+		a11yLabel: __( 'x-height of the font (ex)' ),
+	},
+	{
+		value: 'cm',
+		label: isWeb ? 'cm' : __( 'Centimeters (cm)' ),
+		default: '',
+		a11yLabel: __( 'Centimeters (cm)' ),
+	},
+	{
+		value: 'mm',
+		label: isWeb ? 'mm' : __( 'Millimeters (mm)' ),
+		default: '',
+		a11yLabel: __( 'Millimeters (mm)' ),
+	},
+	{
+		value: 'in',
+		label: isWeb ? 'in' : __( 'Inches (in)' ),
+		default: '',
+		a11yLabel: __( 'Inches (in)' ),
+	},
+	{
+		value: 'pc',
+		label: isWeb ? 'pc' : __( 'Picas (pc)' ),
+		default: '',
+		a11yLabel: __( 'Picas (pc)' ),
+	},
+	{
+		value: 'pt',
+		label: isWeb ? 'pt' : __( 'Points (pt)' ),
+		default: '',
+		a11yLabel: __( 'Points (pt)' ),
+	},
+];
 
 /**
  * Units of measurements. `a11yLabel` is used by screenreaders.
@@ -77,7 +176,7 @@ export function hasUnits( units ) {
  * @param {Array<Object>} units Units to derive from.
  * @return {Array<number, string>} The extracted number and unit.
  */
-export function parseUnit( initialValue, units = CSS_UNITS ) {
+export function parseUnit( initialValue, units = ALL_CSS_UNITS ) {
 	const value = String( initialValue ).trim();
 
 	let num = parseFloat( value, 10 );
@@ -138,6 +237,50 @@ export function getValidParsedUnit( next, units, fallbackValue, fallbackUnit ) {
  * @return {string} a11y label for the unit abbreviation
  */
 export function parseA11yLabelForUnit( unit ) {
-	const match = CSS_UNITS.find( ( item ) => item.value === unit );
+	const match = ALL_CSS_UNITS.find( ( item ) => item.value === unit );
 	return match?.a11yLabel ? match?.a11yLabel : match?.value;
 }
+
+/**
+ * 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 );
+	} );
+}
+
+/**
+ * Custom hook to retrieve and consolidate units setting from add_theme_support().
+ * TODO: ideally this hook shouldn't be needed
+ * https://github.com/WordPress/gutenberg/pull/31822#discussion_r633280823
+ *
+ * @param {Object} args                An object containing units, settingPath & defaultUnits.
+ * @param {Object} args.units          Collection of available units.
+ * @param {string} args.availableUnits The setting path. Defaults to 'spacing.units'.
+ * @param {Object} args.defaultValues  Collection of default values for defined units. Example: { px: '350', em: '15' }.
+ *
+ * @return {Array} Filtered units based on settings.
+ */
+export const useCustomUnits = ( { units, availableUnits, defaultValues } ) => {
+	units = units || ALL_CSS_UNITS;
+	const usedUnits = filterUnitsWithSettings(
+		! availableUnits ? [] : availableUnits,
+		units
+	);
+
+	if ( defaultValues ) {
+		usedUnits.forEach( ( unit, i ) => {
+			if ( defaultValues[ unit.value ] ) {
+				usedUnits[ i ].default = defaultValues[ unit.value ];
+			}
+		} );
+	}
+
+	return usedUnits.length === 0 ? false : usedUnits;
+};
diff --git a/packages/edit-site/src/components/sidebar/spacing-panel.js b/packages/edit-site/src/components/sidebar/spacing-panel.js
index e2618a48334984..4674a1af7f91cd 100644
--- a/packages/edit-site/src/components/sidebar/spacing-panel.js
+++ b/packages/edit-site/src/components/sidebar/spacing-panel.js
@@ -1,11 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	__experimentalBoxControl as BoxControl,
 	PanelBody,
+	useCustomUnits,
 } from '@wordpress/components';
 import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block-editor';
 
@@ -14,35 +14,6 @@ import { __experimentalUseCustomSides as useCustomSides } from '@wordpress/block
  */
 import { useSetting } from '../editor/utils';
 
-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: '',
-	},
-];
-
 export function useHasSpacingPanel( context ) {
 	const hasPadding = useHasPadding( context );
 	const hasMargin = useHasMargin( context );
@@ -62,22 +33,6 @@ function useHasMargin( { name, supports } ) {
 	return settings && supports.includes( 'margin' );
 }
 
-function filterUnitsWithSettings( settings = [], units = [] ) {
-	return units.filter( ( unit ) => {
-		return settings.includes( unit.value );
-	} );
-}
-
-function useCustomUnits( { units, contextName } ) {
-	const availableUnits = useSetting( 'spacing.units', contextName );
-	const usedUnits = filterUnitsWithSettings(
-		! availableUnits ? [] : availableUnits,
-		units
-	);
-
-	return usedUnits.length === 0 ? false : usedUnits;
-}
-
 function filterValuesBySides( values, sides ) {
 	if ( ! sides ) {
 		// If no custom side configuration all sides are opted into by default.
@@ -95,7 +50,15 @@ export default function SpacingPanel( { context, getStyle, setStyle } ) {
 	const { name } = context;
 	const showPaddingControl = useHasPadding( context );
 	const showMarginControl = useHasMargin( context );
-	const units = useCustomUnits( { contextName: name, units: CSS_UNITS } );
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units', name ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vw',
+		],
+	} );
 
 	const paddingValues = getStyle( name, 'padding' );
 	const paddingSides = useCustomSides( name, 'padding' );