@wordpress/block-editor 11.8.0 → 12.1.0

package/src/components/font-sizes/fluid-utils.js

@@ -6,18 +6,17 @@
 
 // Defaults.
 const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
-const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
+const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '320px';
 const DEFAULT_SCALE_FACTOR = 1;
-const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
+const DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN = 0.25;
+const DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX = 0.75;
 const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
 
 /**
  * Computes a fluid font-size value that uses clamp(). A minimum and maximum
  * font size OR a single font size can be specified.
  *
- * If a single font size is specified, it is scaled up and down by
- * minimumFontSizeFactor and maximumFontSizeFactor to arrive at the minimum and
- * maximum sizes.
+ * If a single font size is specified, it is scaled up and down using a logarithmic scale.
  *
  * @example
  * ```js
@@ -33,14 +32,13 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
  * ```
  *
  * @param {Object}        args
- * @param {?string}       args.minimumViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
- * @param {?string}       args.maximumViewPortWidth  Maximum size up to which type will have fluidity. Optional if fontSize is specified.
- * @param {string|number} [args.fontSize]            Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
- * @param {?string}       args.maximumFontSize       Maximum font size for any clamp() calculation. Optional.
- * @param {?string}       args.minimumFontSize       Minimum font size for any clamp() calculation. Optional.
- * @param {?number}       args.scaleFactor           A scale factor to determine how fast a font scales within boundaries. Optional.
- * @param {?number}       args.minimumFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
- * @param {?string}       args.minimumFontSizeLimit  The smallest a calculated font size may be. Optional.
+ * @param {?string}       args.minimumViewPortWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
+ * @param {?string}       args.maximumViewPortWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified.
+ * @param {string|number} [args.fontSize]           Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
+ * @param {?string}       args.maximumFontSize      Maximum font size for any clamp() calculation. Optional.
+ * @param {?string}       args.minimumFontSize      Minimum font size for any clamp() calculation. Optional.
+ * @param {?number}       args.scaleFactor          A scale factor to determine how fast a font scales within boundaries. Optional.
+ * @param {?string}       args.minimumFontSizeLimit The smallest a calculated font size may be. Optional.
  *
  * @return {string|null} A font-size value using clamp().
  */
@@ -51,7 +49,6 @@ export function getComputedFluidTypographyValue( {
 	minimumViewPortWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
 	maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
 	scaleFactor = DEFAULT_SCALE_FACTOR,
-	minimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR,
 	minimumFontSizeLimit,
 } ) {
 	// Validate incoming settings and set defaults.
@@ -106,6 +103,26 @@ export function getComputedFluidTypographyValue( {
 		 * the given font size multiplied by the min font size scale factor.
 		 */
 		if ( ! minimumFontSize ) {
+			const fontSizeValueInPx =
+				fontSizeParsed.unit === 'px'
+					? fontSizeParsed.value
+					: fontSizeParsed.value * 16;
+
+			/*
+			 * The scale factor is a multiplier that affects how quickly the curve will move towards the minimum,
+			 * that is, how quickly the size factor reaches 0 given increasing font size values.
+			 * For a - b * log2(), lower values of b will make the curve move towards the minimum faster.
+			 * The scale factor is constrained between min and max values.
+			 */
+			const minimumFontSizeFactor = Math.min(
+				Math.max(
+					1 - 0.075 * Math.log2( fontSizeValueInPx ),
+					DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN
+				),
+				DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX
+			);
+
+			// Calculates the minimum font size.
 			const calculatedMinimumFontSize = roundToPrecision(
 				fontSizeParsed.value * minimumFontSizeFactor,
 				3

package/src/components/font-sizes/test/fluid-utils.js

@@ -24,7 +24,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			maximumFontSize: '45px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(20px, 1.25rem + ((1vw - 7.68px) * 3.005), 45px)'
+			'clamp(20px, 1.25rem + ((1vw - 3.2px) * 1.953), 45px)'
 		);
 	} );
 
@@ -33,7 +33,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			fontSize: '30px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)'
 		);
 	} );
 
