Add add_theme_support for custom units

lib/client-assets.php

@@ -649,18 +649,27 @@ function gutenberg_extend_settings_block_patterns( $settings ) {
 
 /**
  * Extends block editor settings to determine whether to use custom line height controls.
- * Currently experimental.
- *
- * @param array $settings Default editor settings.
- *
- * @return array Filtered editor settings.
  */
 function gutenberg_extend_settings_custom_line_height( $settings ) {
 	$settings['__experimentalDisableCustomLineHeight'] = get_theme_support( 'disable-custom-line-height' );
 	return $settings;
 }
 add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_line_height' );
 
+/**
+* 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['__experimentalDisableCustomUnits'] = get_theme_support( 'disable-custom-units' );
+	return $settings;
+}
+add_filter( 'block_editor_settings', 'gutenberg_extend_settings_custom_units' );
+
 /*
  * Register default patterns if not registered in Core already.
  */

packages/block-library/src/cover/edit.js

@@ -35,7 +35,7 @@ import {
 	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { withDispatch } from '@wordpress/data';
+import { useSelect, withDispatch } from '@wordpress/data';
 import { cover as icon } from '@wordpress/icons';
 
 /**
@@ -73,6 +73,15 @@ function retrieveFastAverageColor() {
 	return retrieveFastAverageColor.fastAverageColor;
 }
 
+export function useIsCustomUnitsDisabled() {
+	const isDisabled = useSelect( ( select ) => {
+		const { getSettings } = select( 'core/block-editor' );
+		return !! getSettings().__experimentalDisableCustomUnits;
+	}, [] );
+
+	return isDisabled;
+}
+
 const { __getComputedSize: getComputedUnitSize } = UnitControl;
 
 function CoverHeightInput( {
@@ -85,6 +94,7 @@ function CoverHeightInput( {
 	const instanceId = useInstanceId( UnitControl );
 	const inputId = `block-cover-height-input-${ instanceId }`;
 	const isPx = unit === 'px';
+	const isCustomUnitsDisabled = useIsCustomUnitsDisabled();
 
 	const handleOnChange = ( unprocessedValue ) => {
 		const inputValue =
@@ -108,6 +118,7 @@ function CoverHeightInput( {
 
 	const inputValue = temporaryInput !== null ? temporaryInput : value;
 	const min = isPx ? COVER_MIN_HEIGHT : 0;
+	const units = isCustomUnitsDisabled ? false : CSS_UNITS;
 
 	return (
 		<BaseControl label={ __( 'Minimum height in pixels' ) } id={ inputId }>
@@ -120,7 +131,7 @@ function CoverHeightInput( {
 				step="1"
 				style={ { maxWidth: 80 } }
 				unit={ unit }
-				units={ CSS_UNITS }
+				units={ units }
 				value={ inputValue }
 			/>
 		</BaseControl>

packages/components/src/unit-control/unit-select-control.js

@@ -20,7 +20,7 @@ export default function UnitSelectControl( {
 	size = 'default',
 	value = 'px',
 } ) {
-	if ( isEmpty( options ) || options.length === 1 ) {
+	if ( isEmpty( options ) || options.length === 1 || options === false ) {
 		return <UnitLabel size={ size }>{ value }</UnitLabel>;
 	}
 

packages/editor/src/components/provider/index.js

@@ -117,6 +117,7 @@ class EditorProvider extends Component {
 				'templateLock',
 				'titlePlaceholder',
 				'onUpdateDefaultBlockStyles',
+				'__experimentalDisableCustomUnits',
 				'__experimentalEnableLegacyWidgetBlock',
 				'__experimentalBlockDirectory',
 				'__experimentalEnableFullSiteEditing',