Support custom units on theme.json

docs/designers-developers/developers/themes/theme-support.md

@@ -280,10 +280,10 @@ add_theme_support( 'custom-line-height' );
 
 ### Support custom units
 
-In addition to pixels, users can use other units to define sizes, paddings... The available units are: px, em, rem, vh, vw. Themes can enable support for this feature with the following code:
+In addition to pixels, users can use other units to define sizes, paddings... The available units are: px, em, rem, vh, vw. Themes can disable support for this feature with the following code:
 
 ```php
-add_theme_support( 'custom-units' );
+add_theme_support( 'custom-units', array() );
 ```
 
 Themes can also filter the available custom units.

lib/client-assets.php

@@ -619,17 +619,3 @@ function gutenberg_extend_block_editor_styles( $settings ) {
 	return $settings;
 }
 add_filter( 'block_editor_settings', 'gutenberg_extend_block_editor_styles' );
-
-/**
- * Extends block editor settings to determine whether to use custom unit controls.
- * Currently experimental.
- *
- * @param array $settings Default editor settings.
- *
- * @return array Filtered editor settings.
- */
-function gutenberg_extend_settings_custom_units( $settings ) {
-	$settings['enableCustomUnits'] = get_theme_support( 'custom-units' );
-	return $settings;
-}
-add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_units' );

lib/experimental-default-theme.json

@@ -142,7 +142,8 @@
 				"custom": false
 			},
 			"spacing": {
-				"custom": false
+				"custom": false,
+				"units": [ "px", "em", "rem", "vh", "vw" ]
 			}
 		}
 	}

lib/global-styles.php

@@ -658,6 +658,13 @@ function gutenberg_experimental_global_styles_get_editor_features( $config ) {
 		}
 		$features['global']['color']['link'] = true;
 	}
+	$custom_units_theme_support = get_theme_support( 'custom-units' );
+	if ( $custom_units_theme_support ) {
+		if ( ! isset( $features['global']['spacing'] ) ) {
+			$features['global']['spacing'] = array();
+		}
+		$features['global']['spacing']['units'] = true === $custom_units_theme_support ? array( 'px', 'em', 'rem', 'vh', 'vw' ) : $custom_units_theme_support;
+	}
 
 	return $features;
 }
@@ -680,6 +687,7 @@ function gutenberg_experimental_global_styles_settings( $settings ) {
 	unset( $settings['disableCustomGradients'] );
 	unset( $settings['disableCustomFontSizes'] );
 	unset( $settings['enableCustomLineHeight'] );
+	unset( $settings['enableCustomUnits'] );
 
 	// STEP 2 - IF EDIT-SITE, ADD DATA REQUIRED FOR GLOBAL STYLES SIDEBAR
 	// The client needs some information to be able to access/update the user styles.

packages/block-editor/src/components/unit-control/index.js

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { __experimentalUnitControl as BaseUnitControl } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useEditorFeature from '../use-editor-feature';
 
 export default function UnitControl( { units: unitsProp, ...props } ) {
 	const units = useCustomUnits( unitsProp );
@@ -27,35 +31,16 @@ function filterUnitsWithSettings( settings = [], units = [] ) {
 /**
  * Custom hook to retrieve and consolidate units setting from add_theme_support().
  *
- * @param {Array} unitsProp Collection of available units.
+ * @param {Array} units Collection of available units.
  *
  * @return {Array} Filtered units based on settings.
  */
-export function useCustomUnits( unitsProp ) {
-	const settings = useSelect(
-		( select ) =>
-			select( 'core/block-editor' ).getSettings().enableCustomUnits,
-		[]
+export function useCustomUnits( units ) {
+	const availableUnits = useEditorFeature( 'spacing.units' );
+	const usedUnits = filterUnitsWithSettings(
+		! availableUnits ? [] : availableUnits,
+		units
 	);
-	const isDisabled = ! settings;
-
-	// Adjust units based on add_theme_support( 'custom-units' );
-	let units;
-
-	/**
-	 * Handle extra arguments for add_theme_support
-	 *
-	 * Example: add_theme_support( 'custom-units', 'rem' );
-	 * Or: add_theme_support( 'custom-units', 'px, 'rem', 'em' );
-	 *
-	 * Note: If there are unit argument (e.g. 'em'), these units are enabled
-	 * within the control.
-	 */
-	if ( Array.isArray( settings ) ) {
-		units = filterUnitsWithSettings( settings, unitsProp );
-	} else {
-		units = isDisabled ? false : unitsProp;
-	}
 
-	return units;
+	return usedUnits.length === 0 ? false : usedUnits;
 }

packages/block-editor/src/components/use-editor-feature/index.js

@@ -27,6 +27,17 @@ const deprecatedFlags = {
 			? undefined
 			: ! settings.disableCustomFontSizes,
 	'lineHeight.custom': ( settings ) => settings.enableCustomLineHeight,
+	'spacing.units': ( settings ) => {
+		if ( settings.enableCustomUnits === undefined ) {
+			return;
+		}
+
+		if ( settings.enableCustomUnits === true ) {
+			return [ 'px', 'em', 'rem', 'vh', 'vw' ];
+		}
+
+		return settings.enableCustomUnits;
+	},
 };
 
 /**