DimensionsPanel: Fix unexpected value decoding/encoding (#52661)

WordPress · Jul 18, 2023 · 77f25c0 · 77f25c0
1 parent c79aa94
commit 77f25c0
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 8 deletions.
diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -207,18 +207,24 @@ export default function DimensionsPanel( {
 	// in global styles but not in block inspector.
 	includeLayoutControls = false,
 } ) {
+	const { dimensions, spacing } = settings;
+
 	const decodeValue = ( rawValue ) => {
 		if ( rawValue && typeof rawValue === 'object' ) {
 			return Object.keys( rawValue ).reduce( ( acc, key ) => {
 				acc[ key ] = getValueFromVariable(
-					{ settings },
+					{ settings: { dimensions, spacing } },
 					'',
 					rawValue[ key ]
 				);
 				return acc;
 			}, {} );
 		}
-		return getValueFromVariable( { settings }, '', rawValue );
+		return getValueFromVariable(
+			{ settings: { dimensions, spacing } },
+			'',
+			rawValue
+		);
 	};
 
 	const showSpacingPresetsControl = useHasSpacingPresets( settings );

diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/axial.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/axial.js
@@ -2,7 +2,12 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { LABELS, ICONS, hasAxisSupport } from '../utils';
+import {
+	LABELS,
+	ICONS,
+	getPresetValueFromCustomValue,
+	hasAxisSupport,
+} from '../utils';
 
 const groupedSides = [ 'vertical', 'horizontal' ];
 
@@ -20,7 +25,17 @@ export default function AxialInputControls( {
 		if ( ! onChange ) {
 			return;
 		}
-		const nextValues = { ...values };
+
+		// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+		const nextValues = {
+			...Object.keys( values ).reduce( ( acc, key ) => {
+				acc[ key ] = getPresetValueFromCustomValue(
+					values[ key ],
+					spacingSizes
+				);
+				return acc;
+			}, {} ),
+		};
 
 		if ( side === 'vertical' ) {
 			nextValues.top = next;

diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/separated.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/separated.js
@@ -2,7 +2,12 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { ALL_SIDES, LABELS, ICONS } from '../utils';
+import {
+	ALL_SIDES,
+	LABELS,
+	ICONS,
+	getPresetValueFromCustomValue,
+} from '../utils';
 
 export default function SeparatedInputControls( {
 	minimumCustomValue,
@@ -20,7 +25,17 @@ export default function SeparatedInputControls( {
 		: ALL_SIDES;
 
 	const createHandleOnChange = ( side ) => ( next ) => {
-		const nextValues = { ...values };
+		// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+		const nextValues = {
+			...Object.keys( values ).reduce( ( acc, key ) => {
+				acc[ key ] = getPresetValueFromCustomValue(
+					values[ key ],
+					spacingSizes
+				);
+				return acc;
+			}, {} ),
+		};
+
 		nextValues[ side ] = next;
 
 		onChange( nextValues );

diff --git a/packages/block-editor/src/components/spacing-sizes-control/input-controls/single.js b/packages/block-editor/src/components/spacing-sizes-control/input-controls/single.js
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { LABELS } from '../utils';
+import { LABELS, getPresetValueFromCustomValue } from '../utils';
 
 export default function SingleInputControl( {
 	minimumCustomValue,
@@ -16,7 +16,17 @@ export default function SingleInputControl( {
 	values,
 } ) {
 	const createHandleOnChange = ( currentSide ) => ( next ) => {
-		const nextValues = { ...values };
+		// Encode the existing value into the preset value if the passed in value matches the value of one of the spacingSizes.
+		const nextValues = {
+			...Object.keys( values ).reduce( ( acc, key ) => {
+				acc[ key ] = getPresetValueFromCustomValue(
+					values[ key ],
+					spacingSizes
+				);
+				return acc;
+			}, {} ),
+		};
+
 		nextValues[ currentSide ] = next;
 
 		onChange( nextValues );