Global Styles: Filter out color and typography variations

Update packages/edit-site/src/components/global-styles/style-variations-container.js Co-authored-by: Andrei Draganescu <[email protected]> Update packages/edit-site/src/components/global-styles/style-variations-container.js Co-authored-by: Andrei Draganescu <[email protected]> update function name remove variations which are empty once the property has been filtered out move to a reduce function remove duplicate values Global Styles: Don't filter out variations where the heading and body fonts are the sane
WordPress · May 22, 2024 · d9c547d · d9c547d
1 parent 4c0b137
commit d9c547d
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 54 deletions.
diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
@@ -9,21 +9,16 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useContext } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-import { getFontFamilies } from './utils';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
-const { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock(
-	blockEditorPrivateApis
-);
+const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
@@ -141,38 +136,17 @@ export function useTypographyVariations() {
 		useCurrentMergeThemeStyleVariationsWithUserConfig( {
 			property: 'typography',
 		} );
-
-	const { base } = useContext( GlobalStylesContext );
 	/*
-	 * Filter duplicate variations based on whether the variaitons
-	 * have different heading and body font families.
+	 * Filter out variations with no settings or styles.
 	 */
 	return typographyVariations?.length
-		? Object.values(
-				typographyVariations.reduce( ( acc, variation ) => {
-					const [ bodyFontFamily, headingFontFamily ] =
-						getFontFamilies(
-							mergeBaseAndUserConfigs( base, variation )
-						);
-
-					// Always preseve the default variation.
-					if ( variation?.title === 'Default' ) {
-						acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						] = variation;
-					} else if (
-						headingFontFamily?.name &&
-						bodyFontFamily?.name &&
-						! acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						]
-					) {
-						acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						] = variation;
-					}
-					return acc;
-				}, {} )
-		  )
+		? typographyVariations.filter( ( variation ) => {
+				const { settings, styles, title } = variation;
+				return (
+					title === __( 'Default' ) || // Always preseve the default variation.
+					Object.keys( settings ).length > 0 ||
+					Object.keys( styles ).length > 0
+				);
+		  } )
 		: [];
 }
diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js
@@ -12,6 +12,7 @@ import { __ } from '@wordpress/i18n';
  */
 import PreviewStyles from './preview-styles';
 import Variation from './variations/variation';
+import { isVariationWithSingleProperty } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 export default function StyleVariationsContainer( { gap = 2 } ) {
 	const variations = useSelect( ( select ) => {
@@ -20,20 +21,28 @@ 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 ) => {
+		return (
+			! isVariationWithSingleProperty( variation, 'color' ) &&
+			! isVariationWithSingleProperty( variation, 'typography' )
+		);
+	} );
+
 	const withEmptyVariation = useMemo( () => {
 		return [
 			{
 				title: __( 'Default' ),
 				settings: {},
 				styles: {},
 			},
-			...( variations ?? [] ).map( ( variation ) => ( {
+			...( multiplePropertyVariations ?? [] ).map( ( variation ) => ( {
 				...variation,
 				settings: variation.settings ?? {},
 				styles: variation.styles ?? {},
 			} ) ),
 		];
-	}, [ variations ] );
+	}, [ multiplePropertyVariations ] );
 
 	return (
 		<Grid

diff --git a/.../edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js b/.../edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js
@@ -153,22 +153,53 @@ export default function useThemeStyleVariationsByProperty( {
 				? cloneDeep( baseVariation )
 				: null;
 
-		let processedStyleVariations = variations.map( ( variation ) => {
-			let result = {
-				...filterObjectByProperty( cloneDeep( variation ), property ),
-				title: variation?.title,
-				description: variation?.description,
-			};
-
-			if ( clonedBaseVariation ) {
-				/*
-				 * Overwrites all baseVariation object `styleProperty` properties
-				 * with the theme variation `styleProperty` properties.
-				 */
-				result = mergeBaseAndUserConfigs( clonedBaseVariation, result );
-			}
-			return result;
-		} );
+		let processedStyleVariations = variations.reduce(
+			( accumulator, variation ) => {
+				const variationFilteredByProperty = filterObjectByProperty(
+					cloneDeep( variation ),
+					property
+				);
+				// Remove variations that are empty once the property is filtered out.
+				if ( Object.keys( variationFilteredByProperty ).length === 0 ) {
+					return accumulator;
+				}
+
+				let result = {
+					...variationFilteredByProperty,
+					title: variation?.title,
+					description: variation?.description,
+				};
+
+				if ( clonedBaseVariation ) {
+					/*
+					 * Overwrites all baseVariation object `styleProperty` properties
+					 * with the theme variation `styleProperty` properties.
+					 */
+					result = mergeBaseAndUserConfigs(
+						clonedBaseVariation,
+						result
+					);
+				}
+
+				// Detect if this is a duplicate variation.
+				const isDuplicate = accumulator.some( ( item ) => {
+					return (
+						JSON.stringify( item.styles ) ===
+							JSON.stringify( result?.styles ) &&
+						JSON.stringify( item.settings ) ===
+							JSON.stringify( result?.settings )
+					);
+				} );
+				if ( isDuplicate ) {
+					return accumulator;
+				}
+
+				// If the variation is not a duplicate, add it to the accumulator.
+				accumulator.push( result );
+				return accumulator;
+			},
+			[] // Initial accumulator value.
+		);
 
 		if ( 'function' === typeof filter ) {
 			processedStyleVariations =
@@ -178,3 +209,25 @@ export default function useThemeStyleVariationsByProperty( {
 		return processedStyleVariations;
 	}, [ variations, property, baseVariation, filter ] );
 }
+
+/**
+ * Compares a style variation to the same variation filtered by a single property.
+ * Returns true if the variation contains only the property specified.
+ *
+ * @param {Object} variation The variation to compare.
+ * @param {string} property  The property to compare.
+ * @return {boolean} Whether the variation contains only a single property.
+ */
+export function isVariationWithSingleProperty( variation, property ) {
+	const variationWithProperty = filterObjectByProperty(
+		cloneDeep( variation ),
+		property
+	);
+
+	return (
+		JSON.stringify( variationWithProperty?.styles ) ===
+			JSON.stringify( variation?.styles ) &&
+		JSON.stringify( variationWithProperty?.settings ) ===
+			JSON.stringify( variation?.settings )
+	);
+}