Fix: Possible CSS units not passed to useCustomUnits. Making non px u…

…nits not work on padding controls. (#31057)
WordPress · Apr 22, 2021 · f818f1d · f818f1d
1 parent 19956e2
commit f818f1d
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 2 deletions.
diff --git a/packages/block-editor/src/hooks/padding.js b/packages/block-editor/src/hooks/padding.js
@@ -14,6 +14,35 @@ import { useCustomUnits } from '../components/unit-control';
 
 export const SPACING_SUPPORT_KEY = 'spacing';
 
+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: '',
+	},
+];
+
 const hasPaddingSupport = ( blockName ) => {
 	const spacingSupport = getBlockSupport( blockName, SPACING_SUPPORT_KEY );
 	return spacingSupport && spacingSupport.padding !== false;
@@ -33,7 +62,7 @@ export function PaddingEdit( props ) {
 		setAttributes,
 	} = props;
 
-	const units = useCustomUnits();
+	const units = useCustomUnits( CSS_UNITS );
 
 	if ( ! hasPaddingSupport( blockName ) ) {
 		return null;

diff --git a/packages/edit-site/src/components/sidebar/spacing-panel.js b/packages/edit-site/src/components/sidebar/spacing-panel.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	__experimentalBoxControl as BoxControl,
@@ -12,6 +13,35 @@ import {
  */
 import { useEditorFeature } 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( { supports, name } ) {
 	return (
 		useEditorFeature( 'spacing.customPadding', name ) &&
@@ -40,7 +70,7 @@ export default function SpacingPanel( {
 	getStyle,
 	setStyle,
 } ) {
-	const units = useCustomUnits( { contextName: name } );
+	const units = useCustomUnits( { contextName: name, units: CSS_UNITS } );
 	const paddingValues = getStyle( name, 'padding' );
 	const setPaddingValues = ( { top, right, bottom, left } ) => {
 		setStyle( name, 'padding', {