Migrate existing theme supports to configure the editor to theme.json configs

lib/edit-site-page.php

@@ -128,7 +128,6 @@ function gutenberg_edit_site_init( $hook ) {
 
 	$settings = array(
 		'alignWide'              => get_theme_support( 'align-wide' ),
-		'disableCustomColors'    => get_theme_support( 'disable-custom-colors' ),
 		'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
 		'imageSizes'             => $available_image_sizes,
 		'isRTL'                  => is_rtl(),
@@ -144,6 +143,7 @@ function gutenberg_edit_site_init( $hook ) {
 		$settings['fontSizes'] = $font_sizes;
 	}
 	$settings['styles'] = gutenberg_get_editor_styles();
+	$settings           = gutenberg_experimental_global_styles_settings( $settings );
 
 	// This is so other parts of the code can hook their own settings.
 	// Example: Global Styles.

lib/experimental-default-theme.json

@@ -127,6 +127,9 @@
 		"features": {
 			"typography": {
 				"dropCap": false
+			},
+			"colors": {
+				"custom": true
 			}
 		}
 	}

lib/global-styles.php

@@ -600,7 +600,15 @@ function gutenberg_experimental_global_styles_get_editor_features( $config ) {
 		empty( $config['global']['features'] ) ||
 		! is_array( $config['global']['features'] )
 	) {
-		return array();
+		$config['global']['features'] = array();
+	}
+
+	// Deprecated theme supports.
+	if ( get_theme_support( 'disable-custom-colors' ) ) {
+		if ( ! isset( $config['global']['features']['colors'] ) ) {
+			$config['global']['features']['colors'] = array();
+		}
+		$config['global']['features']['colors']['custom'] = false;
 	}
 
 	return $config['global']['features'];
@@ -633,6 +641,8 @@ 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'] );
 
 	return $settings;
 }

lib/navigation-page.php

