diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js
index 99367ea9e21b49..b5eb6175c8c5e4 100644
--- 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
index 3ca76d9c8f4827..6811349b74ad74 100644
--- 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
index ddfa3ebca8e99b..e9e2f828808549 100644
--- 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
index 2bb0a409da0dd2..df6beb0f8f7b73 100644
--- 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 );