Global Styles: Fix block-level global styles color panels (#34293)

Check if block color support have been explicitly opted out

BackgroundColor and color are opt-out block supports: they're enabled if there's support for any color unless the block opts-out from them explicitly. Global styles UI panels were't respecting this opt out process, which is why we add logic to validate whether or not a block has turned off background color and color supports.

packages/blocks/src/api/constants.js

@@ -24,7 +24,8 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	},
 	backgroundColor: {
 		value: [ 'color', 'background' ],
-		support: [ 'color' ],
+		support: [ 'color', 'background' ],
+		requiresOptOut: true,
 	},
 	borderColor: {
 		value: [ 'border', 'color' ],
@@ -50,7 +51,8 @@ export const __EXPERIMENTAL_STYLE_PROPERTY = {
 	},
 	color: {
 		value: [ 'color', 'text' ],
-		support: [ 'color' ],
+		support: [ 'color', 'text' ],
+		requiresOptOut: true,
 	},
 	linkColor: {
 		value: [ 'elements', 'link', 'color', 'text' ],

packages/edit-site/src/components/editor/global-styles-provider.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { set, get, mergeWith, mapValues, setWith, clone } from 'lodash';
+import { set, get, has, mergeWith, mapValues, setWith, clone } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -75,8 +75,24 @@ export const useGlobalStylesReset = () => {
 const extractSupportKeys = ( supports ) => {
 	const supportKeys = [];
 	Object.keys( STYLE_PROPERTY ).forEach( ( name ) => {
+		if ( ! STYLE_PROPERTY[ name ].support ) {
+			return;
+		}
+
+		// Opting out means that, for certain support keys like background color,
+		// blocks have to explicitly set the support value false. If the key is
+		// unset, we still enable it.
+		if ( STYLE_PROPERTY[ name ].requiresOptOut ) {
+			if (
+				has( supports, STYLE_PROPERTY[ name ].support[ 0 ] ) &&
+				get( supports, STYLE_PROPERTY[ name ].support ) !== false
+			) {
+				return supportKeys.push( name );
+			}
+		}
+
 		if ( get( supports, STYLE_PROPERTY[ name ].support, false ) ) {
-			supportKeys.push( name );
+			return supportKeys.push( name );
 		}
 	} );
 	return supportKeys;

packages/edit-site/src/components/editor/test/global-styles-provider.js

@@ -0,0 +1,131 @@
+/**
+ * WordPress dependencies
+ */
+import { dispatch } from '@wordpress/data';
+
+/**
+ * External dependencies
+ */
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+
+/**
+ * Internal dependencies
+ */
+import GlobalStylesProvider, {
+	useGlobalStylesContext,
+} from '../global-styles-provider';
+
+const settings = {
+	styles: [
+		{
+			css: 'body {\n\tmargin: 0;\n\tpadding: 0;\n}',
+			baseURL: 'http://localhost:4759/ponyfill.css',
+		},
+	],
+	__experimentalGlobalStylesBaseStyles: {},
+};
+
+const generateCoverBlockType = ( colorSupports ) => {
+	return {
+		name: 'core/cover',
+		supports: {
+			color: colorSupports,
+		},
+	};
+};
+
+const FakeCmp = () => {
+	const globalStylesContext = useGlobalStylesContext();
+	const coverBlockSupports =
+		globalStylesContext.blocks[ 'core/cover' ].supports;
+
+	return <div supports={ coverBlockSupports }></div>;
+};
+
+const generateWrapper = () => {
+	return mount(
+		<GlobalStylesProvider
+			baseStyles={ settings.__experimentalGlobalStylesBaseStyles }
+		>
+			<FakeCmp />
+		</GlobalStylesProvider>
+	);
+};
+
+describe( 'global styles provider', () => {
+	beforeAll( () => {
+		dispatch( 'core/edit-site' ).updateSettings( settings );
+	} );
+
+	describe( 'when a block enables color support', () => {
+		describe( 'and disables background color support', () => {
+			it( 'still enables text color support', () => {
+				act( () => {
+					dispatch( 'core/blocks' ).addBlockTypes(
+						generateCoverBlockType( {
+							link: true,
+							background: false,
+						} )
+					);
+				} );
+
+				const wrapper = generateWrapper();
+				const actual = wrapper
+					.findWhere( ( ele ) => Boolean( ele.prop( 'supports' ) ) )
+					.prop( 'supports' );
+				expect( actual ).not.toContain( 'backgroundColor' );
+				expect( actual ).toContain( 'color' );
+
+				act( () => {
+					dispatch( 'core/blocks' ).removeBlockTypes( 'core/cover' );
+				} );
+			} );
+		} );
+
+		describe( 'and both text color and background color support are disabled', () => {
+			it( 'disables text color and background color support', () => {
+				act( () => {
+					dispatch( 'core/blocks' ).addBlockTypes(
+						generateCoverBlockType( {
+							text: false,
+							background: false,
+						} )
+					);
+				} );
+
+				const wrapper = generateWrapper();
+				const actual = wrapper
+					.findWhere( ( ele ) => Boolean( ele.prop( 'supports' ) ) )
+					.prop( 'supports' );
+				expect( actual ).not.toContain( 'backgroundColor' );
+				expect( actual ).not.toContain( 'color' );
+
+				act( () => {
+					dispatch( 'core/blocks' ).removeBlockTypes( 'core/cover' );
+				} );
+			} );
+		} );
+
+		describe( 'and text color and background color supports are omitted', () => {
+			it( 'still enables both text color and background color supports', () => {
+				act( () => {
+					dispatch( 'core/blocks' ).addBlockTypes(
+						generateCoverBlockType( { link: true } )
+					);
+				} );
+
+				const wrapper = generateWrapper();
+				const actual = wrapper
+					.findWhere( ( ele ) => Boolean( ele.prop( 'supports' ) ) )
+					.prop( 'supports' );
+				expect( actual ).toContain( 'backgroundColor' );
+				expect( actual ).toContain( 'color' );
+
+				act( () => {
+					dispatch( 'core/blocks' ).removeBlockTypes( 'core/cover' );
+				} );
+			} );
+		} );
+	} );
+} );