From 99cf1d947b2f0f8d381e82a92e9bb676f5acd71a Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Fri, 26 Nov 2021 16:49:08 +1100
Subject: [PATCH] Gradients: Enable adding custom gradient when gradients are
 disabled

---
 .../components/src/gradient-picker/index.js   | 59 +++++++++++--------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/packages/components/src/gradient-picker/index.js b/packages/components/src/gradient-picker/index.js
index df5bb07704b6f..39e3809c6025c 100644
--- a/packages/components/src/gradient-picker/index.js
+++ b/packages/components/src/gradient-picker/index.js
@@ -113,31 +113,42 @@ export default function GradientPicker( {
 	const Component = __experimentalHasMultipleOrigins
 		? MultipleOrigin
 		: SingleOrigin;
+
+	const actions = clearable && (
+		<CircularOptionPicker.ButtonAction onClick={ clearGradient }>
+			{ __( 'Clear' ) }
+		</CircularOptionPicker.ButtonAction>
+	);
+
+	if ( gradients?.length ) {
+		return (
+			<Component
+				className={ className }
+				clearable={ clearable }
+				clearGradient={ clearGradient }
+				gradients={ gradients }
+				onChange={ onChange }
+				value={ value }
+				actions={ actions }
+				content={
+					! disableCustomGradients && (
+						<CustomGradientPicker
+							value={ value }
+							onChange={ onChange }
+						/>
+					)
+				}
+			/>
+		);
+	}
+
 	return (
-		<Component
+		<CircularOptionPicker
 			className={ className }
-			clearable={ clearable }
-			clearGradient={ clearGradient }
-			gradients={ gradients }
-			onChange={ onChange }
-			value={ value }
-			actions={
-				clearable && (
-					<CircularOptionPicker.ButtonAction
-						onClick={ clearGradient }
-					>
-						{ __( 'Clear' ) }
-					</CircularOptionPicker.ButtonAction>
-				)
-			}
-			content={
-				! disableCustomGradients && (
-					<CustomGradientPicker
-						value={ value }
-						onChange={ onChange }
-					/>
-				)
-			}
-		/>
+			options={ [] }
+			actions={ actions }
+		>
+			<CustomGradientPicker value={ value } onChange={ onChange } />
+		</CircularOptionPicker>
 	);
 }