Fix global styles preset control

WordPress · Dec 5, 2024 · bd11946 · bd11946
1 parent aa60fa3
commit bd11946
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 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
@@ -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
@@ -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
@@ -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 = () => {