Chore: Fix: Do not show Gradient panel if gradients are not av… (#18091)

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>
+	);
+}

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';

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 }