Support enabling/disabling custom gradients using theme.json (#24964)

WordPress · Sep 3, 2020 · d7cea07 · d7cea07
1 parent 3e57ffd
commit d7cea07
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 24 deletions.
diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
@@ -130,6 +130,9 @@
 			},
 			"color": {
 				"custom": true
+			},
+			"gradient": {
+				"custom": true
 			}
 		}
 	}

diff --git a/lib/experiments-page.php b/lib/experiments-page.php
@@ -129,8 +129,6 @@ function gutenberg_experiments_editor_settings( $settings ) {
 		$experiments_settings['gradients'] = $gradient_presets;
 	}
 
-	$experiments_settings['disableCustomGradients'] = get_theme_support( 'disable-custom-gradients' );
-
 	return array_merge( $settings, $experiments_settings );
 }
 add_filter( 'block_editor_settings', 'gutenberg_experiments_editor_settings' );
diff --git a/lib/global-styles.php b/lib/global-styles.php
@@ -615,6 +615,12 @@ function gutenberg_experimental_global_styles_get_editor_features( $config ) {
 		}
 		$features['global']['color']['custom'] = false;
 	}
+	if ( get_theme_support( 'disable-custom-gradients' ) ) {
+		if ( ! isset( $features['global']['gradient'] ) ) {
+			$features['global']['gradient'] = array();
+		}
+		$features['global']['gradient']['custom'] = false;
+	}
 
 	return $features;
 }
@@ -646,8 +652,10 @@ function gutenberg_experimental_global_styles_settings( $settings ) {
 	$settings['styles'][] = array( 'css' => $stylesheet );
 
 	$settings['__experimentalFeatures'] = gutenberg_experimental_global_styles_get_editor_features( $merged );
+
 	// Unsetting deprecated settings defined by Core.
 	unset( $settings['disableCustomColors'] );
+	unset( $settings['disableCustomGradients'] );
 
 	return $settings;
 }

diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
@@ -181,6 +181,9 @@ function ColorGradientControlSelect( props ) {
 	colorGradientSettings.disableCustomColors = ! useEditorFeature(
 		'color.custom'
 	);
+	colorGradientSettings.disableCustomGradients = ! useEditorFeature(
+		'gradients.custom'
+	);
 
 	return (
 		<ColorGradientControlInner

diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -155,6 +155,9 @@ const PanelColorGradientSettingsSelect = ( props ) => {
 	colorGradientSettings.disableCustomColors = ! useEditorFeature(
 		'color.custom'
 	);
+	colorGradientSettings.disableCustomGradients = ! useEditorFeature(
+		'gradient.custom'
+	);
 	return (
 		<PanelColorGradientSettingsInner
 			{ ...{ ...colorGradientSettings, ...props } }

diff --git a/packages/block-editor/src/components/gradient-picker/control.js b/packages/block-editor/src/components/gradient-picker/control.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isEmpty, pick } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,6 +15,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import GradientPicker from './';
+import useEditorFeature from '../use-editor-feature';
 
 export default function GradientPickerControl( {
 	className,
@@ -23,14 +24,12 @@ export default function GradientPickerControl( {
 	label = __( 'Gradient Presets' ),
 	...props
 } ) {
-	const { gradients = [], disableCustomGradients } = useSelect(
-		( select ) =>
-			pick( select( 'core/block-editor' ).getSettings(), [
-				'gradients',
-				'disableCustomGradients',
-			] ),
-		[]
-	);
+	const gradients =
+		useSelect(
+			( select ) => select( 'core/block-editor' ).getSettings().gradients,
+			[]
+		) ?? [];
+	const disableCustomGradients = ! useEditorFeature( 'gradient.custom' );
 	if ( isEmpty( gradients ) && disableCustomGradients ) {
 		return null;
 	}

diff --git a/packages/block-editor/src/components/gradient-picker/index.js b/packages/block-editor/src/components/gradient-picker/index.js
@@ -1,23 +1,22 @@
-/**
- * External dependencies
- */
-import { pick } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { __experimentalGradientPicker as GradientPicker } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import useEditorFeature from '../use-editor-feature';
+
 function GradientPickerWithGradients( props ) {
-	const { gradients, disableCustomGradients } = useSelect(
-		( select ) =>
-			pick( select( 'core/block-editor' ).getSettings(), [
-				'gradients',
-				'disableCustomGradients',
-			] ),
-		[]
-	);
+	const gradients =
+		useSelect(
+			( select ) => select( 'core/block-editor' ).getSettings().gradients,
+			[]
+		) ?? [];
+	const disableCustomGradients = ! useEditorFeature( 'gradient.custom' );
+
 	return (
 		<GradientPicker
 			gradients={

diff --git a/packages/block-editor/src/components/use-editor-feature/index.js b/packages/block-editor/src/components/use-editor-feature/index.js
@@ -18,6 +18,10 @@ const deprecatedFlags = {
 		settings.disableCustomColors === undefined
 			? undefined
 			: ! settings.disableCustomColors,
+	'gradient.custom': ( settings ) =>
+		settings.disableCustomGradients === undefined
+			? undefined
+			: ! settings.disableCustomGradients,
 };
 
 /**