From f2b96820cae7434c9865cfe78a7bb7e8e1ba4739 Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@automattic.com>
Date: Thu, 24 Oct 2019 12:46:13 +0100
Subject: [PATCH] =?UTF-8?q?Chore:=20Fix:=20Do=20not=20show=20Gradient=20pa?=
 =?UTF-8?q?nel=20if=20gradients=20are=20not=20av=E2=80=A6=20(#18091)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/gradient-picker/panel.js   | 32 +++++++++++++++++++
 packages/block-editor/src/components/index.js |  1 +
 packages/block-library/src/button/edit.js     | 32 +++++++++----------
 3 files changed, 48 insertions(+), 17 deletions(-)
 create mode 100644 packages/block-editor/src/components/gradient-picker/panel.js

diff --git a/packages/block-editor/src/components/gradient-picker/panel.js b/packages/block-editor/src/components/gradient-picker/panel.js
new file mode 100644
index 0000000000000..2be91125cbc11
--- /dev/null
+++ b/packages/block-editor/src/components/gradient-picker/panel.js
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { PanelBody } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import GradientPicker from './control';
+
+export default function GradientPanel( props ) {
+	const gradients = useSelect( ( select ) => (
+		select( 'core/block-editor' ).getSettings().gradients
+	) );
+	if ( isEmpty( gradients ) ) {
+		return null;
+	}
+	return (
+		<PanelBody title={ __( 'Gradient' ) }>
+			<GradientPicker
+				{ ...props }
+			/>
+		</PanelBody>
+	);
+}
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index a31f3829ca360..798566bda6708 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -20,6 +20,7 @@ export { default as ColorPaletteControl } from './color-palette/control';
 export { default as ContrastChecker } from './contrast-checker';
 export { default as __experimentalGradientPicker } from './gradient-picker';
 export { default as __experimentalGradientPickerControl } from './gradient-picker/control';
+export { default as __experimentalGradientPickerPanel } from './gradient-picker/panel';
 export { default as InnerBlocks } from './inner-blocks';
 export { default as InspectorAdvancedControls } from './inspector-advanced-controls';
 export { default as InspectorControls } from './inspector-controls';
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js
index 33ebe079c5e89..5d457482cf04b 100644
--- a/packages/block-library/src/button/edit.js
+++ b/packages/block-library/src/button/edit.js
@@ -23,13 +23,13 @@ import {
 	withFallbackStyles,
 } from '@wordpress/components';
 import {
-	URLInput,
-	RichText,
+	__experimentalGradientPickerPanel,
 	ContrastChecker,
 	InspectorControls,
-	withColors,
 	PanelColorSettings,
-	__experimentalGradientPickerControl,
+	RichText,
+	URLInput,
+	withColors,
 } from '@wordpress/block-editor';
 
 const { getComputedStyle } = window;
@@ -195,20 +195,18 @@ function ButtonEdit( {
 						} }
 					/>
 				</PanelColorSettings>
-				<PanelBody title={ __( 'Gradient' ) }>
-					<__experimentalGradientPickerControl
-						onChange={
-							( newGradient ) => {
-								setAttributes( {
-									customGradient: newGradient,
-									backgroundColor: undefined,
-									customBackgroundColor: undefined,
-								} );
-							}
+				<__experimentalGradientPickerPanel
+					onChange={
+						( newGradient ) => {
+							setAttributes( {
+								customGradient: newGradient,
+								backgroundColor: undefined,
+								customBackgroundColor: undefined,
+							} );
 						}
-						value={ customGradient }
-					/>
-				</PanelBody>
+					}
+					value={ customGradient }
+				/>
 				<BorderPanel
 					borderRadius={ borderRadius }
 					setAttributes={ setAttributes }