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 7d1f9e00eb5ada..58d31698d69d7f 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 00000000000000..6a538a33de44e7 --- /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 22a0942afab683..ca3ecc26446358 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; }