From 92ef7bdafce960e46c2f42eb6f068bba55bcba27 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 17 Nov 2021 14:50:09 +1000 Subject: [PATCH 1/3] Extract color and gradient settings retrieval to custom hook --- .../panel-color-gradient-settings.js | 88 +------------------ ...se-multiple-origin-colors-and-gradients.js | 79 +++++++++++++++++ 2 files changed, 82 insertions(+), 85 deletions(-) create mode 100644 packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js 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 158071197c95c..7d1f9e00eb5ad 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 @@ -8,8 +8,7 @@ import { every, isEmpty } from 'lodash'; * WordPress dependencies */ import { PanelBody, ColorIndicator } from '@wordpress/components'; -import { sprintf, __, _x } from '@wordpress/i18n'; -import { useMemo } from '@wordpress/element'; +import { sprintf, __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -18,6 +17,7 @@ import ColorGradientControl from './control'; import { getColorObjectByColorValue } from '../colors'; import { __experimentalGetGradientObjectByGradientValue } from '../gradients'; import useSetting from '../use-setting'; +import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients'; // 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)' ); @@ -171,89 +171,7 @@ const PanelColorGradientSettingsSingleSelect = ( props ) => { }; const PanelColorGradientSettingsMultipleSelect = ( props ) => { - const colorGradientSettings = useCommonSingleMultipleSelects(); - const customColors = useSetting( 'color.palette.custom' ); - const themeColors = useSetting( 'color.palette.theme' ); - const defaultColors = useSetting( 'color.palette.default' ); - const shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' ); - - colorGradientSettings.colors = useMemo( () => { - const result = []; - if ( themeColors && themeColors.length ) { - result.push( { - name: _x( - 'Theme', - 'Indicates this palette comes from the theme.' - ), - colors: themeColors, - } ); - } - if ( - shouldDisplayDefaultColors && - defaultColors && - defaultColors.length - ) { - result.push( { - name: _x( - 'Default', - 'Indicates this palette comes from WordPress.' - ), - colors: defaultColors, - } ); - } - if ( customColors && customColors.length ) { - result.push( { - name: _x( - 'Custom', - 'Indicates this palette comes from the theme.' - ), - colors: customColors, - } ); - } - return result; - }, [ defaultColors, themeColors, customColors ] ); - - const customGradients = useSetting( 'color.gradients.custom' ); - const themeGradients = useSetting( 'color.gradients.theme' ); - const defaultGradients = useSetting( 'color.gradients.default' ); - const shouldDisplayDefaultGradients = useSetting( - 'color.defaultGradients' - ); - colorGradientSettings.gradients = useMemo( () => { - const result = []; - if ( themeGradients && themeGradients.length ) { - result.push( { - name: _x( - 'Theme', - 'Indicates this palette comes from the theme.' - ), - gradients: themeGradients, - } ); - } - if ( - shouldDisplayDefaultGradients && - defaultGradients && - defaultGradients.length - ) { - result.push( { - name: _x( - 'Default', - 'Indicates this palette comes from WordPress.' - ), - gradients: defaultGradients, - } ); - } - if ( customGradients && customGradients.length ) { - result.push( { - name: _x( - 'Custom', - 'Indicates this palette is created by the user.' - ), - gradients: customGradients, - } ); - } - return result; - }, [ customGradients, themeGradients, defaultGradients ] ); + const colorGradientSettings = useMultipleOriginColorsAndGradients(); return ( { + const result = []; + if ( coreColors && coreColors.length ) { + result.push( { + name: __( 'Core' ), + colors: coreColors, + } ); + } + if ( themeColors && themeColors.length ) { + result.push( { + name: __( 'Theme' ), + colors: themeColors, + } ); + } + if ( userColors && userColors.length ) { + result.push( { + name: __( 'User' ), + colors: userColors, + } ); + } + return result; + }, [ coreColors, themeColors, userColors ] ); + + const userGradients = useSetting( 'color.gradients.user' ); + const themeGradients = useSetting( 'color.gradients.theme' ); + const coreGradients = useSetting( 'color.gradients.core' ); + colorGradientSettings.gradients = useMemo( () => { + const result = []; + if ( coreGradients && coreGradients.length ) { + result.push( { + name: __( 'Core' ), + gradients: coreGradients, + } ); + } + if ( themeGradients && themeGradients.length ) { + result.push( { + name: __( 'Theme' ), + gradients: themeGradients, + } ); + } + if ( userGradients && userGradients.length ) { + result.push( { + name: __( 'User' ), + gradients: userGradients, + } ); + } + return result; + }, [ userGradients, themeGradients, coreGradients ] ); + + return colorGradientSettings; +} From d8e8045c439ab6ac2b3fed0f0a07d6d04d66c20d Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 17 Nov 2021 16:05:42 +1000 Subject: [PATCH 2/3] Update border color to display multiple color palette origins --- .../block-editor/src/hooks/border-color.js | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/hooks/border-color.js b/packages/block-editor/src/hooks/border-color.js index 9060f21236d69..3b206c90df7e1 100644 --- a/packages/block-editor/src/hooks/border-color.js +++ b/packages/block-editor/src/hooks/border-color.js @@ -15,6 +15,7 @@ import { useState } from '@wordpress/element'; * Internal dependencies */ import ColorGradientControl from '../components/colors-gradients/control'; +import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients'; import { getColorClassName, getColorObjectByColorValue, @@ -46,13 +47,15 @@ export function BorderColorEdit( props ) { attributes: { borderColor, style }, setAttributes, } = props; - const colors = useSetting( 'color.palette' ) || EMPTY_ARRAY; - const disableCustomColors = ! useSetting( 'color.custom' ); - const disableCustomGradients = ! useSetting( 'color.customGradient' ); + const colorGradientSettings = useMultipleOriginColorsAndGradients(); + const availableColors = colorGradientSettings.colors.reduce( + ( colors, origin ) => colors.concat( origin.colors ), + [] + ); const [ colorValue, setColorValue ] = useState( () => getColorObjectByAttributeValues( - colors, + availableColors, borderColor, style?.border?.color )?.color @@ -61,7 +64,10 @@ export function BorderColorEdit( props ) { const onChangeColor = ( value ) => { setColorValue( value ); - const colorObject = getColorObjectByColorValue( colors, value ); + const colorObject = getColorObjectByColorValue( + availableColors, + value + ); const newStyle = { ...style, border: { @@ -83,11 +89,10 @@ export function BorderColorEdit( props ) { ); } From e6afdeb624e10b1db04d02e751e6aa4e6c5bcc81 Mon Sep 17 00:00:00 2001 From: Staci Cooper Date: Tue, 23 Nov 2021 10:49:14 -0800 Subject: [PATCH 3/3] Merge in changes from trunk --- .../panel-color-gradient-settings.js | 8 +- .../use-common-single-multiple-selects.js | 11 +++ ...se-multiple-origin-colors-and-gradients.js | 88 ++++++++++++------- 3 files changed, 70 insertions(+), 37 deletions(-) create mode 100644 packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js 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 7d1f9e00eb5ad..58d31698d69d7 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 @@ -17,6 +17,7 @@ import ColorGradientControl from './control'; import { getColorObjectByColorValue } from '../colors'; import { __experimentalGetGradientObjectByGradientValue } from '../gradients'; import useSetting from '../use-setting'; +import useCommonSingleMultipleSelects from './use-common-single-multiple-selects'; import useMultipleOriginColorsAndGradients from './use-multiple-origin-colors-and-gradients'; // 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) @@ -152,13 +153,6 @@ export const PanelColorGradientSettingsInner = ( { ); }; -function useCommonSingleMultipleSelects() { - return { - disableCustomColors: ! useSetting( 'color.custom' ), - disableCustomGradients: ! useSetting( 'color.customGradient' ), - }; -} - const PanelColorGradientSettingsSingleSelect = ( props ) => { const colorGradientSettings = useCommonSingleMultipleSelects(); colorGradientSettings.colors = useSetting( 'color.palette' ); diff --git a/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js b/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js new file mode 100644 index 0000000000000..6a538a33de44e --- /dev/null +++ b/packages/block-editor/src/components/colors-gradients/use-common-single-multiple-selects.js @@ -0,0 +1,11 @@ +/** + * Internal dependencies + */ +import useSetting from '../use-setting'; + +export default function useCommonSingleMultipleSelects() { + return { + disableCustomColors: ! useSetting( 'color.custom' ), + disableCustomGradients: ! useSetting( 'color.customGradient' ), + }; +} diff --git a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js index 22a0942afab68..ca3ecc2644635 100644 --- a/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js +++ b/packages/block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js @@ -2,12 +2,13 @@ * WordPress dependencies */ import { useMemo } from '@wordpress/element'; -import { __ } from '@wordpress/i18n'; +import { _x } from '@wordpress/i18n'; /** * Internal dependencies */ import useSetting from '../use-setting'; +import useCommonSingleMultipleSelects from './use-common-single-multiple-selects'; /** * Retrieves color and gradient related settings. @@ -18,62 +19,89 @@ import useSetting from '../use-setting'; * @return {Object} Color and gradient related settings. */ export default function useMultipleOriginColorsAndGradients() { - const colorGradientSettings = { - disableCustomColors: ! useSetting( 'color.custom' ), - disableCustomGradients: ! useSetting( 'color.customGradient' ), - }; - - const userColors = useSetting( 'color.palette.user' ); + const colorGradientSettings = useCommonSingleMultipleSelects(); + const customColors = useSetting( 'color.palette.custom' ); const themeColors = useSetting( 'color.palette.theme' ); - const coreColors = useSetting( 'color.palette.core' ); + const defaultColors = useSetting( 'color.palette.default' ); + const shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' ); + colorGradientSettings.colors = useMemo( () => { const result = []; - if ( coreColors && coreColors.length ) { + if ( themeColors && themeColors.length ) { result.push( { - name: __( 'Core' ), - colors: coreColors, + name: _x( + 'Theme', + 'Indicates this palette comes from the theme.' + ), + colors: themeColors, } ); } - if ( themeColors && themeColors.length ) { + if ( + shouldDisplayDefaultColors && + defaultColors && + defaultColors.length + ) { result.push( { - name: __( 'Theme' ), - colors: themeColors, + name: _x( + 'Default', + 'Indicates this palette comes from WordPress.' + ), + colors: defaultColors, } ); } - if ( userColors && userColors.length ) { + if ( customColors && customColors.length ) { result.push( { - name: __( 'User' ), - colors: userColors, + name: _x( + 'Custom', + 'Indicates this palette comes from the theme.' + ), + colors: customColors, } ); } return result; - }, [ coreColors, themeColors, userColors ] ); + }, [ defaultColors, themeColors, customColors ] ); - const userGradients = useSetting( 'color.gradients.user' ); + const customGradients = useSetting( 'color.gradients.custom' ); const themeGradients = useSetting( 'color.gradients.theme' ); - const coreGradients = useSetting( 'color.gradients.core' ); + const defaultGradients = useSetting( 'color.gradients.default' ); + const shouldDisplayDefaultGradients = useSetting( + 'color.defaultGradients' + ); colorGradientSettings.gradients = useMemo( () => { const result = []; - if ( coreGradients && coreGradients.length ) { + if ( themeGradients && themeGradients.length ) { result.push( { - name: __( 'Core' ), - gradients: coreGradients, + name: _x( + 'Theme', + 'Indicates this palette comes from the theme.' + ), + gradients: themeGradients, } ); } - if ( themeGradients && themeGradients.length ) { + if ( + shouldDisplayDefaultGradients && + defaultGradients && + defaultGradients.length + ) { result.push( { - name: __( 'Theme' ), - gradients: themeGradients, + name: _x( + 'Default', + 'Indicates this palette comes from WordPress.' + ), + gradients: defaultGradients, } ); } - if ( userGradients && userGradients.length ) { + if ( customGradients && customGradients.length ) { result.push( { - name: __( 'User' ), - gradients: userGradients, + name: _x( + 'Custom', + 'Indicates this palette is created by the user.' + ), + gradients: customGradients, } ); } return result; - }, [ userGradients, themeGradients, coreGradients ] ); + }, [ customGradients, themeGradients, defaultGradients ] ); return colorGradientSettings; }