Only use new references when global styles are used. Implement global styles reference mechanism.

Author: jorgefilipecosta

lib/global-styles.php

@@ -363,10 +363,10 @@ function gutenberg_experimental_global_styles_is_site_editor() {
  * @return array New block editor settings
  */
 function gutenberg_experimental_global_styles_settings( $settings ) {
-	if (
-		gutenberg_experimental_global_styles_has_theme_support() &&
-		gutenberg_experimental_global_styles_is_site_editor()
-	) {
+	if ( ! gutenberg_experimental_global_styles_has_theme_support() ) {
+		return $settings;
+	}
+	if ( gutenberg_experimental_global_styles_is_site_editor() ) {
 		$settings['__experimentalGlobalStylesUserEntityId'] = gutenberg_experimental_global_styles_get_user_cpt_id();
 	}
 

packages/block-editor/src/hooks/color-panel.js

@@ -16,6 +16,7 @@ export default function ColorPanel( {
 	settings,
 	clientId,
 	enableContrastChecking = true,
+	...props
 } ) {
 	const { getComputedStyle, Node } = window;
 
@@ -55,6 +56,7 @@ export default function ColorPanel( {
 				title={ __( 'Color settings' ) }
 				initialOpen={ false }
 				settings={ settings }
+				{ ...props }
 			>
 				{ enableContrastChecking && (
 					<ContrastChecker

packages/block-editor/src/hooks/color.js

@@ -17,6 +17,7 @@ import { useRef, useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import {
+	getColorClassName,
 	getColorObjectByColorValue,
 	getColorObjectByAttributeValues,
 } from '../components/colors';
@@ -51,6 +52,24 @@ function addAttributes( settings ) {
 		return settings;
 	}
 
+	// Todo: Color attributes are added so we can support themes that use color classes.
+	// If later we remove support for color classes the attributes should be removed.
+	// allow blocks to specify their own attribute definition with default values if needed.
+	if ( ! settings.attributes.backgroundColor ) {
+		Object.assign( settings.attributes, {
+			backgroundColor: {
+				type: 'string',
+			},
+		} );
+	}
+	if ( ! settings.attributes.textColor ) {
+		Object.assign( settings.attributes, {
+			textColor: {
+				type: 'string',
+			},
+		} );
+	}
+
 	if ( hasGradientSupport( settings ) && ! settings.attributes.gradient ) {
 		Object.assign( settings.attributes, {
 			gradient: {
@@ -78,15 +97,30 @@ export function addSaveProps( props, blockType, attributes ) {
 	const hasGradient = hasGradientSupport( blockType );
 
 	// I'd have prefered to avoid the "style" attribute usage here
-	const { gradient, style } = attributes;
+	const { backgroundColor, textColor, gradient, style } = attributes;
 
+	const backgroundClass = getColorClassName(
+		'background-color',
+		backgroundColor
+	);
 	const gradientClass = __experimentalGetGradientClass( gradient );
-	const newClassName = classnames( props.className, gradientClass, {
-		'has-text-color': style?.color?.text,
-		'has-background':
-			style?.color?.background ||
-			( hasGradient && ( gradient || style?.color?.gradient ) ),
-	} );
+	const textClass = getColorClassName( 'color', textColor );
+	const newClassName = classnames(
+		props.className,
+		textClass,
+		gradientClass,
+		{
+			// Don't apply the background class if there's a custom gradient
+			[ backgroundClass ]:
+				( ! hasGradient || ! style?.color?.gradient ) &&
+				!! backgroundClass,
+			'has-text-color': textColor || style?.color?.text,
+			'has-background':
+				backgroundColor ||
+				style?.color?.background ||
+				( hasGradient && ( gradient || style?.color?.gradient ) ),
+		}
+	);
 	props.className = newClassName ? newClassName : undefined;
 
 	return props;
@@ -115,12 +149,16 @@ export function addEditProps( settings ) {
 	return settings;
 }
 
-const getColorFromAttributeValue = ( colors, attributeValue ) => {
-	const attributeParsed = /var\(--wp--colors--(.*)\)/.exec( attributeValue );
+const getColorFromAttributeValue = (
+	colors,
+	namedAttributeValue,
+	styleAttributeValue
+) => {
+	const attributeParsed = /var:colors\|(.+)/.exec( styleAttributeValue );
 	return getColorObjectByAttributeValues(
 		colors,
-		attributeParsed && attributeParsed[ 1 ],
-		attributeValue
+		namedAttributeValue || ( attributeParsed && attributeParsed[ 1 ] ),
+		styleAttributeValue
 	).color;
 };
 /**
@@ -132,9 +170,19 @@ const getColorFromAttributeValue = ( colors, attributeValue ) => {
  */
 export function ColorEdit( props ) {
 	const { name: blockName, attributes } = props;
-	const { colors, gradients } = useSelect( ( select ) => {
-		return select( 'core/block-editor' ).getSettings();
-	}, [] );
+	const { colorsSetting, colorsGlobalStyles, gradients } = useSelect(
+		( select ) => {
+			const settings = select( 'core/block-editor' ).getSettings();
+			return {
+				colorsSetting: settings.colors,
+				colorsGlobalStyles:
+					settings.__experimentalGlobalStylesBase?.colors,
+				gradients: settings.gradients,
+			};
+		},
+		[]
+	);
+	const colors = colorsGlobalStyles || colorsSetting;
 	// Shouldn't be needed but right now the ColorGradientsPanel
 	// can trigger both onChangeColor and onChangeBackground
 	// synchronously causing our two callbacks to override changes
@@ -150,7 +198,7 @@ export function ColorEdit( props ) {
 
 	const hasGradient = hasGradientSupport( blockName );
 
-	const { style, gradient } = attributes;
+	const { style, textColor, backgroundColor, gradient } = attributes;
 	let gradientValue;
 	if ( hasGradient && gradient ) {
 		gradientValue = getGradientValueBySlug( gradients, gradient );
@@ -160,18 +208,21 @@ export function ColorEdit( props ) {
 
 	const onChangeColor = ( name ) => ( value ) => {
 		const colorObject = getColorObjectByColorValue( colors, value );
+		const attributeName = name + 'Color';
 		const newStyle = {
 			...localAttributes.current.style,
 			color: {
 				...localAttributes.current?.style?.color,
 				[ name ]: colorObject?.slug
-					? `var(--wp--colors--${ colorObject?.slug })`
+					? colorsGlobalStyles && `var:colors|${ colorObject?.slug }`
 					: value,
 			},
 		};
 
+		const newNamedColor = colorObject?.slug ? colorObject.slug : undefined;
 		const newAttributes = {
 			style: cleanEmptyObject( newStyle ),
+			[ attributeName ]: colorsGlobalStyles ? undefined : newNamedColor,
 		};
 
 		props.setAttributes( newAttributes );
@@ -220,12 +271,14 @@ export function ColorEdit( props ) {
 		<ColorPanel
 			enableContrastChecking={ ! gradient && ! style?.color?.gradient }
 			clientId={ props.clientId }
+			colors={ colors }
 			settings={ [
 				{
 					label: __( 'Text Color' ),
 					onColorChange: onChangeColor( 'text' ),
 					colorValue: getColorFromAttributeValue(
 						colors,
+						textColor,
 						style?.color?.text
 					),
 				},
@@ -234,6 +287,7 @@ export function ColorEdit( props ) {
 					onColorChange: onChangeColor( 'background' ),
 					colorValue: getColorFromAttributeValue(
 						colors,
+						backgroundColor,
 						style?.color?.background
 					),
 					gradientValue,

packages/block-editor/src/hooks/style.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { has, get } from 'lodash';
+import { has, get, startsWith } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -34,6 +34,22 @@ const typographySupportKeys = [
 const hasStyleSupport = ( blockType ) =>
 	styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) );
 
+const VARIABLE_REFERENCE_PREFIX = 'var:';
+const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
+const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
+function compileStyleValue( uncompiledValue ) {
+	if ( startsWith( uncompiledValue, VARIABLE_REFERENCE_PREFIX ) ) {
+		const variable = uncompiledValue
+			.slice( VARIABLE_REFERENCE_PREFIX.length )
+			.replace(
+				VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE,
+				VARIABLE_PATH_SEPARATOR_TOKEN_STYLE
+			);
+		return `var(--wp--${ variable })`;
+	}
+	return uncompiledValue;
+}
+
 /**
  * Returns the inline styles to add depending on the style object
  *
@@ -52,7 +68,7 @@ export function getInlineStyles( styles = {} ) {
 	const output = {};
 	Object.entries( mappings ).forEach( ( [ styleKey, objectKey ] ) => {
 		if ( has( styles, objectKey ) ) {
-			output[ styleKey ] = get( styles, objectKey );
+			output[ styleKey ] = compileStyleValue( get( styles, objectKey ) );
 		}
 	} );
 

packages/block-library/src/columns/deprecated.js

@@ -39,34 +39,18 @@ function getDeprecatedLayoutColumn( originalContent ) {
 }
 
 const migrateCustomColors = ( attributes ) => {
-	if (
-		! attributes.textColor &&
-		! attributes.backgroundColor &&
-		! attributes.customTextColor &&
-		! attributes.customBackgroundColor
-	) {
+	if ( ! attributes.customTextColor && ! attributes.customBackgroundColor ) {
 		return attributes;
 	}
 	const style = { color: {} };
-	if ( attributes.textColor ) {
-		style.color.text = `var(--wp--colors--${ attributes.textColor })`;
-	}
 	if ( attributes.customTextColor ) {
 		style.color.text = attributes.customTextColor;
 	}
-	if ( attributes.backgroundColor ) {
-		style.color.background = `var(--wp--colors--${ attributes.backgroundColor })`;
-	}
 	if ( attributes.customBackgroundColor ) {
 		style.color.background = attributes.customBackgroundColor;
 	}
 	return {
-		...omit( attributes, [
-			'textColor',
-			'backgroundColor',
-			'customTextColor',
-			'customBackgroundColor',
-		] ),
+		...omit( attributes, [ 'customTextColor', 'customBackgroundColor' ] ),
 		style,
 	};
 };
@@ -91,14 +75,6 @@ export default [
 			},
 		},
 		migrate: migrateCustomColors,
-		isEligible( attribute ) {
-			return (
-				attribute.textColor ||
-				attribute.customTextColor ||
-				attribute.backgroundColor ||
-				attribute.customBackgroundColor
-			);
-		},
 		save( { attributes } ) {
 			const {
 				verticalAlignment,

packages/block-library/src/group/deprecated.js

@@ -17,34 +17,18 @@ const migrateAttributes = ( attributes ) => {
 		};
 	}
 
-	if (
-		! attributes.textColor &&
-		! attributes.backgroundColor &&
-		! attributes.customTextColor &&
-		! attributes.customBackgroundColor
-	) {
+	if ( ! attributes.customTextColor && ! attributes.customBackgroundColor ) {
 		return attributes;
 	}
 	const style = { color: {} };
-	if ( attributes.textColor ) {
-		style.color.text = `var(--wp--colors--${ attributes.textColor })`;
-	}
 	if ( attributes.customTextColor ) {
 		style.color.text = attributes.customTextColor;
 	}
-	if ( attributes.backgroundColor ) {
-		style.color.background = `var(--wp--colors--${ attributes.backgroundColor })`;
-	}
 	if ( attributes.customBackgroundColor ) {
 		style.color.background = attributes.customBackgroundColor;
 	}
 	return {
-		...omit( attributes, [
-			'textColor',
-			'backgroundColor',
-			'customTextColor',
-			'customBackgroundColor',
-		] ),
+		...omit( attributes, [ 'customTextColor', 'customBackgroundColor' ] ),
 		style,
 	};
 };
@@ -71,14 +55,6 @@ const deprecated = [
 			anchor: true,
 			html: false,
 		},
-		isEligible( attribute ) {
-			return (
-				attribute.textColor ||
-				attribute.customTextColor ||
-				attribute.backgroundColor ||
-				attribute.customBackgroundColor
-			);
-		},
 		migrate: migrateAttributes,
 		save( { attributes } ) {
 			const {

packages/block-library/src/heading/deprecated.js

@@ -34,19 +34,16 @@ const blockAttributes = {
 };
 
 const migrateCustomColors = ( attributes ) => {
-	if ( ! attributes.textColor && ! attributes.customTextColor ) {
+	if ( ! attributes.customTextColor ) {
 		return attributes;
 	}
 	const style = {
 		color: {
-			text: attributes.textColor
-				? `var(--wp--colors--${ attributes.textColor })`
-				: attributes.customTextColor,
+			text: attributes.customTextColor,
 		},
 	};
-
 	return {
-		...omit( attributes, [ 'textColor', 'customTextColor' ] ),
+		...omit( attributes, [ 'customTextColor' ] ),
 		style,
 	};
 };
@@ -64,9 +61,6 @@ const deprecated = [
 			},
 		},
 		migrate: migrateCustomColors,
-		isEligible( attribute ) {
-			return attribute.textColor || attribute.customTextColor;
-		},
 		save( { attributes } ) {
 			const {
 				align,