Color UI component: reorder palettes and update names (core by defaul…

…ts, user by custom) (#36622)
WordPress · Nov 19, 2021 · d718cb0 · d718cb0
1 parent c3c3466
commit d718cb0
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 85 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 (
 		<PanelColorGradientSettingsInner
 			{ ...{ ...colorGradientSettings, ...props } }

diff --git 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,
@@ -218,57 +218,75 @@ 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 [ coreColors ] = useSetting( 'color.palette.core', name );
+	const [ defaultColors ] = useSetting( 'color.palette.core', name );
 	return 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 ( 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
@@ -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",