From 716d0cac42a3180c25388cf5a9c178c5539947d7 Mon Sep 17 00:00:00 2001 From: Jorge Date: Thu, 17 Sep 2020 15:19:39 +0100 Subject: [PATCH] Use color palette and gradients from theme.json --- lib/edit-site-page.php | 7 +- lib/experimental-default-theme.json | 108 ++++++++------ lib/global-styles.php | 44 ++++++ lib/navigation-page.php | 7 +- lib/widgets-page.php | 7 +- packages/block-editor/CHANGELOG.md | 5 + packages/block-editor/README.md | 1 - .../color-palette/with-color-context.js | 63 ++++---- .../components/colors-gradients/control.js | 10 +- .../panel-color-gradient-settings.js | 10 +- .../src/components/colors/use-colors.js | 12 +- .../src/components/colors/with-colors.js | 16 ++- .../src/components/gradient-picker/control.js | 7 +- .../src/components/gradient-picker/index.js | 9 +- .../src/components/gradient-picker/panel.js | 7 +- .../src/components/gradients/use-gradient.js | 13 +- .../components/use-editor-feature/index.js | 4 + packages/block-editor/src/hooks/color.js | 12 +- packages/block-editor/src/store/defaults.js | 134 ------------------ .../block-library/src/button/color-edit.js | 10 +- packages/block-library/src/button/edit.js | 8 +- .../format-library/src/text-color/index.js | 16 +-- 22 files changed, 198 insertions(+), 312 deletions(-) diff --git a/lib/edit-site-page.php b/lib/edit-site-page.php index b6d899dd7c13b..0cd6e5969f35e 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 1b55fd074d461..90e43a89b62b0 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 4d2c2bb9f4ba2..10180161342fb 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 919c776306be4..16be155850b4b 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 4d7ee91f6d000..2b6dc92be66a8 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 3449a3b823053..e079a1a1ff55e 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 5c6e48105bd33..3bb72598aabf4 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 59da301b622eb..b115353e965de 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 dcf52648d2f37..d7ce0381bdaa1 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 1faa4176b15bf..5b87595e7d571 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 66b1c9944e4db..1ae018a53adc7 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 6bd4a66d5c40e..b152047fa94b9 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 1c9aa6344859d..299f10203fcf0 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 6e4f311c20b3f..511c13ad3d871 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 de754d46cb85f..b937e3b405a61 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 8e5efdb3b0704..256d9eb077dcb 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 9f9943e4b5bd5..ebc705e29ba9e 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 a9c10d89ae660..d1962e7011cb2 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 7d5ae73011342..7a411414f438f 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 7524ae9be0cf4..16471e44272ca 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 8066914b5fe1d..c6e5343d3dfaf 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 88c26b943803c..2ddfcc4f15d9d 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,