Global Styles: Allow variations to be filtered by multiple properties

packages/edit-site/src/components/global-styles/hooks.js

@@ -114,7 +114,7 @@ export function useSupportedStyles( name, element ) {
 
 export function useColorVariations() {
 	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
-		property: 'color',
+		properties: [ 'color' ],
 	} );
 	/*
 	 * Filter out variations with no settings or styles.
@@ -134,7 +134,7 @@ export function useColorVariations() {
 export function useTypographyVariations() {
 	const typographyVariations =
 		useCurrentMergeThemeStyleVariationsWithUserConfig( {
-			property: 'typography',
+			properties: [ 'typography' ],
 		} );
 	/*
 	 * Filter out variations with no settings or styles.

packages/edit-site/src/components/global-styles/style-variations-container.js

@@ -13,7 +13,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  */
 import PreviewStyles from './preview-styles';
 import Variation from './variations/variation';
-import { isVariationWithSingleProperty } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { isVariationWithProperties } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../lock-unlock';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
@@ -33,11 +33,14 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 		).__experimentalGetCurrentThemeGlobalStylesVariations();
 	}, [] );
 
-	// Filter out variations that are of single property type, i.e. color or typography variations.
-	const multiplePropertyVariations = variations?.filter( ( variation ) => {
+	// Filter out variations that are color or typography variations.
+	const fullStyleVariations = variations?.filter( ( variation ) => {
 		return (
-			! isVariationWithSingleProperty( variation, 'color' ) &&
-			! isVariationWithSingleProperty( variation, 'typography' )
+			! isVariationWithProperties( variation, [ 'color' ] ) &&
+			! isVariationWithProperties( variation, [
+				'typography',
+				'spacing',
+			] )
 		);
 	} );
 
@@ -48,7 +51,7 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 				settings: {},
 				styles: {},
 			},
-			...( multiplePropertyVariations ?? [] ),
+			...( fullStyleVariations ?? [] ),
 		];
 		return [
 			...withEmptyVariation.map( ( variation ) => {
@@ -105,7 +108,7 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 				};
 			} ),
 		];