@@ -58,7 +58,6 @@ function gutenberg_navigation_init( $hook ) {
 	}
 
 	$settings = array(
-		'disableCustomColors'    => get_theme_support( 'disable-custom-colors' ),
 		'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
 		'imageSizes'             => $available_image_sizes,
 		'isRTL'                  => is_rtl(),
@@ -77,6 +76,8 @@ function gutenberg_navigation_init( $hook ) {
 		$settings['fontSizes'] = $font_sizes;
 	}
 
+	$settings = gutenberg_experimental_global_styles_settings( $settings );
+
 	wp_add_inline_script(
 		'wp-edit-navigation',
 		sprintf(

lib/widgets-page.php

@@ -71,7 +71,6 @@ function gutenberg_widgets_init( $hook ) {
 
 	$settings = array_merge(
 		array(
-			'disableCustomColors'    => get_theme_support( 'disable-custom-colors' ),
 			'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
 			'imageSizes'             => $available_image_sizes,
 			'isRTL'                  => is_rtl(),
@@ -90,6 +89,7 @@ function gutenberg_widgets_init( $hook ) {
 	if ( false !== $font_sizes ) {
 		$settings['fontSizes'] = $font_sizes;
 	}
+	$settings = gutenberg_experimental_global_styles_settings( $settings );
 
 	wp_add_inline_script(
 		'wp-edit-widgets',

packages/block-editor/README.md

@@ -478,7 +478,6 @@ _Properties_
 -   _alignWide_ `boolean`: Enable/Disable Wide/Full Alignments
 -   _availableLegacyWidgets_ `Array`: Array of objects representing the legacy widgets available.
 -   _colors_ `Array`: Palette colors
--   _disableCustomColors_ `boolean`: Whether or not the custom colors are disabled
 -   _fontSizes_ `Array`: Available font sizes
 -   _disableCustomFontSizes_ `boolean`: Whether or not the custom font sizes are disabled
 -   _imageEditing_ `boolean`: Image Editing settings set to false to disable.

packages/block-editor/src/components/color-palette/with-color-context.js

@@ -6,24 +6,48 @@ import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { createHigherOrderComponent } from '@wordpress/compose';
+import { createHigherOrderComponent, compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
 
-export default createHigherOrderComponent(
-	withSelect( ( select, ownProps ) => {
-		const settings = select( 'core/block-editor' ).getSettings();
-		const colors =
-			ownProps.colors === undefined ? settings.colors : ownProps.colors;
+/**
+ * Internal dependencies
+ */
+import useEditorFeature from '../use-editor-feature';
+
+const withDisableCustomColors = createHigherOrderComponent(
+	( WrappedComponent ) => {
+		return ( props ) => {
+			const disableCustomColors = ! useEditorFeature( 'colors.custom' );
 
-		const disableCustomColors =
-			ownProps.disableCustomColors === undefined
-				? settings.disableCustomColors
-				: ownProps.disableCustomColors;
-		return {
-			colors,
-			disableCustomColors,
-			hasColorsToChoose: ! isEmpty( colors ) || ! disableCustomColors,
+			return (
+				<WrappedComponent
+					{ ...props }
+					disableCustomColors={
+						props.disableCustomColors || disableCustomColors
+					}
+				/>
+			);
 		};
-	} ),
+	},
+	'withDisableCustomColors'
+);
+
+export default createHigherOrderComponent(
+	compose(
+		withDisableCustomColors,
+		withSelect( ( select, ownProps ) => {
+			const settings = select( 'core/block-editor' ).getSettings();
+			const colors =
+				ownProps.colors === undefined
+					? settings.colors
+					: ownProps.colors;
+
+			return {
+				colors,
+				hasColorsToChoose:
+					! isEmpty( colors ) || ! ownProps.disableCustomColors,
+			};
+		} )
+	),
 	'withColorContext'
 );

packages/block-editor/src/components/colors-gradients/control.js

@@ -24,6 +24,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { getColorObjectByColorValue } from '../colors';
 import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
+import useEditorFeature from '../use-editor-feature';
 
 // translators: first %s: the color name or value (e.g. red or #ff0000)
 const colorIndicatorAriaLabel = __( '(Color: %s)' );
@@ -177,6 +178,10 @@ function ColorGradientControlSelect( props ) {
 		const settings = select( 'core/block-editor' ).getSettings();
 		return pick( settings, colorsAndGradientKeys );
 	} );
+	colorGradientSettings.disableCustomColors = ! useEditorFeature(
+		'colors.custom'
+	);
+
 	return (
 		<ColorGradientControlInner
 			{ ...{ ...colorGradientSettings, ...props } }

packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js

@@ -17,6 +17,7 @@ import { useSelect } from '@wordpress/data';
 import ColorGradientControl from './control';
 import { getColorObjectByColorValue } from '../colors';
 import { __experimentalGetGradientObjectByGradientValue } from '../gradients';
+import useEditorFeature from '../use-editor-feature';
 
 // translators: first %s: The type of color or gradient (e.g. background, overlay...), second %s: the color name or value (e.g. red or #ff0000)
 const colorIndicatorAriaLabel = __( '(%s: color %s)' );
@@ -151,6 +152,9 @@ const PanelColorGradientSettingsSelect = ( props ) => {
 		const settings = select( 'core/block-editor' ).getSettings();
 		return pick( settings, colorsAndGradientKeys );
 	} );
+	colorGradientSettings.disableCustomColors = ! useEditorFeature(
+		'colors.custom'
+	);
 	return (
 		<PanelColorGradientSettingsInner
 			{ ...{ ...colorGradientSettings, ...props } }

packages/block-editor/src/components/use-editor-feature/index.js

@@ -13,6 +13,13 @@ import { useSelect } from '@wordpress/data';
  */
 import { useBlockEditContext } from '../block-edit';
 
+const deprecatedFlags = {
+	'colors.custom': ( settings ) =>
+		settings.disableCustomColors === undefined
+			? undefined
+			: ! settings.disableCustomColors,
+};
+
 /**
  * Hook that retrieves the setting for the given editor feature.
  * It works with nested objects using by finding the value at path.
@@ -28,22 +35,23 @@ import { useBlockEditContext } from '../block-edit';
  */
 export default function useEditorFeature( featurePath ) {
 	const { name: blockName } = useBlockEditContext();
-	const path = `__experimentalFeatures.${ featurePath }`;
 
 	const setting = useSelect(
 		( select ) => {
-			const { getBlockSupport } = select( 'core/blocks' );
-
-			const blockSupportValue = getBlockSupport( blockName, path );
-			if ( blockSupportValue !== undefined ) {
-				return blockSupportValue;
-			}
-
+			const path = `__experimentalFeatures.${ featurePath }`;
 			const { getSettings } = select( 'core/block-editor' );
+			const settings = getSettings();
+
+			const deprecatedSettingsValue = deprecatedFlags[ featurePath ]
+				? deprecatedFlags[ featurePath ]( settings )
+				: undefined;
 
-			return get( getSettings(), path );
+			if ( deprecatedSettingsValue !== undefined ) {
+				return deprecatedSettingsValue;
+			}
+			return get( settings, path );
 		},
-		[ blockName, path ]
+		[ blockName, featurePath ]
 	);
 
 	return setting;

packages/block-editor/src/store/defaults.js

@@ -14,7 +14,6 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean} alignWide Enable/Disable Wide/Full Alignments
  * @property {Array} availableLegacyWidgets Array of objects representing the legacy widgets available.
  * @property {Array} colors Palette colors
- * @property {boolean} disableCustomColors Whether or not the custom colors are disabled
  * @property {Array} fontSizes Available font sizes
  * @property {boolean} disableCustomFontSizes Whether or not the custom font sizes are disabled
  * @property {boolean} imageEditing Image Editing settings set to false to disable.

packages/format-library/src/text-color/index.js

@@ -9,7 +9,10 @@ import { get, isEmpty } from 'lodash';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useCallback, useMemo, useState } from '@wordpress/element';
-import { RichTextToolbarButton } from '@wordpress/block-editor';
+import {
+	RichTextToolbarButton,
+	__experimentalUseEditorFeature as useEditorFeature,
+} from '@wordpress/block-editor';
 import { Icon, textColor as textColorIcon } from '@wordpress/icons';
 import { removeFormat } from '@wordpress/rich-text';
 
@@ -24,7 +27,8 @@ const title = __( 'Text Color' );
 const EMPTY_ARRAY = [];
 
 function TextColorEdit( { value, onChange, isActive, activeAttributes } ) {
-	const { colors, disableCustomColors } = useSelect( ( select ) => {
+	const allowCustomControl = useEditorFeature( 'colors.custom' );
+	const { colors } = useSelect( ( select ) => {
 		const blockEditorSelect = select( 'core/block-editor' );
 		let settings;
 		if ( blockEditorSelect && blockEditorSelect.getSettings ) {
@@ -34,7 +38,6 @@ function TextColorEdit( { value, onChange, isActive, activeAttributes } ) {
 		}
 		return {
 			colors: get( settings, [ 'colors' ], EMPTY_ARRAY ),
-			disableCustomColors: settings.disableCustomColors,
 		};
 	} );
 	const [ isAddingColor, setIsAddingColor ] = useState( false );
@@ -54,8 +57,7 @@ function TextColorEdit( { value, onChange, isActive, activeAttributes } ) {
 		};
 	}, [ value, colors ] );
 
-	const hasColorsToChoose =
-		! isEmpty( colors ) || disableCustomColors !== true;
+	const hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl;
 	if ( ! hasColorsToChoose && ! isActive ) {
 		return null;
 	}