Gradients: Enable adding custom gradient when gradients are disabled

WordPress · Nov 26, 2021 · 99cf1d9 · 99cf1d9
1 parent a44a6f2
commit 99cf1d9
Showing 1 changed file with 35 additions and 24 deletions.
diff --git 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>
 	);
 }