-	}, [ multiplePropertyVariations, userStyles?.blocks, userStyles?.css ] );
+	}, [ fullStyleVariations, userStyles?.blocks, userStyles?.css ] );
 
 	return (
 		<Grid

packages/edit-site/src/components/global-styles/variations/variation.js

@@ -16,7 +16,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
-import { filterObjectByProperty } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { filterObjectByProperties } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../../lock-unlock';
 
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
@@ -28,24 +28,24 @@ export default function Variation( {
 	variation,
 	children,
 	isPill,
-	property,
+	properties,
 	showTooltip,
 } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 
 	const context = useMemo( () => {
 		let merged = mergeBaseAndUserConfigs( base, variation );
-		if ( property ) {
-			merged = filterObjectByProperty( merged, property );
+		if ( properties ) {
+			merged = filterObjectByProperties( merged, properties );
 		}
 		return {
 			user: variation,
 			base,
 			merged,
 			setUserConfig: () => {},
 		};
-	}, [ variation, base, property ] );
+	}, [ variation, base, properties ] );
 
 	const selectVariation = () => setUserConfig( variation );
 

packages/edit-site/src/components/global-styles/variations/variations-color.js

@@ -31,7 +31,7 @@ export default function ColorVariations( { title, gap = 2 } ) {
 						key={ index }
 						variation={ variation }
 						isPill
-						property="color"
+						properties={ [ 'color' ] }
 						showTooltip
 					>
 						{ () => <StylesPreviewColors /> }

packages/edit-site/src/components/global-styles/variations/variations-typography.js

@@ -38,7 +38,7 @@ export default function TypographyVariations( { title, gap = 2 } ) {
 						<Variation
 							key={ index }
 							variation={ variation }
-							property="typography"
+							properties={ [ 'typography' ] }
 							showTooltip
 						>
 							{ ( isFocused ) => (

packages/edit-site/src/hooks/use-theme-style-variations/test/use-theme-style-variations-by-property.js

@@ -2,33 +2,33 @@
  * Internal dependencies
  */
 import {
-	filterObjectByProperty,
-	removePropertyFromObject,
+	filterObjectByProperties,
+	removePropertiesFromObject,
 } from '../use-theme-style-variations-by-property';
 
-describe( 'filterObjectByProperty', () => {
+describe( 'filterObjectByProperties', () => {
 	const noop = () => {};
 	test.each( [
 		{
 			object: {
 				foo: 'bar',
 				array: [ 1, 3, 4 ],
 			},
-			property: 'array',
+			properties: [ 'array' ],
 			expected: { array: [ 1, 3, 4 ] },
 		},
 		{
 			object: {
 				foo: 'bar',
 			},
-			property: 'does-not-exist',
+			properties: [ 'does-not-exist' ],
 			expected: {},
 		},
 		{
 			object: {
 				foo: 'bar',
 			},
-			property: false,
+			properties: false,
 			expected: {},
 		},
 		{
@@ -39,7 +39,7 @@ describe( 'filterObjectByProperty', () => {
 					},
 				},
 			},
-			property: 'null',
+			properties: [ 'null' ],
 			expected: {
 				dig: {
 					deeper: {
@@ -52,19 +52,19 @@ describe( 'filterObjectByProperty', () => {
 			object: {
 				function: noop,
 			},
-			property: 'function',
+			properties: [ 'function' ],
 			expected: {
 				function: noop,
 			},
 		},
 		{
 			object: [],
-			property: 'something',
+			properties: [ 'something' ],
 			expected: {},
 		},
 		{
 			object: {},
-			property: undefined,
+			properties: undefined,
 			expected: {},
 		},
 		{
@@ -74,23 +74,23 @@ describe( 'filterObjectByProperty', () => {
 					array: [ 1, 3, 4 ],
 				},
 			},
-			property: 'nested-object-foo',
+			properties: [ 'nested-object-foo' ],
 			expected: {
 				'nested-object': {
 					'nested-object-foo': 'bar',
 				},
 			},
 		},
 	] )(
-		'should filter object by $property',
-		( { expected, object, property } ) => {
-			const result = filterObjectByProperty( object, property );
+		'should filter object by $properties',
+		( { expected, object, properties } ) => {
+			const result = filterObjectByProperties( object, properties );
 			expect( result ).toEqual( expected );
 		}
 	);
 } );
 
-describe( 'removePropertyFromObject', () => {
+describe( 'removePropertiesFromObject', () => {
 	const mockBaseVariation = {
 		settings: {
 			typography: {
@@ -188,34 +188,38 @@ describe( 'removePropertyFromObject', () => {
 		},
 	};
 
-	it( 'should return with no property', () => {
+	it( 'should return with no properties', () => {
 		const object = { test: 'me' };
-		expect( removePropertyFromObject( object, undefined ) ).toEqual(
+		expect( removePropertiesFromObject( object, undefined ) ).toEqual(
 			object
 		);
 	} );
 
-	it( 'should return with non-string property', () => {
+	it( 'should return with non-string properties', () => {
 		const object = { test: 'you' };
-		expect( removePropertyFromObject( object, true ) ).toEqual( object );
+		expect( removePropertiesFromObject( object, true ) ).toEqual( object );
 	} );
 
 	it( 'should return with empty object', () => {
 		const object = {};
-		expect( removePropertyFromObject( object, 'color' ) ).toEqual( object );
+		expect( removePropertiesFromObject( object, [ 'color' ] ) ).toEqual(
+			object
+		);
 	} );
 
 	it( 'should return with null', () => {
-		expect( removePropertyFromObject( null, 'color' ) ).toEqual( null );
+		expect( removePropertiesFromObject( null, [ 'color' ] ) ).toEqual(
+			null
+		);
 	} );
 
-	it( 'should remove the specified property from the object', () => {
+	it( 'should remove the specified properties from the object', () => {
 		expect(
-			removePropertyFromObject(
+			removePropertiesFromObject(
 				{
 					...mockBaseVariation,
 				},
-				'typography'
+				[ 'typography' ]
 			)
 		).toEqual( {
 			settings: {