From bc166510888cf922fa3e236913dce49a019db678 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Thu, 18 Nov 2021 17:00:09 +0100 Subject: [PATCH 1/8] corePalette to defaultPalette and coreGradients to defaultGradients --- docs/how-to-guides/themes/theme-json.md | 6 ++--- lib/class-wp-theme-json-gutenberg.php | 22 +++++++++---------- ...class-wp-theme-json-resolver-gutenberg.php | 4 ++-- lib/theme.json | 4 ++-- .../panel-color-gradient-settings.js | 10 +++++---- schemas/json/theme.json | 20 ++++++++--------- 6 files changed, 33 insertions(+), 33 deletions(-) diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md index 24095cf2dd709..1f3c6eef1dfd2 100644 --- a/docs/how-to-guides/themes/theme-json.md +++ b/docs/how-to-guides/themes/theme-json.md @@ -226,13 +226,11 @@ The settings section has the following structure: }, "color": { "background": true, - "corePalette": true, - "coreGradients": true, "custom": true, "customDuotone": true, "customGradient": true, - "corePalette": true, - "coreGradients": true, + "defaultGradients": true, + "defaultPalette": true, "duotone": [], "gradients": [], "link": false, diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php index 2c1df8b309e79..9cd8ee501b58d 100644 --- a/lib/class-wp-theme-json-gutenberg.php +++ b/lib/class-wp-theme-json-gutenberg.php @@ -88,17 +88,17 @@ class WP_Theme_JSON_Gutenberg { 'width' => null, ), 'color' => array( - 'background' => null, - 'corePalette' => null, - 'coreGradients' => null, - 'custom' => null, - 'customDuotone' => null, - 'customGradient' => null, - 'duotone' => null, - 'gradients' => null, - 'link' => null, - 'palette' => null, - 'text' => null, + 'background' => null, + 'custom' => null, + 'customDuotone' => null, + 'customGradient' => null, + 'defaultGradients' => null, + 'defaultPalette' => null, + 'duotone' => null, + 'gradients' => null, + 'link' => null, + 'palette' => null, + 'text' => null, ), 'custom' => null, 'layout' => array( diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php index 3ebd995f5e706..76138436e3408 100644 --- a/lib/class-wp-theme-json-resolver-gutenberg.php +++ b/lib/class-wp-theme-json-resolver-gutenberg.php @@ -171,7 +171,7 @@ public static function get_theme_data() { // If the theme does not have any palette, we still want to show the core one. $default_palette = true; } - $theme_support_data['settings']['color']['corePalette'] = $default_palette; + $theme_support_data['settings']['color']['defaultPalette'] = $default_palette; $default_gradients = false; if ( current_theme_supports( 'default-gradient-presets' ) ) { @@ -181,7 +181,7 @@ public static function get_theme_data() { // If the theme does not have any gradients, we still want to show the core ones. $default_gradients = true; } - $theme_support_data['settings']['color']['coreGradients'] = $default_gradients; + $theme_support_data['settings']['color']['defaultGradients'] = $default_gradients; } $with_theme_supports = new WP_Theme_JSON_Gutenberg( $theme_support_data ); $with_theme_supports->merge( self::$theme ); diff --git a/lib/theme.json b/lib/theme.json index 82e3b4fec9ee0..390776b22dc05 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -170,10 +170,10 @@ } ], "custom": true, - "corePalette": true, - "coreGradients": true, "customDuotone": true, "customGradient": true, + "defaultGradients": true, + "defaultPalette": true, "link": false, "text": true }, 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 d77447f9b726e..0cd6338f3bc34 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 @@ -175,11 +175,11 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { const userColors = useSetting( 'color.palette.user' ); const themeColors = useSetting( 'color.palette.theme' ); const coreColors = useSetting( 'color.palette.core' ); - const shouldDisplayCoreColors = useSetting( 'color.corePalette' ); + const shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' ); colorGradientSettings.colors = useMemo( () => { const result = []; - if ( shouldDisplayCoreColors && coreColors && coreColors.length ) { + if ( shouldDisplayDefaultColors && coreColors && coreColors.length ) { result.push( { name: __( 'Core' ), colors: coreColors, @@ -203,11 +203,13 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { const userGradients = useSetting( 'color.gradients.user' ); const themeGradients = useSetting( 'color.gradients.theme' ); const coreGradients = useSetting( 'color.gradients.core' ); - const shouldDisplayCoreGradients = useSetting( 'color.coreGradients' ); + const shouldDisplayDefaultGradients = useSetting( + 'color.defaultGradients' + ); colorGradientSettings.gradients = useMemo( () => { const result = []; if ( - shouldDisplayCoreGradients && + shouldDisplayDefaultGradients && coreGradients && coreGradients.length ) { diff --git a/schemas/json/theme.json b/schemas/json/theme.json index 982703a8b5332..05b29178843ad 100644 --- a/schemas/json/theme.json +++ b/schemas/json/theme.json @@ -45,16 +45,6 @@ "type": "boolean", "default": true }, - "corePalette": { - "description": "Allow users to choose colors from the Core palette. \nGutenberg plugin required.", - "type": "boolean", - "default": true - }, - "coreGradients": { - "description": "Allow users to choose colors from the Core gradients. \nGutenberg plugin required.", - "type": "boolean", - "default": true - }, "custom": { "description": "Allow users to select custom colors.\nSince 5.8.", "type": "boolean", @@ -70,6 +60,16 @@ "type": "boolean", "default": true }, + "defaultGradients": { + "description": "Allow users to choose colors from the default gradients. \nGutenberg plugin required.", + "type": "boolean", + "default": true + }, + "defaultPalette": { + "description": "Allow users to choose colors from the default palette. \nGutenberg plugin required.", + "type": "boolean", + "default": true + }, "duotone": { "description": "Duotone presets for the duotone picker.\nDoesn't generate classes or properties.\nSince 5.8.", "type": "array", From 7af1cca7d4646f52ee702b10f68861de34822eec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Thu, 18 Nov 2021 17:04:45 +0100 Subject: [PATCH 2/8] Update labels and variable names --- .../panel-color-gradient-settings.js | 26 +++++++++++-------- 1 file changed, 15 insertions(+), 11 deletions(-) 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 0cd6338f3bc34..11356995251e4 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 @@ -174,15 +174,19 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { const colorGradientSettings = useCommonSingleMultipleSelects(); const userColors = useSetting( 'color.palette.user' ); const themeColors = useSetting( 'color.palette.theme' ); - const coreColors = useSetting( 'color.palette.core' ); + const defaultColors = useSetting( 'color.palette.core' ); const shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' ); colorGradientSettings.colors = useMemo( () => { const result = []; - if ( shouldDisplayDefaultColors && coreColors && coreColors.length ) { + if ( + shouldDisplayDefaultColors && + defaultColors && + defaultColors.length + ) { result.push( { - name: __( 'Core' ), - colors: coreColors, + name: __( 'Default' ), + colors: defaultColors, } ); } if ( themeColors && themeColors.length ) { @@ -198,11 +202,11 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { } ); } return result; - }, [ coreColors, themeColors, userColors ] ); + }, [ defaultColors, themeColors, userColors ] ); const userGradients = useSetting( 'color.gradients.user' ); const themeGradients = useSetting( 'color.gradients.theme' ); - const coreGradients = useSetting( 'color.gradients.core' ); + const defaultGradients = useSetting( 'color.gradients.core' ); const shouldDisplayDefaultGradients = useSetting( 'color.defaultGradients' ); @@ -210,12 +214,12 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { const result = []; if ( shouldDisplayDefaultGradients && - coreGradients && - coreGradients.length + defaultGradients && + defaultGradients.length ) { result.push( { - name: __( 'Core' ), - gradients: coreGradients, + name: __( 'Default' ), + gradients: defaultGradients, } ); } if ( themeGradients && themeGradients.length ) { @@ -231,7 +235,7 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { } ); } return result; - }, [ userGradients, themeGradients, coreGradients ] ); + }, [ userGradients, themeGradients, defaultGradients ] ); return ( Date: Thu, 18 Nov 2021 17:15:11 +0100 Subject: [PATCH 3/8] Update Core by Default in GS sidebar at site editor --- packages/edit-site/src/components/global-styles/hooks.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index cefcdff918b9a..e2b9b89219240 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/packages/edit-site/src/components/global-styles/hooks.js @@ -225,7 +225,7 @@ export function useColorsPerOrigin( name ) { const result = []; if ( coreColors && coreColors.length ) { result.push( { - name: __( 'Core' ), + name: __( 'Default' ), colors: coreColors, } ); } @@ -253,7 +253,7 @@ export function useGradientsPerOrigin( name ) { const result = []; if ( coreGradients && coreGradients.length ) { result.push( { - name: __( 'Core' ), + name: __( 'Default' ), gradients: coreGradients, } ); } From 4e77fd67ff80f8df0707e0d6c5711219ab3999fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Thu, 18 Nov 2021 17:16:10 +0100 Subject: [PATCH 4/8] Update variable names --- .../src/components/global-styles/hooks.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index e2b9b89219240..361a2556e0d4d 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/packages/edit-site/src/components/global-styles/hooks.js @@ -220,13 +220,13 @@ export function getSupportedGlobalStylesPanels( name ) { export function useColorsPerOrigin( name ) { const [ userColors ] = useSetting( 'color.palette.user', name ); const [ themeColors ] = useSetting( 'color.palette.theme', name ); - const [ coreColors ] = useSetting( 'color.palette.core', name ); + const [ defaultColors ] = useSetting( 'color.palette.core', name ); return useMemo( () => { const result = []; - if ( coreColors && coreColors.length ) { + if ( defaultColors && defaultColors.length ) { result.push( { name: __( 'Default' ), - colors: coreColors, + colors: defaultColors, } ); } if ( themeColors && themeColors.length ) { @@ -242,19 +242,19 @@ export function useColorsPerOrigin( name ) { } ); } return result; - }, [ userColors, themeColors, coreColors ] ); + }, [ userColors, themeColors, defaultColors ] ); } export function useGradientsPerOrigin( name ) { const [ userGradients ] = useSetting( 'color.gradients.user', name ); const [ themeGradients ] = useSetting( 'color.gradients.theme', name ); - const [ coreGradients ] = useSetting( 'color.gradients.core', name ); + const [ defaultGradients ] = useSetting( 'color.gradients.core', name ); return useMemo( () => { const result = []; - if ( coreGradients && coreGradients.length ) { + if ( defaultGradients && defaultGradients.length ) { result.push( { name: __( 'Default' ), - gradients: coreGradients, + gradients: defaultGradients, } ); } if ( themeGradients && themeGradients.length ) { @@ -270,5 +270,5 @@ export function useGradientsPerOrigin( name ) { } ); } return result; - }, [ userGradients, themeGradients, coreGradients ] ); + }, [ userGradients, themeGradients, defaultGradients ] ); } From a592b3c07dfbb504f5dbbed9ab69c02c9f51fff7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Thu, 18 Nov 2021 17:29:39 +0100 Subject: [PATCH 5/8] User to Custom --- .../panel-color-gradient-settings.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) 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 11356995251e4..e0a707790ff97 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 @@ -172,7 +172,7 @@ const PanelColorGradientSettingsSingleSelect = ( props ) => { const PanelColorGradientSettingsMultipleSelect = ( props ) => { const colorGradientSettings = useCommonSingleMultipleSelects(); - const userColors = useSetting( 'color.palette.user' ); + const customColors = useSetting( 'color.palette.user' ); const themeColors = useSetting( 'color.palette.theme' ); const defaultColors = useSetting( 'color.palette.core' ); const shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' ); @@ -195,16 +195,16 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { colors: themeColors, } ); } - if ( userColors && userColors.length ) { + if ( customColors && customColors.length ) { result.push( { - name: __( 'User' ), - colors: userColors, + name: __( 'Custom' ), + colors: customColors, } ); } return result; - }, [ defaultColors, themeColors, userColors ] ); + }, [ defaultColors, themeColors, customColors ] ); - const userGradients = useSetting( 'color.gradients.user' ); + const customGradients = useSetting( 'color.gradients.user' ); const themeGradients = useSetting( 'color.gradients.theme' ); const defaultGradients = useSetting( 'color.gradients.core' ); const shouldDisplayDefaultGradients = useSetting( @@ -228,14 +228,14 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { gradients: themeGradients, } ); } - if ( userGradients && userGradients.length ) { + if ( customGradients && customGradients.length ) { result.push( { - name: __( 'User' ), - gradients: userGradients, + name: __( 'Custom' ), + gradients: customGradients, } ); } return result; - }, [ userGradients, themeGradients, defaultGradients ] ); + }, [ customGradients, themeGradients, defaultGradients ] ); return ( Date: Thu, 18 Nov 2021 17:31:13 +0100 Subject: [PATCH 6/8] User to Custom --- .../src/components/global-styles/hooks.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index 361a2556e0d4d..02ad1ebdf2f7b 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/packages/edit-site/src/components/global-styles/hooks.js @@ -218,7 +218,7 @@ export function getSupportedGlobalStylesPanels( name ) { } export function useColorsPerOrigin( name ) { - const [ userColors ] = useSetting( 'color.palette.user', name ); + const [ customColors ] = useSetting( 'color.palette.user', name ); const [ themeColors ] = useSetting( 'color.palette.theme', name ); const [ defaultColors ] = useSetting( 'color.palette.core', name ); return useMemo( () => { @@ -235,18 +235,18 @@ export function useColorsPerOrigin( name ) { colors: themeColors, } ); } - if ( userColors && userColors.length ) { + if ( customColors && customColors.length ) { result.push( { - name: __( 'User' ), - colors: userColors, + name: __( 'Custom' ), + colors: customColors, } ); } return result; - }, [ userColors, themeColors, defaultColors ] ); + }, [ customColors, themeColors, defaultColors ] ); } export function useGradientsPerOrigin( name ) { - const [ userGradients ] = useSetting( 'color.gradients.user', name ); + const [ customGradients ] = useSetting( 'color.gradients.user', name ); const [ themeGradients ] = useSetting( 'color.gradients.theme', name ); const [ defaultGradients ] = useSetting( 'color.gradients.core', name ); return useMemo( () => { @@ -263,12 +263,12 @@ export function useGradientsPerOrigin( name ) { gradients: themeGradients, } ); } - if ( userGradients && userGradients.length ) { + if ( customGradients && customGradients.length ) { result.push( { - name: __( 'User' ), - gradients: userGradients, + name: __( 'Custom' ), + gradients: customGradients, } ); } return result; - }, [ userGradients, themeGradients, defaultGradients ] ); + }, [ customGradients, themeGradients, defaultGradients ] ); } From 936c2c8ebd9753d18030f5fa5b2cf99fd258d434 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Thu, 18 Nov 2021 17:32:46 +0100 Subject: [PATCH 7/8] The theme palette goes before the default one --- .../panel-color-gradient-settings.js | 24 +++++++++---------- .../src/components/global-styles/hooks.js | 24 +++++++++---------- 2 files changed, 24 insertions(+), 24 deletions(-) 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 e0a707790ff97..7d1cfc2fbda6f 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 @@ -179,6 +179,12 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { colorGradientSettings.colors = useMemo( () => { const result = []; + if ( themeColors && themeColors.length ) { + result.push( { + name: __( 'Theme' ), + colors: themeColors, + } ); + } if ( shouldDisplayDefaultColors && defaultColors && @@ -189,12 +195,6 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { colors: defaultColors, } ); } - if ( themeColors && themeColors.length ) { - result.push( { - name: __( 'Theme' ), - colors: themeColors, - } ); - } if ( customColors && customColors.length ) { result.push( { name: __( 'Custom' ), @@ -212,6 +212,12 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { ); colorGradientSettings.gradients = useMemo( () => { const result = []; + if ( themeGradients && themeGradients.length ) { + result.push( { + name: __( 'Theme' ), + gradients: themeGradients, + } ); + } if ( shouldDisplayDefaultGradients && defaultGradients && @@ -222,12 +228,6 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { gradients: defaultGradients, } ); } - if ( themeGradients && themeGradients.length ) { - result.push( { - name: __( 'Theme' ), - gradients: themeGradients, - } ); - } if ( customGradients && customGradients.length ) { result.push( { name: __( 'Custom' ), diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index 02ad1ebdf2f7b..a2340fc5e9878 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/packages/edit-site/src/components/global-styles/hooks.js @@ -223,18 +223,18 @@ export function useColorsPerOrigin( name ) { const [ defaultColors ] = useSetting( 'color.palette.core', name ); return useMemo( () => { const result = []; - if ( defaultColors && defaultColors.length ) { - result.push( { - name: __( 'Default' ), - colors: defaultColors, - } ); - } if ( themeColors && themeColors.length ) { result.push( { name: __( 'Theme' ), colors: themeColors, } ); } + if ( defaultColors && defaultColors.length ) { + result.push( { + name: __( 'Default' ), + colors: defaultColors, + } ); + } if ( customColors && customColors.length ) { result.push( { name: __( 'Custom' ), @@ -251,18 +251,18 @@ export function useGradientsPerOrigin( name ) { const [ defaultGradients ] = useSetting( 'color.gradients.core', name ); return useMemo( () => { const result = []; - if ( defaultGradients && defaultGradients.length ) { - result.push( { - name: __( 'Default' ), - gradients: defaultGradients, - } ); - } if ( themeGradients && themeGradients.length ) { result.push( { name: __( 'Theme' ), gradients: themeGradients, } ); } + if ( defaultGradients && defaultGradients.length ) { + result.push( { + name: __( 'Default' ), + gradients: defaultGradients, + } ); + } if ( customGradients && customGradients.length ) { result.push( { name: __( 'Custom' ), From 58cd85bd23724e670c6f157c098e22906b671a32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Thu, 18 Nov 2021 17:47:50 +0100 Subject: [PATCH 8/8] Provide context for translations --- .../panel-color-gradient-settings.js | 32 +++++++++++++++---- .../src/components/global-styles/hooks.js | 32 +++++++++++++++---- 2 files changed, 50 insertions(+), 14 deletions(-) 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 7d1cfc2fbda6f..a7b7324d1fdd7 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,7 +8,7 @@ import { every, isEmpty } from 'lodash'; * WordPress dependencies */ import { PanelBody, ColorIndicator } from '@wordpress/components'; -import { sprintf, __ } from '@wordpress/i18n'; +import { sprintf, __, _x } from '@wordpress/i18n'; import { useMemo } from '@wordpress/element'; /** @@ -181,7 +181,10 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { const result = []; if ( themeColors && themeColors.length ) { result.push( { - name: __( 'Theme' ), + name: _x( + 'Theme', + 'Indicates this palette comes from the theme.' + ), colors: themeColors, } ); } @@ -191,13 +194,19 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { defaultColors.length ) { result.push( { - name: __( 'Default' ), + name: _x( + 'Default', + 'Indicates this palette comes from WordPress.' + ), colors: defaultColors, } ); } if ( customColors && customColors.length ) { result.push( { - name: __( 'Custom' ), + name: _x( + 'Custom', + 'Indicates this palette comes from the theme.' + ), colors: customColors, } ); } @@ -214,7 +223,10 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { const result = []; if ( themeGradients && themeGradients.length ) { result.push( { - name: __( 'Theme' ), + name: _x( + 'Theme', + 'Indicates this palette comes from the theme.' + ), gradients: themeGradients, } ); } @@ -224,13 +236,19 @@ const PanelColorGradientSettingsMultipleSelect = ( props ) => { defaultGradients.length ) { result.push( { - name: __( 'Default' ), + name: _x( + 'Default', + 'Indicates this palette comes from WordPress.' + ), gradients: defaultGradients, } ); } if ( customGradients && customGradients.length ) { result.push( { - name: __( 'Custom' ), + name: _x( + 'Custom', + 'Indicates this palette is created by the user.' + ), gradients: customGradients, } ); } diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js index a2340fc5e9878..fb7935c17f6bf 100644 --- a/packages/edit-site/src/components/global-styles/hooks.js +++ b/packages/edit-site/src/components/global-styles/hooks.js @@ -6,7 +6,7 @@ import { get, cloneDeep, set, isEqual, has } from 'lodash'; /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { _x } from '@wordpress/i18n'; import { useContext, useCallback, useMemo } from '@wordpress/element'; import { getBlockType, @@ -225,19 +225,28 @@ export function useColorsPerOrigin( name ) { const result = []; if ( themeColors && themeColors.length ) { result.push( { - name: __( 'Theme' ), + name: _x( + 'Theme', + 'Indicates this palette comes from the theme.' + ), colors: themeColors, } ); } if ( defaultColors && defaultColors.length ) { result.push( { - name: __( 'Default' ), + name: _x( + 'Default', + 'Indicates this palette comes from WordPress.' + ), colors: defaultColors, } ); } if ( customColors && customColors.length ) { result.push( { - name: __( 'Custom' ), + name: _x( + 'Custom', + 'Indicates this palette is created by the user.' + ), colors: customColors, } ); } @@ -253,19 +262,28 @@ export function useGradientsPerOrigin( name ) { const result = []; if ( themeGradients && themeGradients.length ) { result.push( { - name: __( 'Theme' ), + name: _x( + 'Theme', + 'Indicates this palette comes from the theme.' + ), gradients: themeGradients, } ); } if ( defaultGradients && defaultGradients.length ) { result.push( { - name: __( 'Default' ), + name: _x( + 'Default', + 'Indicates this palette comes from WordPress.' + ), gradients: defaultGradients, } ); } if ( customGradients && customGradients.length ) { result.push( { - name: __( 'Custom' ), + name: _x( + 'Custom', + 'Indicates this palette is created by the user.' + ), gradients: customGradients, } ); }