@@ -42,7 +42,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			fontSize: '30px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)'
 		);
 	} );
 
@@ -53,7 +53,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			maximumViewPortWidth: '1000px',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 5px) * 1.5), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 5px) * 2.208), 30px)'
 		);
 	} );
 
@@ -63,18 +63,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
 			scaleFactor: '2',
 		} );
 		expect( fluidTypographyValues ).toBe(
-			'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 1.803), 30px)'
-		);
-	} );
-
-	it( 'should return a fluid font size when given a min and max font size factor', () => {
-		const fluidTypographyValues = getComputedFluidTypographyValue( {
-			fontSize: '30px',
-			minimumFontSizeFactor: '0.5',
-			maximumFontSizeFactor: '2',
-		} );
-		expect( fluidTypographyValues ).toBe(
-			'clamp(15px, 0.938rem + ((1vw - 7.68px) * 1.803), 30px)'
+			'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.725), 30px)'
 		);
 	} );
 

package/src/components/global-styles/advanced-panel.js

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	TextareaControl,
+	Tooltip,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, info } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { default as transformStyles } from '../../utils/transform-styles';
+
+export default function AdvancedPanel( {
+	value,
+	onChange,
+	inheritedValue = value,
+} ) {
+	// Custom CSS
+	const [ cssError, setCSSError ] = useState( null );
+	const customCSS = inheritedValue?.css;
+	function handleOnChange( newValue ) {
+		onChange( {
+			...value,
+			css: newValue,
+		} );
+		if ( cssError ) {
+			const [ transformed ] = transformStyles(
+				[ { css: value } ],
+				'.editor-styles-wrapper'
+			);
+			if ( transformed ) {
+				setCSSError( null );
+			}
+		}
+	}
+	function handleOnBlur( event ) {
+		if ( ! event?.target?.value ) {
+			setCSSError( null );
+			return;
+		}
+
+		const [ transformed ] = transformStyles(
+			[ { css: event.target.value } ],
+			'.editor-styles-wrapper'
+		);
+
+		setCSSError(
+			transformed === null
+				? __( 'There is an error with your CSS structure.' )
+				: null
+		);
+	}
+
+	return (
+		<VStack spacing={ 3 }>
+			<TextareaControl
+				label={ __( 'Additional CSS' ) }
+				__nextHasNoMarginBottom
+				value={ customCSS }
+				onChange={ ( newValue ) => handleOnChange( newValue ) }
+				onBlur={ handleOnBlur }
+				className="block-editor-global-styles-advanced-panel__custom-css-input"
+				spellCheck={ false }
+			/>
+			{ cssError && (
+				<Tooltip text={ cssError }>
+					<div className="block-editor-global-styles-advanced-panel__custom-css-validation-wrapper">
+						<Icon
+							icon={ info }
+							className="block-editor-global-styles-advanced-panel__custom-css-validation-icon"
+						/>
+					</div>
+				</Tooltip>
+			) }
+		</VStack>
+	);
+}

package/src/components/global-styles/border-panel.js

@@ -45,35 +45,6 @@ function useHasBorderWidthControl( settings ) {
 	return settings?.border?.width;
 }
 
