diff --git a/lib/edit-site-page.php b/lib/edit-site-page.php index b6d899dd7c13bf..0cd6e5969f35e5 100644 --- a/lib/edit-site-page.php +++ b/lib/edit-site-page.php @@ -133,11 +133,8 @@ function gutenberg_edit_site_init( $hook ) { 'siteUrl' => site_url(), ); - list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' ); - list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' ); - if ( false !== $color_palette ) { - $settings['colors'] = $color_palette; - } + list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' ); + if ( false !== $font_sizes ) { $settings['fontSizes'] = $font_sizes; } diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json index 1b55fd074d4619..90e43a89b62b02 100644 --- a/lib/experimental-default-theme.json +++ b/lib/experimental-default-theme.json @@ -4,102 +4,126 @@ "color": { "palette": [ { + "name": "Black", "slug": "black", "color": "#000000" }, { + "name": "Cyan bluish gray", "slug": "cyan-bluish-gray", "color": "#abb8c3" }, { - "slug": "light-green-cyan", - "color": "#7bdcb5" + "name": "White", + "slug": "white", + "color": "#ffffff" }, { - "slug": "luminous-vivid-amber", - "color": "#fcb900" + "name": "Pale pink", + "slug": "pale-pink", + "color": "#f78da7" }, { - "slug": "luminous-vivid-orange", - "color": "#ff6900" + "name": "Vivid red", + "slug": "vivid-red", + "color": "#cf2e2e" }, { - "slug": "pale-cyan-blue", - "color": "#8ed1fc" + "name": "Luminous vivid orange", + "slug": "luminous-vivid-orange", + "color": "#ff6900" }, { - "slug": "pale-pink", - "color": "#f78da7" + "name": "Luminous vivid amber", + "slug": "luminous-vivid-amber", + "color": "#fcb900" }, { - "slug": "vivid-cyan-blue", - "color": "#0693e3" + "name": "Light green cyan", + "slug": "light-green-cyan", + "color": "#7bdcb5" }, { + "name": "Vivid green cyan", "slug": "vivid-green-cyan", "color": "#00d084" }, { - "slug": "vivid-purple", - "color": "#9b51e0" + "name": "Pale cyan blue", + "slug": "pale-cyan-blue", + "color": "#8ed1fc" }, { - "slug": "vivid-red", - "color": "#cf2e2e" + "name": "Vivid cyan blue", + "slug": "vivid-cyan-blue", + "color": "#0693e3" }, { - "slug": "white", - "color": "#ffffff" + "name": "Vivid purple", + "slug": "vivid-purple", + "color": "#9b51e0" } ], "gradients": [ { - "slug": "blush-bordeaux", - "gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)" + "name": "Vivid cyan blue to vivid purple", + "gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)", + "slug": "vivid-cyan-blue-to-vivid-purple" }, { - "slug": "blush-light-purple", - "gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)" + "name": "Light green cyan to vivid green cyan", + "gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)", + "slug": "light-green-cyan-to-vivid-green-cyan" }, { - "slug": "cool-to-warm-spectrum", - "gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)" + "name": "Luminous vivid amber to luminous vivid orange", + "gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)", + "slug": "luminous-vivid-amber-to-luminous-vivid-orange" }, { - "slug": "electric-grass", - "gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)" + "name": "Luminous vivid orange to vivid red", + "gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)", + "slug": "luminous-vivid-orange-to-vivid-red" }, { - "slug": "light-green-cyan-to-vivid-green-cyan", - "gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)" + "name": "Very light gray to cyan bluish gray", + "gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)", + "slug": "very-light-gray-to-cyan-bluish-gray" }, { - "slug": "luminous-dusk", - "gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)" + "name": "Cool to warm spectrum", + "gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)", + "slug": "cool-to-warm-spectrum" }, { - "slug": "luminous-vivid-amber-to-luminous-vivid-orange", - "gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)" + "name": "Blush light purple", + "gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)", + "slug": "blush-light-purple" }, { - "slug": "luminous-vivid-orange-to-vivid-red", - "gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)" + "name": "Blush bordeaux", + "gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)", + "slug": "blush-bordeaux" }, { - "slug": "midnight", - "gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)" + "name": "Luminous dusk", + "gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)", + "slug": "luminous-dusk" }, { - "slug": "pale-ocean", - "gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)" + "name": "Pale ocean", + "gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)", + "slug": "pale-ocean" }, { - "slug": "very-light-gray-to-cyan-bluish-gray", - "gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)" + "name": "Electric grass", + "gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)", + "slug": "electric-grass" }, { - "slug": "vivid-cyan-blue-to-vivid-purple", - "gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)" + "name": "Midnight", + "gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)", + "slug": "midnight" } ], "custom": true, diff --git a/lib/global-styles.php b/lib/global-styles.php index 4d2c2bb9f4ba23..10180161342fb1 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -187,7 +187,49 @@ function gutenberg_experimental_global_styles_get_core() { $config = gutenberg_experimental_global_styles_get_from_file( __DIR__ . '/experimental-default-theme.json' ); + // Start i18n logic to remove when JSON i18 strings are extracted. + $default_colors_i18n = array( + 'black' => __( 'Black', 'gutenberg' ), + 'cyan-bluish-gray' => __( 'Cyan bluish gray', 'gutenberg' ), + 'white' => __( 'White', 'gutenberg' ), + 'pale-pink' => __( 'Pale pink', 'gutenberg' ), + 'vivid-red' => __( 'Vivid red', 'gutenberg' ), + 'luminous-vivid-orange' => __( 'Luminous vivid orange', 'gutenberg' ), + 'luminous-vivid-amber' => __( 'Luminous vivid amber', 'gutenberg' ), + 'light-green-cyan' => __( 'Light green cyan', 'gutenberg' ), + 'vivid-green-cyan' => __( 'Vivid green cyan', 'gutenberg' ), + 'pale-cyan-blue' => __( 'Pale cyan blue', 'gutenberg' ), + 'vivid-cyan-blue' => __( 'Vivid cyan blue', 'gutenberg' ), + 'vivid-purple' => __( 'Vivid purple', 'gutenberg' ), + ); + + if ( ! empty( $config['global']['settings']['color']['palette'] ) ) { + foreach ( $config['global']['settings']['color']['palette'] as &$color ) { + $color['name'] = $default_colors_i18n[ $color['slug'] ]; + } + } + $default_gradients_i18n = array( + 'vivid-cyan-blue-to-vivid-purple' => __( 'Vivid cyan blue to vivid purple', 'gutenberg' ), + 'light-green-cyan-to-vivid-green-cyan' => __( 'Light green cyan to vivid green cyan', 'gutenberg' ), + 'luminous-vivid-amber-to-luminous-vivid-orange' => __( 'Luminous vivid amber to luminous vivid orange', 'gutenberg' ), + 'luminous-vivid-orange-to-vivid-red' => __( 'Luminous vivid orange to vivid red', 'gutenberg' ), + 'very-light-gray-to-cyan-bluish-gray' => __( 'Very light gray to cyan bluish gray', 'gutenberg' ), + 'cool-to-warm-spectrum' => __( 'Cool to warm spectrum', 'gutenberg' ), + 'blush-light-purple' => __( 'Blush light purple', 'gutenberg' ), + 'blush-bordeaux' => __( 'Blush bordeaux', 'gutenberg' ), + 'luminous-dusk' => __( 'Luminous dusk', 'gutenberg' ), + 'pale-ocean' => __( 'Pale ocean', 'gutenberg' ), + 'electric-grass' => __( 'Electric grass', 'gutenberg' ), + 'midnight' => __( 'Midnight', 'gutenberg' ), + ); + + if ( ! empty( $config['global']['settings']['color']['gradients'] ) ) { + foreach ( $config['global']['settings']['color']['gradients'] as &$gradient ) { + $gradient['name'] = $default_gradients_i18n[ $gradient['slug'] ]; + } + } + // End i18n logic to remove when JSON i18 strings are extracted. return $config; } @@ -762,6 +804,8 @@ function gutenberg_experimental_global_styles_settings( $settings ) { // We also need to unset the deprecated settings defined by core. $settings['__experimentalFeatures'] = gutenberg_experimental_global_styles_get_editor_settings( $merged ); + unset( $settings['colors'] ); + unset( $settings['gradients'] ); unset( $settings['disableCustomColors'] ); unset( $settings['disableCustomGradients'] ); unset( $settings['disableCustomFontSizes'] ); diff --git a/lib/navigation-page.php b/lib/navigation-page.php index 919c776306be44..16be155850b4b5 100644 --- a/lib/navigation-page.php +++ b/lib/navigation-page.php @@ -64,12 +64,7 @@ function gutenberg_navigation_init( $hook ) { 'blockNavMenus' => get_theme_support( 'block-nav-menus' ), ); - list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' ); - list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' ); - - if ( false !== $color_palette ) { - $settings['colors'] = $color_palette; - } + list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' ); if ( false !== $font_sizes ) { $settings['fontSizes'] = $font_sizes; diff --git a/lib/widgets-page.php b/lib/widgets-page.php index 4d7ee91f6d0002..2b6dc92be66a8f 100644 --- a/lib/widgets-page.php +++ b/lib/widgets-page.php @@ -87,12 +87,7 @@ function gutenberg_widgets_init( $hook ) { gutenberg_get_legacy_widget_settings() ); - list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' ); - list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' ); - - if ( false !== $color_palette ) { - $settings['colors'] = $color_palette; - } + list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' ); if ( false !== $font_sizes ) { $settings['fontSizes'] = $font_sizes; diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index 3449a3b8230531..e079a1a1ff55eb 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Breaking Changes + +- The block editor does not contain default colors and gradients anymore. If one wants to take advantage of these features, please explicitly pass colors and gradients settings or use the new __experimentalFeatures setting that is available. + + ## 4.0.0 (2020-05-28) ### Breaking Changes diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 5c6e48105bd337..3bb72598aabf41 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -477,7 +477,6 @@ _Properties_ - _alignWide_ `boolean`: Enable/Disable Wide/Full Alignments - _availableLegacyWidgets_ `Array`: Array of objects representing the legacy widgets available. -- _colors_ `Array`: Palette colors - _fontSizes_ `Array`: Available font sizes - _imageEditing_ `boolean`: Image Editing settings set to false to disable. - _imageSizes_ `Array`: Available image sizes 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 59da301b622eb5..b115353e965de0 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,48 +6,33 @@ import { isEmpty } from 'lodash'; /** * WordPress dependencies */ -import { createHigherOrderComponent, compose } from '@wordpress/compose'; -import { withSelect } from '@wordpress/data'; +import { createHigherOrderComponent } from '@wordpress/compose'; /** * Internal dependencies */ import useEditorFeature from '../use-editor-feature'; -const withDisableCustomColors = createHigherOrderComponent( - ( WrappedComponent ) => { - return ( props ) => { - const disableCustomColors = ! useEditorFeature( 'color.custom' ); - - 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' -); +export default createHigherOrderComponent( ( WrappedComponent ) => { + return ( props ) => { + const colorsFeature = useEditorFeature( 'color.palette' ); + const disableCustomColorsFeature = ! useEditorFeature( 'color.custom' ); + const colors = + props.colors === undefined ? colorsFeature : props.colors; + const disableCustomColors = + props.disableCustomColors === undefined + ? disableCustomColorsFeature + : props.disableCustomColors; + const hasColorsToChoose = ! isEmpty( colors ) || ! disableCustomColors; + return ( + + ); + }; +}, 'withColorContext' ); diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js index dcf52648d2f375..d7ce0381bdaa1d 100644 --- a/packages/block-editor/src/components/colors-gradients/control.js +++ b/packages/block-editor/src/components/colors-gradients/control.js @@ -2,7 +2,7 @@ * External dependencies */ import classnames from 'classnames'; -import { every, isEmpty, pick } from 'lodash'; +import { every, isEmpty } from 'lodash'; /** * WordPress dependencies @@ -17,7 +17,6 @@ import { __experimentalGradientPicker as GradientPicker, } from '@wordpress/components'; import { sprintf, __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -174,10 +173,9 @@ function ColorGradientControlInner( { } function ColorGradientControlSelect( props ) { - const colorGradientSettings = useSelect( ( select ) => { - const settings = select( 'core/block-editor' ).getSettings(); - return pick( settings, colorsAndGradientKeys ); - } ); + const colorGradientSettings = {}; + colorGradientSettings.colors = useEditorFeature( 'color.palette' ); + colorGradientSettings.gradients = useEditorFeature( 'color.gradients' ); colorGradientSettings.disableCustomColors = ! useEditorFeature( 'color.custom' ); 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 index 1faa4176b15bfb..5b87595e7d5719 100644 --- 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 @@ -2,14 +2,13 @@ * External dependencies */ import classnames from 'classnames'; -import { every, isEmpty, pick } from 'lodash'; +import { every, isEmpty } from 'lodash'; /** * WordPress dependencies */ import { PanelBody, ColorIndicator } from '@wordpress/components'; import { sprintf, __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -148,10 +147,9 @@ export const PanelColorGradientSettingsInner = ( { }; const PanelColorGradientSettingsSelect = ( props ) => { - const colorGradientSettings = useSelect( ( select ) => { - const settings = select( 'core/block-editor' ).getSettings(); - return pick( settings, colorsAndGradientKeys ); - } ); + const colorGradientSettings = {}; + colorGradientSettings.colors = useEditorFeature( 'color.palette' ); + colorGradientSettings.gradients = useEditorFeature( 'color.gradients' ); colorGradientSettings.disableCustomColors = ! useEditorFeature( 'color.custom' ); diff --git a/packages/block-editor/src/components/colors/use-colors.js b/packages/block-editor/src/components/colors/use-colors.js index 66b1c9944e4db0..1ae018a53adc78 100644 --- a/packages/block-editor/src/components/colors/use-colors.js +++ b/packages/block-editor/src/components/colors/use-colors.js @@ -25,6 +25,7 @@ import { import InspectorControls from '../inspector-controls'; import { useBlockEditContext } from '../block-edit'; import ColorPanel from './color-panel'; +import useEditorFeature from '../use-editor-feature'; /** * Browser dependencies @@ -62,16 +63,13 @@ export default function __experimentalUseColors( deps = [] ) { const { clientId } = useBlockEditContext(); - const { attributes, settingsColors } = useSelect( + const settingsColors = + useEditorFeature( 'color.palette' ) || DEFAULT_COLORS; + const { attributes } = useSelect( ( select ) => { - const { getBlockAttributes, getSettings } = select( - 'core/block-editor' - ); - const colors = getSettings().colors; + const { getBlockAttributes } = select( 'core/block-editor' ); return { attributes: getBlockAttributes( clientId ), - settingsColors: - ! colors || colors === true ? DEFAULT_COLORS : colors, }; }, [ clientId ] diff --git a/packages/block-editor/src/components/colors/with-colors.js b/packages/block-editor/src/components/colors/with-colors.js index 6bd4a66d5c40eb..b152047fa94b96 100644 --- a/packages/block-editor/src/components/colors/with-colors.js +++ b/packages/block-editor/src/components/colors/with-colors.js @@ -7,7 +7,6 @@ import { get, isString, kebabCase, reduce, upperFirst } from 'lodash'; * WordPress dependencies */ import { Component } from '@wordpress/element'; -import { withSelect } from '@wordpress/data'; import { compose, createHigherOrderComponent } from '@wordpress/compose'; /** @@ -19,6 +18,7 @@ import { getColorObjectByAttributeValues, getMostReadableColor, } from './utils'; +import useEditorFeature from '../use-editor-feature'; const DEFAULT_COLORS = []; @@ -45,12 +45,14 @@ const withCustomColorPalette = ( colorsArray ) => * @return {Function} The higher order component. */ const withEditorColorPalette = () => - withSelect( ( select ) => { - const settings = select( 'core/block-editor' ).getSettings(); - return { - colors: get( settings, [ 'colors' ], DEFAULT_COLORS ), - }; - } ); + createHigherOrderComponent( + ( WrappedComponent ) => ( props ) => { + const colors = + useEditorFeature( 'color.palette' ) || DEFAULT_COLORS; + return ; + }, + 'withEditorColorPalette' + ); /** * Helper function used with `createHigherOrderComponent` to create diff --git a/packages/block-editor/src/components/gradient-picker/control.js b/packages/block-editor/src/components/gradient-picker/control.js index 1c9aa6344859d3..299f10203fcf0a 100644 --- a/packages/block-editor/src/components/gradient-picker/control.js +++ b/packages/block-editor/src/components/gradient-picker/control.js @@ -9,7 +9,6 @@ import { isEmpty } from 'lodash'; */ import { BaseControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -24,11 +23,7 @@ export default function GradientPickerControl( { label = __( 'Gradient Presets' ), ...props } ) { - const gradients = - useSelect( - ( select ) => select( 'core/block-editor' ).getSettings().gradients, - [] - ) ?? []; + const gradients = useEditorFeature( 'color.gradients' ); const disableCustomGradients = ! useEditorFeature( 'color.customGradient' ); 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 index 6e4f311c20b3fa..511c13ad3d8717 100644 --- a/packages/block-editor/src/components/gradient-picker/index.js +++ b/packages/block-editor/src/components/gradient-picker/index.js @@ -2,19 +2,16 @@ * WordPress dependencies */ import { __experimentalGradientPicker as GradientPicker } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ import useEditorFeature from '../use-editor-feature'; +const EMPTY_ARRAY = []; + function GradientPickerWithGradients( props ) { - const gradients = - useSelect( - ( select ) => select( 'core/block-editor' ).getSettings().gradients, - [] - ) ?? []; + const gradients = useEditorFeature( 'color.gradients' ) || EMPTY_ARRAY; const disableCustomGradients = ! useEditorFeature( 'color.customGradient' ); return ( diff --git a/packages/block-editor/src/components/gradient-picker/panel.js b/packages/block-editor/src/components/gradient-picker/panel.js index de754d46cb85fb..b937e3b405a618 100644 --- a/packages/block-editor/src/components/gradient-picker/panel.js +++ b/packages/block-editor/src/components/gradient-picker/panel.js @@ -6,7 +6,6 @@ import { isEmpty } from 'lodash'; /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; import { PanelBody } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -14,12 +13,10 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import GradientPicker from './control'; +import useEditorFeature from '../use-editor-feature'; export default function GradientPanel( props ) { - const gradients = useSelect( - ( select ) => select( 'core/block-editor' ).getSettings().gradients, - [] - ); + const gradients = useEditorFeature( 'color.gradients' ); if ( isEmpty( gradients ) ) { return null; } diff --git a/packages/block-editor/src/components/gradients/use-gradient.js b/packages/block-editor/src/components/gradients/use-gradient.js index 8e5efdb3b0704e..256d9eb077dcb9 100644 --- a/packages/block-editor/src/components/gradients/use-gradient.js +++ b/packages/block-editor/src/components/gradients/use-gradient.js @@ -13,6 +13,9 @@ import { useSelect, useDispatch } from '@wordpress/data'; * Internal dependencies */ import { useBlockEditContext } from '../block-edit'; +import useEditorFeature from '../use-editor-feature'; + +const EMPTY_ARRAY = []; export function __experimentalGetGradientClass( gradientSlug ) { if ( ! gradientSlug ) { @@ -63,16 +66,14 @@ export function __experimentalUseGradient( { } = {} ) { const { clientId } = useBlockEditContext(); - const { gradients, gradient, customGradient } = useSelect( + const gradients = useEditorFeature( 'color.gradients' ) || EMPTY_ARRAY; + const { gradient, customGradient } = useSelect( ( select ) => { - const { getBlockAttributes, getSettings } = select( - 'core/block-editor' - ); + const { getBlockAttributes } = select( 'core/block-editor' ); const attributes = getBlockAttributes( clientId ); return { - gradient: attributes[ gradientAttribute ], customGradient: attributes[ customGradientAttribute ], - gradients: getSettings().gradients, + gradient: attributes[ gradientAttribute ], }; }, [ clientId, gradientAttribute, customGradientAttribute ] diff --git a/packages/block-editor/src/components/use-editor-feature/index.js b/packages/block-editor/src/components/use-editor-feature/index.js index 9f9943e4b5bd51..ebc705e29ba9ec 100644 --- a/packages/block-editor/src/components/use-editor-feature/index.js +++ b/packages/block-editor/src/components/use-editor-feature/index.js @@ -14,6 +14,10 @@ import { useSelect } from '@wordpress/data'; import { useBlockEditContext } from '../block-edit'; const deprecatedFlags = { + 'color.palette': ( settings ) => + settings.colors === undefined ? undefined : settings.colors, + 'color.gradients': ( settings ) => + settings.gradients === undefined ? undefined : settings.gradients, 'color.custom': ( settings ) => settings.disableCustomColors === undefined ? undefined diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js index a9c10d89ae6600..d1962e7011cb2f 100644 --- a/packages/block-editor/src/hooks/color.js +++ b/packages/block-editor/src/hooks/color.js @@ -10,7 +10,6 @@ import { isObject } from 'lodash'; import { addFilter } from '@wordpress/hooks'; import { getBlockSupport } from '@wordpress/blocks'; import { __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; import { useRef, useEffect, Platform } from '@wordpress/element'; import { createHigherOrderComponent } from '@wordpress/compose'; @@ -32,6 +31,7 @@ import ColorPanel from './color-panel'; import useEditorFeature from '../components/use-editor-feature'; export const COLOR_SUPPORT_KEY = '__experimentalColor'; +const EMPTY_ARRAY = []; const hasColorSupport = ( blockType ) => { if ( Platform.OS !== 'web' ) { @@ -214,9 +214,8 @@ const getLinkColorFromAttributeValue = ( colors, value ) => { export function ColorEdit( props ) { const { name: blockName, attributes } = props; const isLinkColorEnabled = useEditorFeature( 'color.link' ); - const { colors, gradients } = useSelect( ( select ) => { - return select( 'core/block-editor' ).getSettings(); - }, [] ); + const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; + const gradients = useEditorFeature( 'color.gradients' ) || EMPTY_ARRAY; // Shouldn't be needed but right now the ColorGradientsPanel // can trigger both onChangeColor and onChangeBackground @@ -386,10 +385,7 @@ export const withColorPaletteStyles = createHigherOrderComponent( ( BlockListBlock ) => ( props ) => { const { name, attributes } = props; const { backgroundColor, textColor } = attributes; - const colors = useSelect( ( select ) => { - return select( 'core/block-editor' ).getSettings().colors; - }, [] ); - + const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; if ( ! hasColorSupport( name ) ) { return ; } diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 7d5ae73011342f..7a411414f438f8 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -13,7 +13,6 @@ export const PREFERENCES_DEFAULTS = { * @typedef {Object} SETTINGS_DEFAULT * @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 {Array} fontSizes Available font sizes * @property {boolean} imageEditing Image Editing settings set to false to disable. * @property {Array} imageSizes Available image sizes @@ -37,64 +36,6 @@ export const PREFERENCES_DEFAULTS = { */ export const SETTINGS_DEFAULTS = { alignWide: false, - colors: [ - { - name: __( 'Black' ), - slug: 'black', - color: '#000000', - }, - { - name: __( 'Cyan bluish gray' ), - slug: 'cyan-bluish-gray', - color: '#abb8c3', - }, - { - name: __( 'White' ), - slug: 'white', - color: '#ffffff', - }, - { - name: __( 'Pale pink' ), - slug: 'pale-pink', - color: '#f78da7', - }, - { name: __( 'Vivid red' ), slug: 'vivid-red', color: '#cf2e2e' }, - { - name: __( 'Luminous vivid orange' ), - slug: 'luminous-vivid-orange', - color: '#ff6900', - }, - { - name: __( 'Luminous vivid amber' ), - slug: 'luminous-vivid-amber', - color: '#fcb900', - }, - { - name: __( 'Light green cyan' ), - slug: 'light-green-cyan', - color: '#7bdcb5', - }, - { - name: __( 'Vivid green cyan' ), - slug: 'vivid-green-cyan', - color: '#00d084', - }, - { - name: __( 'Pale cyan blue' ), - slug: 'pale-cyan-blue', - color: '#8ed1fc', - }, - { - name: __( 'Vivid cyan blue' ), - slug: 'vivid-cyan-blue', - color: '#0693e3', - }, - { - name: __( 'Vivid purple' ), - slug: 'vivid-purple', - color: '#9b51e0', - }, - ], fontSizes: [ { @@ -156,79 +97,4 @@ export const SETTINGS_DEFAULTS = { __mobileEnablePageTemplates: false, __experimentalBlockPatterns: [], __experimentalBlockPatternCategories: [], - - gradients: [ - { - name: __( 'Vivid cyan blue to vivid purple' ), - gradient: - 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)', - slug: 'vivid-cyan-blue-to-vivid-purple', - }, - { - name: __( 'Light green cyan to vivid green cyan' ), - gradient: - 'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)', - slug: 'light-green-cyan-to-vivid-green-cyan', - }, - { - name: __( 'Luminous vivid amber to luminous vivid orange' ), - gradient: - 'linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)', - slug: 'luminous-vivid-amber-to-luminous-vivid-orange', - }, - { - name: __( 'Luminous vivid orange to vivid red' ), - gradient: - 'linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)', - slug: 'luminous-vivid-orange-to-vivid-red', - }, - { - name: __( 'Very light gray to cyan bluish gray' ), - gradient: - 'linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)', - slug: 'very-light-gray-to-cyan-bluish-gray', - }, - { - name: __( 'Cool to warm spectrum' ), - gradient: - 'linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)', - slug: 'cool-to-warm-spectrum', - }, - { - name: __( 'Blush light purple' ), - gradient: - 'linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)', - slug: 'blush-light-purple', - }, - { - name: __( 'Blush bordeaux' ), - gradient: - 'linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)', - slug: 'blush-bordeaux', - }, - { - name: __( 'Luminous dusk' ), - gradient: - 'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)', - slug: 'luminous-dusk', - }, - { - name: __( 'Pale ocean' ), - gradient: - 'linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)', - slug: 'pale-ocean', - }, - { - name: __( 'Electric grass' ), - gradient: - 'linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)', - slug: 'electric-grass', - }, - { - name: __( 'Midnight' ), - gradient: - 'linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)', - slug: 'midnight', - }, - ], }; diff --git a/packages/block-library/src/button/color-edit.js b/packages/block-library/src/button/color-edit.js index 7524ae9be0cf40..16471e44272cab 100644 --- a/packages/block-library/src/button/color-edit.js +++ b/packages/block-library/src/button/color-edit.js @@ -8,7 +8,6 @@ import { pickBy, isEqual, isObject, identity, mapValues } from 'lodash'; */ import { __ } from '@wordpress/i18n'; import { useState, useEffect, useRef, Platform } from '@wordpress/element'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -21,8 +20,11 @@ import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings, ContrastChecker, InspectorControls, + __experimentalUseEditorFeature as useEditorFeature, } from '@wordpress/block-editor'; +const EMPTY_ARRAY = []; + const isWebPlatform = Platform.OS === 'web'; // The code in this file is copied entirely from the "color" and "style" support flags @@ -116,9 +118,9 @@ function ColorPanel( { settings, clientId, enableContrastChecking = true } ) { */ function ColorEdit( props ) { const { attributes } = props; - const { colors, gradients } = useSelect( ( select ) => { - return select( 'core/block-editor' ).getSettings(); - }, [] ); + const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; + const gradients = useEditorFeature( 'color.gradients' ) || EMPTY_ARRAY; + // Shouldn't be needed but right now the ColorGradientsPanel // can trigger both onChangeColor and onChangeBackground // synchronously causing our two callbacks to override changes diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 8066914b5fe1d4..c6e5343d3dfaf8 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -24,11 +24,11 @@ import { RichText, __experimentalBlock as Block, __experimentalLinkControl as LinkControl, + __experimentalUseEditorFeature as useEditorFeature, } from '@wordpress/block-editor'; import { rawShortcut, displayShortcut } from '@wordpress/keycodes'; import { link, linkOff } from '@wordpress/icons'; import { createBlock } from '@wordpress/blocks'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -41,6 +41,8 @@ const MIN_BORDER_RADIUS_VALUE = 0; const MAX_BORDER_RADIUS_VALUE = 50; const INITIAL_BORDER_RADIUS_POSITION = 5; +const EMPTY_ARRAY = []; + function BorderPanel( { borderRadius = '', setAttributes } ) { const initialBorderRadius = borderRadius; const setBorderRadius = useCallback( @@ -173,9 +175,7 @@ function ButtonEdit( props ) { }, [ setAttributes ] ); - const { colors } = useSelect( ( select ) => { - return select( 'core/block-editor' ).getSettings(); - }, [] ); + const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; const onToggleOpenInNewTab = useCallback( ( value ) => { diff --git a/packages/format-library/src/text-color/index.js b/packages/format-library/src/text-color/index.js index 88c26b943803c7..2ddfcc4f15d9d6 100644 --- a/packages/format-library/src/text-color/index.js +++ b/packages/format-library/src/text-color/index.js @@ -1,13 +1,12 @@ /** * External dependencies */ -import { get, isEmpty } from 'lodash'; +import { isEmpty } from 'lodash'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; import { useCallback, useMemo, useState } from '@wordpress/element'; import { RichTextToolbarButton, @@ -28,18 +27,7 @@ const EMPTY_ARRAY = []; function TextColorEdit( { value, onChange, isActive, activeAttributes } ) { const allowCustomControl = useEditorFeature( 'color.custom' ); - const { colors } = useSelect( ( select ) => { - const blockEditorSelect = select( 'core/block-editor' ); - let settings; - if ( blockEditorSelect && blockEditorSelect.getSettings ) { - settings = blockEditorSelect.getSettings(); - } else { - settings = {}; - } - return { - colors: get( settings, [ 'colors' ], EMPTY_ARRAY ), - }; - } ); + const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY; const [ isAddingColor, setIsAddingColor ] = useState( false ); const enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [ setIsAddingColor,