diff --git a/lib/edit-site-page.php b/lib/edit-site-page.php index 441433fc2b952a..9062d3b858dc3b 100644 --- a/lib/edit-site-page.php +++ b/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. diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json index 1d1cfdabce390f..2cf63a73b00106 100644 --- a/lib/experimental-default-theme.json +++ b/lib/experimental-default-theme.json @@ -127,6 +127,9 @@ "features": { "typography": { "dropCap": false + }, + "colors": { + "custom": true } } } diff --git a/lib/global-styles.php b/lib/global-styles.php index b8ca0e433052e9..a90815eb36453b 100644 --- a/lib/global-styles.php +++ b/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; } diff --git a/lib/navigation-page.php b/lib/navigation-page.php index e2e37f16f2859a..d592bf9b83153f 100644 --- a/lib/navigation-page.php +++ b/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( diff --git a/lib/widgets-page.php b/lib/widgets-page.php index 3b6c8e96bb6a77..54a2275994505e 100644 --- a/lib/widgets-page.php +++ b/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', diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 17934b030b5ddc..029e4ba72ad059 100644 --- a/packages/block-editor/README.md +++ b/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. diff --git a/packages/block-editor/src/components/color-palette/with-color-context.js b/packages/block-editor/src/components/color-palette/with-color-context.js index 1198a304d67359..b03e3eec9f18c5 100644 --- a/packages/block-editor/src/components/color-palette/with-color-context.js +++ b/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 ( + + ); }; - } ), + }, + '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' ); diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index 98b03edb39b148..9d1302870ba65c 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/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 ( { const settings = select( 'core/block-editor' ).getSettings(); return pick( settings, colorsAndGradientKeys ); } ); + colorGradientSettings.disableCustomColors = ! useEditorFeature( + 'colors.custom' + ); return ( + 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; diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 3c620849827913..0ea72197adf76b 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/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. diff --git a/packages/format-library/src/text-color/index.js b/packages/format-library/src/text-color/index.js index 52036b379e4018..82e2d36b8eaac7 100644 --- a/packages/format-library/src/text-color/index.js +++ b/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; }