-function applyFallbackStyle( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	if ( ! border.style && ( border.color || border.width ) ) {
-		return { ...border, style: 'solid' };
-	}
-
-	return border;
-}
-
-function applyAllFallbackStyles( border ) {
-	if ( ! border ) {
-		return border;
-	}
-
-	if ( hasSplitBorders( border ) ) {
-		return {
-			top: applyFallbackStyle( border.top ),
-			right: applyFallbackStyle( border.right ),
-			bottom: applyFallbackStyle( border.bottom ),
-			left: applyFallbackStyle( border.left ),
-		};
-	}
-
-	return applyFallbackStyle( border );
-}
-
 function BorderToolsPanel( {
 	resetAllFilter,
 	onChange,
@@ -186,7 +157,7 @@ export default function BorderPanel( {
 	const onBorderChange = ( newBorder ) => {
 		// Ensure we have a visible border style when a border width or
 		// color is being selected.
-		const updatedBorder = applyAllFallbackStyles( newBorder );
+		const updatedBorder = { ...newBorder };
 
 		if ( hasSplitBorders( updatedBorder ) ) {
 			[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {

package/src/components/global-styles/color-panel.js

@@ -20,7 +20,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -28,7 +28,7 @@ import { __ } from '@wordpress/i18n';
 import ColorGradientControl from '../colors-gradients/control';
 import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
 import { getValueFromVariable } from './utils';
-import { immutableSet } from '../../utils/object';
+import { setImmutably } from '../../utils/object';
 
 export function useHasColorPanel( settings ) {
 	const hasTextPanel = useHasTextPanel( settings );
@@ -230,6 +230,11 @@ function ColorPanelDropdown( {
 							{ 'is-open': isOpen }
 						),
 						'aria-expanded': isOpen,
+						'aria-label': sprintf(
+							/* translators: %s is the type of color property, e.g., "background" */
+							__( 'Color %s styles' ),
+							label
+						),
 					};
 
 					return (
@@ -330,7 +335,7 @@ export default function ColorPanel( {
 	const hasTextColor = () => !! userTextColor;
 	const setTextColor = ( newColor ) => {
 		onChange(
-			immutableSet(
+			setImmutably(
 				value,
 				[ 'color', 'text' ],
 				encodeColorValue( newColor )
@@ -347,7 +352,7 @@ export default function ColorPanel( {
 	const userGradient = decodeValue( value?.color?.gradient );
 	const hasBackground = () => !! userBackgroundColor || !! userGradient;
 	const setBackgroundColor = ( newColor ) => {
-		const newValue = immutableSet(
+		const newValue = setImmutably(
 			value,
 			[ 'color', 'background' ],
 			encodeColorValue( newColor )
@@ -356,7 +361,7 @@ export default function ColorPanel( {
 		onChange( newValue );
 	};
 	const setGradient = ( newGradient ) => {
-		const newValue = immutableSet(
+		const newValue = setImmutably(
 			value,
 			[ 'color', 'gradient' ],
 			encodeGradientValue( newGradient )
@@ -365,7 +370,7 @@ export default function ColorPanel( {
 		onChange( newValue );
 	};
 	const resetBackground = () => {
-		const newValue = immutableSet(
+		const newValue = setImmutably(
 			value,
 			[ 'color', 'background' ],
 			undefined
@@ -382,7 +387,7 @@ export default function ColorPanel( {
 	const userLinkColor = decodeValue( value?.elements?.link?.color?.text );
 	const setLinkColor = ( newColor ) => {
 		onChange(
-			immutableSet(
+			setImmutably(
 				value,
 				[ 'elements', 'link', 'color', 'text' ],
 				encodeColorValue( newColor )
@@ -397,7 +402,7 @@ export default function ColorPanel( {
 	);
 	const setHoverLinkColor = ( newColor ) => {
 		onChange(
-			immutableSet(
+			setImmutably(
 				value,
 				[ 'elements', 'link', ':hover', 'color', 'text' ],
 				encodeColorValue( newColor )
@@ -406,12 +411,12 @@ export default function ColorPanel( {
 	};
 	const hasLink = () => !! userLinkColor || !! userHoverLinkColor;
 	const resetLink = () => {
-		let newValue = immutableSet(
+		let newValue = setImmutably(
 			value,
 			[ 'elements', 'link', ':hover', 'color', 'text' ],
 			undefined
 		);
-		newValue = immutableSet(
+		newValue = setImmutably(
 			newValue,
 			[ 'elements', 'link', 'color', 'text' ],
 			undefined
@@ -591,7 +596,7 @@ export default function ColorPanel( {
 				elementGradientUserColor
 			);
 		const resetElement = () => {
-			const newValue = immutableSet(
+			const newValue = setImmutably(
 				value,
 				[ 'elements', name, 'color', 'background' ],
 				undefined
@@ -603,7 +608,7 @@ export default function ColorPanel( {
 
 		const setElementTextColor = ( newTextColor ) => {
 			onChange(
-				immutableSet(
+				setImmutably(
 					value,
 					[ 'elements', name, 'color', 'text' ],
 					encodeColorValue( newTextColor )
@@ -611,7 +616,7 @@ export default function ColorPanel( {
 			);
 		};
 		const setElementBackgroundColor = ( newBackgroundColor ) => {
-			const newValue = immutableSet(
+			const newValue = setImmutably(
 				value,
 				[ 'elements', name, 'color', 'background' ],
 				encodeColorValue( newBackgroundColor )
@@ -620,7 +625,7 @@ export default function ColorPanel( {
 			onChange( newValue );
 		};
 		const setElementGradient = ( newGradient ) => {
-			const newValue = immutableSet(
+			const newValue = setImmutably(
 				value,
 				[ 'elements', name, 'color', 'gradient' ],
 				encodeGradientValue( newGradient )

package/src/components/global-styles/color-panel.native.js

@@ -0,0 +1,207 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useGlobalStyles } from '@wordpress/components';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import PanelColorGradientSettings from '../colors-gradients/panel-color-gradient-settings';
+import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
+import { getValueFromVariable } from './utils';
+import { setImmutably } from '../../utils/object';
+import ContrastChecker from '../contrast-checker';
+import InspectorControls from '../inspector-controls';
+import {
+	useHasColorPanel,
+	useHasTextPanel,
+	useHasBackgroundPanel,
+} from './color-panel.js';
+
+const ColorPanel = ( {
+	value,
+	inheritedValue = value,
+	onChange,
+	settings,
+} ) => {
+	const colors = useColorsPerOrigin( settings );
+	const gradients = useGradientsPerOrigin( settings );
+	const globalStyles = useGlobalStyles();
+
+	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
+	const [ detectedTextColor, setDetectedTextColor ] = useState();
+
+	const { baseGlobalStyles } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return {
+			baseGlobalStyles:
+				getSettings()?.__experimentalGlobalStylesBaseStyles?.color,
+		};
+	} );
+
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+	const encodeColorValue = useCallback(
+		( colorValue ) => {
+			const allColors = colors.flatMap(
+				( { colors: originColors } ) => originColors
+			);
+			const colorObject = allColors.find(
+				( { color } ) => color === colorValue
+			);
+			return colorObject
+				? 'var:preset|color|' + colorObject.slug
+				: colorValue;
+		},
+		[ colors ]
+	);
+	const encodeGradientValue = useCallback(
+		( gradientValue ) => {
+			const allGradients = gradients.flatMap(
+				( { gradients: originGradients } ) => originGradients
+			);
+			const gradientObject = allGradients.find(
+				( { gradient } ) => gradient === gradientValue
+			);
+			return gradientObject
+				? 'var:preset|gradient|' + gradientObject.slug
+				: gradientValue;
+		},
+		[ gradients ]
+	);
+
+	// Text Color
+	const showTextPanel = useHasTextPanel( settings );
+	const textColor = decodeValue( inheritedValue?.color?.text );
+	const setTextColor = useCallback(
+		( newColor ) => {
+			onChange(
+				setImmutably(
+					value,
+					[ 'color', 'text' ],
+					encodeColorValue( newColor )
+				)
+			);
+		},
+		[ encodeColorValue, onChange, value ]
+	);
+	const resetTextColor = useCallback(
+		() => setTextColor( undefined ),
+		[ setTextColor ]
+	);
+
+	// BackgroundColor
+	const showBackgroundPanel = useHasBackgroundPanel( settings );
+	const backgroundColor = decodeValue( inheritedValue?.color?.background );
+	const gradient = decodeValue( inheritedValue?.color?.gradient );
+	const setBackgroundColor = useCallback(
+		( newColor ) => {
+			const newValue = setImmutably(
+				value,
+				[ 'color', 'background' ],
+				encodeColorValue( newColor )
+			);
+			newValue.color.gradient = undefined;
+			onChange( newValue );
+		},
+		[ encodeColorValue, onChange, value ]
+	);
+	const setGradient = useCallback(
+		( newGradient ) => {
+			const newValue = setImmutably(
+				value,
+				[ 'color', 'gradient' ],
+				encodeGradientValue( newGradient )
+			);
+			newValue.color.background = undefined;
+			onChange( newValue );
+		},
+		[ encodeGradientValue, onChange, value ]
+	);
+	const resetBackground = useCallback( () => {
+		const newValue = setImmutably(
+			value,
+			[ 'color', 'background' ],
+			undefined
+		);
+		newValue.color.gradient = undefined;
+		onChange( newValue );
+	}, [ onChange, value ] );
+	const currentGradients = settings?.color?.gradients;
+	const withoutGradientsSupport =
+		Array.isArray( currentGradients ) && currentGradients.length === 0;
+
+	const items = useMemo(
+		() =>
+			[
+				showTextPanel && {
+					label: __( 'Text' ),
+					colorValue: textColor,
+					onColorChange: setTextColor,
+					onColorCleared: resetTextColor,
+				},
+				showBackgroundPanel && {
+					label: __( 'Background' ),
+					colorValue: backgroundColor,
+					onColorChange: setBackgroundColor,
+					onColorCleared: resetBackground,
+					onGradientChange: ! withoutGradientsSupport
+						? setGradient
+						: undefined,
+					gradientValue: gradient,
+				},
+			].filter( Boolean ),
+		[
+			backgroundColor,
+			gradient,
+			resetBackground,
+			resetTextColor,
+			setBackgroundColor,
+			setGradient,
+			setTextColor,
+			showBackgroundPanel,
+			showTextPanel,
+			textColor,
+			withoutGradientsSupport,
+		]
+	);
+
+	useEffect( () => {
+		// The following logic is used to determine current text/background colors:
+		// 1. The globalStyles object is queried to determine whether a color has been
+		// set via a block's settings.
+		// 2. If a block-based theme is in use and no globalStyles exist, the theme's
+		// default/base colors are used.
+		// 3. If no globalStyles exist and a theme isn't block-based, there is no way
+		// to determine the default text/background color and the checker won't run.
+		const currentDetectedTextColor =
+			globalStyles?.color || baseGlobalStyles?.text;
+		const currentDetectedBackgroundColor =
+			globalStyles?.backgroundColor || baseGlobalStyles?.background;
+
+		setDetectedTextColor( currentDetectedTextColor );
+		setDetectedBackgroundColor( currentDetectedBackgroundColor );
+	}, [ globalStyles, baseGlobalStyles ] );
+
+	return (
+		<InspectorControls>
+			<PanelColorGradientSettings
+				title={ __( 'Color' ) }
+				initialOpen={ false }
+				settings={ items }
+			>
+				<ContrastChecker
+					backgroundColor={ detectedBackgroundColor }
+					textColor={ detectedTextColor }
+				/>
+			</PanelColorGradientSettings>
+		</InspectorControls>
+	);
+};
+
+export { useHasColorPanel };
+export default ColorPanel;

package/src/components/global-styles/dimensions-panel.js

@@ -28,7 +28,7 @@ import SpacingSizesControl from '../spacing-sizes-control';
 import HeightControl from '../height-control';
 import ChildLayoutControl from '../child-layout-control';
 import { cleanEmptyObject } from '../../hooks/utils';
-import { immutableSet } from '../../utils/object';
+import { setImmutably } from '../../utils/object';
 
 const AXIAL_SIDES = [ 'horizontal', 'vertical' ];
 
@@ -184,12 +184,12 @@ function DimensionsToolsPanel( {
 }
 
 const DEFAULT_CONTROLS = {
-	contentSize: false,
-	wideSize: false,
-	padding: false,
-	margin: false,
-	blockGap: false,
-	minHeight: false,
+	contentSize: true,
+	wideSize: true,
+	padding: true,
+	margin: true,
+	blockGap: true,
+	minHeight: true,
 	childLayout: true,
 };
 
@@ -226,7 +226,11 @@ export default function DimensionsPanel( {
 	const contentSizeValue = decodeValue( inheritedValue?.layout?.contentSize );
 	const setContentSizeValue = ( newValue ) => {
 		onChange(
-			immutableSet( value, [ 'layout', 'contentSize' ], newValue )
+			setImmutably(
+				value,
+				[ 'layout', 'contentSize' ],
+				newValue || undefined
+			)
 		);
 	};
 	const hasUserSetContentSizeValue = () => !! value?.layout?.contentSize;
@@ -237,7 +241,13 @@ export default function DimensionsPanel( {
 		useHasWideSize( settings ) && includeLayoutControls;
 	const wideSizeValue = decodeValue( inheritedValue?.layout?.wideSize );
 	const setWideSizeValue = ( newValue ) => {
-		onChange( immutableSet( value, [ 'layout', 'wideSize' ], newValue ) );
+		onChange(
+			setImmutably(
+				value,
+				[ 'layout', 'wideSize' ],
+				newValue || undefined
+			)
+		);
 	};
 	const hasUserSetWideSizeValue = () => !! value?.layout?.wideSize;
 	const resetWideSizeValue = () => setWideSizeValue( undefined );
@@ -254,7 +264,7 @@ export default function DimensionsPanel( {
 		paddingSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const setPaddingValues = ( newPaddingValues ) => {
 		const padding = filterValuesBySides( newPaddingValues, paddingSides );
-		onChange( immutableSet( value, [ 'spacing', 'padding' ], padding ) );
+		onChange( setImmutably( value, [ 'spacing', 'padding' ], padding ) );
 	};
 	const hasPaddingValue = () =>
 		!! value?.spacing?.padding &&
@@ -274,7 +284,7 @@ export default function DimensionsPanel( {
 		marginSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const setMarginValues = ( newMarginValues ) => {
 		const margin = filterValuesBySides( newMarginValues, marginSides );
-		onChange( immutableSet( value, [ 'spacing', 'margin' ], margin ) );
+		onChange( setImmutably( value, [ 'spacing', 'margin' ], margin ) );
 	};
 	const hasMarginValue = () =>
 		!! value?.spacing?.margin &&
@@ -293,7 +303,7 @@ export default function DimensionsPanel( {
 		gapSides && gapSides.some( ( side ) => AXIAL_SIDES.includes( side ) );
 	const setGapValue = ( newGapValue ) => {
 		onChange(
-			immutableSet( value, [ 'spacing', 'blockGap' ], newGapValue )
+			setImmutably( value, [ 'spacing', 'blockGap' ], newGapValue )
 		);
 	};
 	const setGapValues = ( nextBoxGapValue ) => {
@@ -318,7 +328,7 @@ export default function DimensionsPanel( {
 	const minHeightValue = decodeValue( inheritedValue?.dimensions?.minHeight );
 	const setMinHeightValue = ( newValue ) => {
 		onChange(
-			immutableSet( value, [ 'dimensions', 'minHeight' ], newValue )
+			setImmutably( value, [ 'dimensions', 'minHeight' ], newValue )
 		);
 	};
 	const resetMinHeightValue = () => {