Use color palette and gradients from theme.json

WordPress · Sep 18, 2020 · 716d0ca · 716d0ca
1 parent 523a11b
commit 716d0ca
Show file tree

Hide file tree

Showing 22 changed files with 198 additions and 312 deletions.
diff --git a/lib/edit-site-page.php b/lib/edit-site-page.php
@@ -133,11 +133,8 @@ function gutenberg_edit_site_init( $hook ) {
 		'siteUrl'           => site_url(),
 	);
 
-	list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' );
-	list( $font_sizes, )    = (array) get_theme_support( 'editor-font-sizes' );
-	if ( false !== $color_palette ) {
-		$settings['colors'] = $color_palette;
-	}
+	list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' );
+
 	if ( false !== $font_sizes ) {
 		$settings['fontSizes'] = $font_sizes;
 	}

diff --git a/lib/experimental-default-theme.json b/lib/experimental-default-theme.json
@@ -4,102 +4,126 @@
 			"color": {
 				"palette": [
 					{
+						"name": "Black",
 						"slug": "black",
 						"color": "#000000"
 					},
 					{
+						"name": "Cyan bluish gray",
 						"slug": "cyan-bluish-gray",
 						"color": "#abb8c3"
 					},
 					{
-						"slug": "light-green-cyan",
-						"color": "#7bdcb5"
+						"name": "White",
+						"slug": "white",
+						"color": "#ffffff"
 					},
 					{
-						"slug": "luminous-vivid-amber",
-						"color": "#fcb900"
+						"name": "Pale pink",
+						"slug": "pale-pink",
+						"color": "#f78da7"
 					},
 					{
-						"slug": "luminous-vivid-orange",
-						"color": "#ff6900"
+						"name": "Vivid red",
+						"slug": "vivid-red",
+						"color": "#cf2e2e"
 					},
 					{
-						"slug": "pale-cyan-blue",
-						"color": "#8ed1fc"
+						"name": "Luminous vivid orange",
+						"slug": "luminous-vivid-orange",
+						"color": "#ff6900"
 					},
 					{
-						"slug": "pale-pink",
-						"color": "#f78da7"
+						"name": "Luminous vivid amber",
+						"slug": "luminous-vivid-amber",
+						"color": "#fcb900"
 					},
 					{
-						"slug": "vivid-cyan-blue",
-						"color": "#0693e3"
+						"name": "Light green cyan",
+						"slug": "light-green-cyan",
+						"color": "#7bdcb5"
 					},
 					{
+						"name": "Vivid green cyan",
 						"slug": "vivid-green-cyan",
 						"color": "#00d084"
 					},
 					{
-						"slug": "vivid-purple",
-						"color": "#9b51e0"
+						"name": "Pale cyan blue",
+						"slug": "pale-cyan-blue",
+						"color": "#8ed1fc"
 					},
 					{
-						"slug": "vivid-red",
-						"color": "#cf2e2e"
+						"name": "Vivid cyan blue",
+						"slug": "vivid-cyan-blue",
+						"color": "#0693e3"
 					},
 					{
-						"slug": "white",
-						"color": "#ffffff"
+						"name": "Vivid purple",
+						"slug": "vivid-purple",
+						"color": "#9b51e0"
 					}
 				],
 				"gradients": [
 					{
-						"slug": "blush-bordeaux",
-						"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)"
+						"name": "Vivid cyan blue to vivid purple",
+						"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
+						"slug": "vivid-cyan-blue-to-vivid-purple"
 					},
 					{
-						"slug": "blush-light-purple",
-						"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)"
+						"name": "Light green cyan to vivid green cyan",
+						"gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)",
+						"slug": "light-green-cyan-to-vivid-green-cyan"
 					},
 					{
-						"slug": "cool-to-warm-spectrum",
-						"gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)"
+						"name": "Luminous vivid amber to luminous vivid orange",
+						"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)",
+						"slug": "luminous-vivid-amber-to-luminous-vivid-orange"
 					},
 					{
-						"slug": "electric-grass",
-						"gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)"
+						"name": "Luminous vivid orange to vivid red",
+						"gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)",
+						"slug": "luminous-vivid-orange-to-vivid-red"
 					},
 					{
-						"slug": "light-green-cyan-to-vivid-green-cyan",
-						"gradient": "linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"
+						"name": "Very light gray to cyan bluish gray",
+						"gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)",
+						"slug": "very-light-gray-to-cyan-bluish-gray"
 					},
 					{
-						"slug": "luminous-dusk",
-						"gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)"
+						"name": "Cool to warm spectrum",
+						"gradient": "linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%)",
+						"slug": "cool-to-warm-spectrum"
 					},
 					{
-						"slug": "luminous-vivid-amber-to-luminous-vivid-orange",
-						"gradient": "linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%)"
+						"name": "Blush light purple",
+						"gradient": "linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%)",
+						"slug": "blush-light-purple"
 					},
 					{
-						"slug": "luminous-vivid-orange-to-vivid-red",
-						"gradient": "linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)"
+						"name": "Blush bordeaux",
+						"gradient": "linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%)",
+						"slug": "blush-bordeaux"
 					},
 					{
-						"slug": "midnight",
-						"gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)"
+						"name": "Luminous dusk",
+						"gradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
+						"slug": "luminous-dusk"
 					},
 					{
-						"slug": "pale-ocean",
-						"gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)"
+						"name": "Pale ocean",
+						"gradient": "linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%)",
+						"slug": "pale-ocean"
 					},
 					{
-						"slug": "very-light-gray-to-cyan-bluish-gray",
-						"gradient": "linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%)"
+						"name": "Electric grass",
+						"gradient": "linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%)",
+						"slug": "electric-grass"
 					},
 					{
-						"slug": "vivid-cyan-blue-to-vivid-purple",
-						"gradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"
+						"name": "Midnight",
+						"gradient": "linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%)",
+						"slug": "midnight"
 					}
 				],
 				"custom": true,

diff --git a/lib/global-styles.php b/lib/global-styles.php
@@ -187,7 +187,49 @@ function gutenberg_experimental_global_styles_get_core() {
 	$config = gutenberg_experimental_global_styles_get_from_file(
 		__DIR__ . '/experimental-default-theme.json'
 	);
+	// Start i18n logic to remove when JSON i18 strings are extracted.
+	$default_colors_i18n = array(
+		'black'                 => __( 'Black', 'gutenberg' ),
+		'cyan-bluish-gray'      => __( 'Cyan bluish gray', 'gutenberg' ),
+		'white'                 => __( 'White', 'gutenberg' ),
+		'pale-pink'             => __( 'Pale pink', 'gutenberg' ),
+		'vivid-red'             => __( 'Vivid red', 'gutenberg' ),
+		'luminous-vivid-orange' => __( 'Luminous vivid orange', 'gutenberg' ),
+		'luminous-vivid-amber'  => __( 'Luminous vivid amber', 'gutenberg' ),
+		'light-green-cyan'      => __( 'Light green cyan', 'gutenberg' ),
+		'vivid-green-cyan'      => __( 'Vivid green cyan', 'gutenberg' ),
+		'pale-cyan-blue'        => __( 'Pale cyan blue', 'gutenberg' ),
+		'vivid-cyan-blue'       => __( 'Vivid cyan blue', 'gutenberg' ),
+		'vivid-purple'          => __( 'Vivid purple', 'gutenberg' ),
+	);
+
+	if ( ! empty( $config['global']['settings']['color']['palette'] ) ) {
+		foreach ( $config['global']['settings']['color']['palette'] as &$color ) {
+			$color['name'] = $default_colors_i18n[ $color['slug'] ];
+		}
+	}
 
+	$default_gradients_i18n = array(
+		'vivid-cyan-blue-to-vivid-purple'               => __( 'Vivid cyan blue to vivid purple', 'gutenberg' ),
+		'light-green-cyan-to-vivid-green-cyan'          => __( 'Light green cyan to vivid green cyan', 'gutenberg' ),
+		'luminous-vivid-amber-to-luminous-vivid-orange' => __( 'Luminous vivid amber to luminous vivid orange', 'gutenberg' ),
+		'luminous-vivid-orange-to-vivid-red'            => __( 'Luminous vivid orange to vivid red', 'gutenberg' ),
+		'very-light-gray-to-cyan-bluish-gray'           => __( 'Very light gray to cyan bluish gray', 'gutenberg' ),
+		'cool-to-warm-spectrum'                         => __( 'Cool to warm spectrum', 'gutenberg' ),
+		'blush-light-purple'                            => __( 'Blush light purple', 'gutenberg' ),
+		'blush-bordeaux'                                => __( 'Blush bordeaux', 'gutenberg' ),
+		'luminous-dusk'                                 => __( 'Luminous dusk', 'gutenberg' ),
+		'pale-ocean'                                    => __( 'Pale ocean', 'gutenberg' ),
+		'electric-grass'                                => __( 'Electric grass', 'gutenberg' ),
+		'midnight'                                      => __( 'Midnight', 'gutenberg' ),
+	);
+
+	if ( ! empty( $config['global']['settings']['color']['gradients'] ) ) {
+		foreach ( $config['global']['settings']['color']['gradients'] as &$gradient ) {
+			$gradient['name'] = $default_gradients_i18n[ $gradient['slug'] ];
+		}
+	}
+	// End i18n logic to remove when JSON i18 strings are extracted.
 	return $config;
 }
 
@@ -762,6 +804,8 @@ function gutenberg_experimental_global_styles_settings( $settings ) {
 	// We also need to unset the deprecated settings defined by core.
 	$settings['__experimentalFeatures'] = gutenberg_experimental_global_styles_get_editor_settings( $merged );
 
+	unset( $settings['colors'] );
+	unset( $settings['gradients'] );
 	unset( $settings['disableCustomColors'] );
 	unset( $settings['disableCustomGradients'] );
 	unset( $settings['disableCustomFontSizes'] );

diff --git a/lib/navigation-page.php b/lib/navigation-page.php
@@ -64,12 +64,7 @@ function gutenberg_navigation_init( $hook ) {
 		'blockNavMenus'     => get_theme_support( 'block-nav-menus' ),
 	);
 
-	list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' );
-	list( $font_sizes, )    = (array) get_theme_support( 'editor-font-sizes' );
-
-	if ( false !== $color_palette ) {
-		$settings['colors'] = $color_palette;
-	}
+	list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' );
 
 	if ( false !== $font_sizes ) {
 		$settings['fontSizes'] = $font_sizes;

diff --git a/lib/widgets-page.php b/lib/widgets-page.php
@@ -87,12 +87,7 @@ function gutenberg_widgets_init( $hook ) {
 		gutenberg_get_legacy_widget_settings()
 	);
 
-	list( $color_palette, ) = (array) get_theme_support( 'editor-color-palette' );
-	list( $font_sizes, )    = (array) get_theme_support( 'editor-font-sizes' );
-
-	if ( false !== $color_palette ) {
-		$settings['colors'] = $color_palette;
-	}
+	list( $font_sizes, ) = (array) get_theme_support( 'editor-font-sizes' );
 
 	if ( false !== $font_sizes ) {
 		$settings['fontSizes'] = $font_sizes;

diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 ## Unreleased
 
+### Breaking Changes
+
+- The block editor does not contain default colors and gradients anymore. If one wants to take advantage of these features, please explicitly pass colors and gradients settings or use the new __experimentalFeatures setting that is available.
+
+
 ## 4.0.0 (2020-05-28)
 
 ### Breaking Changes

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -477,7 +477,6 @@ _Properties_
 
 -   _alignWide_ `boolean`: Enable/Disable Wide/Full Alignments
 -   _availableLegacyWidgets_ `Array`: Array of objects representing the legacy widgets available.
--   _colors_ `Array`: Palette colors
 -   _fontSizes_ `Array`: Available font sizes
 -   _imageEditing_ `boolean`: Image Editing settings set to false to disable.
 -   _imageSizes_ `Array`: Available image sizes

diff --git a/packages/block-editor/src/components/color-palette/with-color-context.js b/packages/block-editor/src/components/color-palette/with-color-context.js
@@ -6,48 +6,33 @@ import { isEmpty } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { createHigherOrderComponent, compose } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
+import { createHigherOrderComponent } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import useEditorFeature from '../use-editor-feature';
 
-const withDisableCustomColors = createHigherOrderComponent(
-	( WrappedComponent ) => {
-		return ( props ) => {
-			const disableCustomColors = ! useEditorFeature( 'color.custom' );
-
-			return (
-				<WrappedComponent
-					{ ...props }
-					disableCustomColors={
-						props.disableCustomColors || disableCustomColors
-					}
-				/>
-			);
-		};
-	},
-	'withDisableCustomColors'
-);
-
-export default createHigherOrderComponent(
-	compose(
-		withDisableCustomColors,
-		withSelect( ( select, ownProps ) => {
-			const settings = select( 'core/block-editor' ).getSettings();
-			const colors =
-				ownProps.colors === undefined
-					? settings.colors
-					: ownProps.colors;
-
-			return {
-				colors,
-				hasColorsToChoose:
-					! isEmpty( colors ) || ! ownProps.disableCustomColors,
-			};
-		} )
-	),
-	'withColorContext'
-);
+export default createHigherOrderComponent( ( WrappedComponent ) => {
+	return ( props ) => {
+		const colorsFeature = useEditorFeature( 'color.palette' );
+		const disableCustomColorsFeature = ! useEditorFeature( 'color.custom' );
+		const colors =
+			props.colors === undefined ? colorsFeature : props.colors;
+		const disableCustomColors =
+			props.disableCustomColors === undefined
+				? disableCustomColorsFeature
+				: props.disableCustomColors;
+		const hasColorsToChoose = ! isEmpty( colors ) || ! disableCustomColors;
+		return (
+			<WrappedComponent
+				{ ...{
+					...props,
+					colors,
+					disableCustomColors,
+					hasColorsToChoose,
+				} }
+			/>
+		);
+	};
+}, 'withColorContext' );
diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { every, isEmpty, pick } from 'lodash';
+import { every, isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,6 @@ import {
 	__experimentalGradientPicker as GradientPicker,
 } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -174,10 +173,9 @@ function ColorGradientControlInner( {
 }
 
 function ColorGradientControlSelect( props ) {
-	const colorGradientSettings = useSelect( ( select ) => {
-		const settings = select( 'core/block-editor' ).getSettings();
-		return pick( settings, colorsAndGradientKeys );
-	} );
+	const colorGradientSettings = {};
+	colorGradientSettings.colors = useEditorFeature( 'color.palette' );
+	colorGradientSettings.gradients = useEditorFeature( 'color.gradients' );
 	colorGradientSettings.disableCustomColors = ! useEditorFeature(
 		'color.custom'
 	);