Fix Color Picker Angle Reset on Gradient Type Change

[Vedant-Gandhi]

What?

Closes #72433

Why?

When we switch the gradient type in color picket from linear to radial and then back to linear the selected angle in linear resets.

How?

Add logic to memoize the last angle selected.

Demo

20260317223909525.mp4

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Vedant-Gandhi <vedantgandhi28@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: patrickwc <patrickwclanden@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Vedant-Gandhi! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[Copilot]

Pull request overview

This PR updates the CustomGradientPicker’s gradient type switching logic so that when a user switches from linear → radial → linear, the previously selected linear angle is preserved instead of resetting.

Changes:

• Add a useRef-backed “last linear orientation” cache in GradientTypePicker.
• When switching back to linear-gradient, restore the cached orientation (or fall back to the default angle).
• Clean up constants imports related to the previous orientation defaulting behavior.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[mirka]

Approach looks good overall 👍 Can we also add tests to cover this new behavior?

The native counterpart (index.native.js) has the same pattern of stripping orientation when switching to radial, so it likely has the same issue. Out of scope for this PR, but worth noting here. Maybe it's fine to leave it that way, since we're migrating away from the React Native implementation.

[mirka]

diff --git a/packages/components/src/custom-gradient-picker/index.tsx b/packages/components/src/custom-gradient-picker/index.tsx
index 164562c23c9..0d951e8a66b 100644
--- a/packages/components/src/custom-gradient-picker/index.tsx
+++ b/packages/components/src/custom-gradient-picker/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { type AngularNode, type LinearGradientNode } from 'gradient-parser';
+import { type LinearGradientNode } from 'gradient-parser';
 
 /**
  * WordPress dependencies
@@ -67,27 +67,23 @@ const GradientTypePicker = ( {
 	onChange,
 }: GradientTypePickerProps ) => {
 	const { type } = gradientAST;
-	const lastLinearOrientation = useRef< AngularNode >(
-		( gradientAST.orientation as AngularNode ) ?? {
-			type: 'angular',
-			value: `${ DEFAULT_LINEAR_GRADIENT_ANGLE }`,
-		}
-	);
+	const lastLinearAngle = useRef( DEFAULT_LINEAR_GRADIENT_ANGLE );
 
-	if ( type === 'linear-gradient' && gradientAST.orientation ) {
-		lastLinearOrientation.current = gradientAST.orientation as AngularNode;
+	if (
+		type === 'linear-gradient' &&
+		gradientAST.orientation?.type === 'angular'
+	) {
+		lastLinearAngle.current = Number( gradientAST.orientation.value );
 	}
 
 	const onSetLinearGradient = () => {
 		onChange(
 			serializeGradient( {
 				...gradientAST,
-				orientation:
-					lastLinearOrientation.current ??
-					( {
-						type: 'angular',
-						value: `${ DEFAULT_LINEAR_GRADIENT_ANGLE }`,
-					} as const ),
+				orientation: {
+					type: 'angular',
+					value: `${ lastLinearAngle.current }`,
+				},
 				type: 'linear-gradient',
 			} satisfies LinearGradientNode )
 		);

[mirka]

Something like this may be simpler, safer, and avoid all the as casting.

[Vedant-Gandhi]

Yes, this works like a charm and reduces the unnecessary complexity.

[Vedant-Gandhi]

Hi @mirka, Thanks for the detailed feedback and suggestions. I have added the test cases and implemented the suggested approach for type hinting. Let me know if any further improvements are needed.