From bd11946901d4ca837048132c14cef65ae8c28574 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 5 Dec 2024 08:54:23 +0100
Subject: [PATCH] Fix global styles preset control

---
 .../single-input-control.js                   |  6 ++++-
 .../components/border-radius-control/utils.js | 27 +++++++++++++++++++
 .../components/global-styles/border-panel.js  | 12 ++++++++-
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/border-radius-control/single-input-control.js b/packages/block-editor/src/components/border-radius-control/single-input-control.js
index 38880df8f35d9..9d30b89b32531 100644
--- a/packages/block-editor/src/components/border-radius-control/single-input-control.js
+++ b/packages/block-editor/src/components/border-radius-control/single-input-control.js
@@ -29,6 +29,7 @@ import {
 	getAllValue,
 	getCustomValueFromPreset,
 	getPresetValueFromControlValue,
+	getPresetValueFromCustomValue,
 	getSliderValueFromPreset,
 	isValuePreset,
 } from './utils';
@@ -120,7 +121,10 @@ export default function SingleInputControl( {
 					bottomRight: valuesProp,
 			  };
 
-	const value = corner === 'all' ? getAllValue( values ) : values[ corner ];
+	const value = getPresetValueFromCustomValue(
+		corner === 'all' ? getAllValue( values ) : values[ corner ],
+		presets
+	);
 	const resolvedPresetValue = isValuePreset( value )
 		? getCustomValueFromPreset( value, presets )
 		: value;
diff --git a/packages/block-editor/src/components/border-radius-control/utils.js b/packages/block-editor/src/components/border-radius-control/utils.js
index ac3bef04863c2..6bb4acb561071 100644
--- a/packages/block-editor/src/components/border-radius-control/utils.js
+++ b/packages/block-editor/src/components/border-radius-control/utils.js
@@ -220,3 +220,30 @@ export function getPresetValueFromControlValue(
 	}
 	return `var:preset|border-radius|${ presets[ controlValue ]?.slug }`;
 }
+
+/**
+ * Converts a custom value to preset value if one can be found.
+ *
+ * Returns value as-is if no match is found.
+ *
+ * @param {string} value   Value to convert
+ * @param {Array}  presets Array of the current border radius preset objects
+ *
+ * @return {string} The preset value if it can be found.
+ */
+export function getPresetValueFromCustomValue( value, presets ) {
+	// Return value as-is if it is undefined or is already a preset, or '0';
+	if ( ! value || isValuePreset( value ) || value === '0' ) {
+		return value;
+	}
+
+	const spacingMatch = presets.find(
+		( size ) => String( size.size ) === String( value )
+	);
+
+	if ( spacingMatch?.slug ) {
+		return `var:preset|border-radius|${ spacingMatch.slug }`;
+	}
+
+	return value;
+}
diff --git a/packages/block-editor/src/components/global-styles/border-panel.js b/packages/block-editor/src/components/global-styles/border-panel.js
index a3b0f070248b6..7f8f8d0a07a6f 100644
--- a/packages/block-editor/src/components/global-styles/border-panel.js
+++ b/packages/block-editor/src/components/global-styles/border-panel.js
@@ -146,7 +146,17 @@ export default function BorderPanel( {
 
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( settings );
-	const borderRadiusValues = decodeValue( border?.radius );
+	const borderRadiusValues = useMemo( () => {
+		if ( typeof border?.radius !== 'object' ) {
+			return decodeValue( border?.radius );
+		}
+		return {
+			topLeft: decodeValue( border?.radius?.topLeft ),
+			topRight: decodeValue( border?.radius?.topRight ),
+			bottomLeft: decodeValue( border?.radius?.bottomLeft ),
+			bottomRight: decodeValue( border?.radius?.bottomRight ),
+		};
+	}, [ border?.radius, decodeValue ] );
 	const setBorderRadius = ( newBorderRadius ) =>
 		setBorder( { ...border, radius: newBorderRadius } );
 	const hasBorderRadius = () => {