diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md index 33454b85bd871..2dba2ad363578 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 0729f19ae7c03..2875f88129224 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 2f4a2d7c02e33..f8a91caa721b1 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..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'; /** @@ -172,64 +172,88 @@ 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 coreColors = useSetting( 'color.palette.core' ); - const shouldDisplayCoreColors = useSetting( 'color.corePalette' ); + const defaultColors = useSetting( 'color.palette.core' ); + const shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' ); colorGradientSettings.colors = useMemo( () => { const result = []; - if ( shouldDisplayCoreColors && 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.user' ); const themeGradients = useSetting( 'color.gradients.theme' ); - const coreGradients = useSetting( 'color.gradients.core' ); - const shouldDisplayCoreGradients = useSetting( 'color.coreGradients' ); + const defaultGradients = useSetting( 'color.gradients.core' ); + const shouldDisplayDefaultGradients = useSetting( + 'color.defaultGradients' + ); colorGradientSettings.gradients = useMemo( () => { const result = []; - if ( - shouldDisplayCoreGradients && - 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 ( { 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 ( 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 is created by the user.' + ), + colors: customColors, } ); } return result; - }, [ userColors, themeColors, coreColors ] ); + }, [ 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 [ coreGradients ] = useSetting( 'color.gradients.core', name ); + const [ defaultGradients ] = useSetting( 'color.gradients.core', name ); return 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 ( 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 ] ); } diff --git a/schemas/json/theme.json b/schemas/json/theme.json index f84e7f51e1c6c..05a1a9e75f410 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",