Global Styles: Presets: Show the default empty variation as well as t…

…he other presets (#59717) * Show the default empty variation as well as the other presets * remove unconnected change * filter out duplicate color variations and leave the default alone * add a comment * rename hooks * Make default translatable Co-authored-by: scruffian <scruffian@git.wordpress.org> Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org> Co-authored-by: richtabor <richtabor@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
WordPress · Mar 18, 2024 · a6c0757 · a6c0757
1 parent b81d990
commit a6c0757
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 21 deletions.
diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
@@ -10,6 +10,7 @@ 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
@@ -99,15 +100,35 @@ export function useSupportedStyles( name, element ) {
 	return supportedPanels;
 }
 
-export function useUniqueTypographyVariations() {
+export function useColorVariations() {
+	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
+		property: 'color',
+	} );
+	/*
+	 * Filter out variations with no settings or styles.
+	 */
+	return colorVariations?.length
+		? colorVariations.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
+				);
+		  } )
+		: [];
+}
+
+export function useTypographyVariations() {
 	const typographyVariations =
 		useCurrentMergeThemeStyleVariationsWithUserConfig( {
 			property: 'typography',
 		} );
 
 	const { base } = useContext( GlobalStylesContext );
 	/*
-	 * Filter duplicate variations based on the font families used in the variation.
+	 * Filter duplicate variations based on whether the variaitons
+	 * have different heading and body font families.
 	 */
 	return typographyVariations?.length
 		? Object.values(
@@ -116,7 +137,13 @@ export function useUniqueTypographyVariations() {
 						getFontFamilies(
 							mergeBaseAndUserConfigs( base, variation )
 						);
-					if (
+
+					// Always preseve the default variation.
+					if ( variation?.title === 'Default' ) {
+						acc[
+							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
+						] = variation;
+					} else if (
 						headingFontFamily?.name &&
 						bodyFontFamily?.name &&
 						! acc[
@@ -127,7 +154,6 @@ export function useUniqueTypographyVariations() {
 							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
 						] = variation;
 					}
-
 					return acc;
 				}, {} )
 		  )

diff --git a/packages/edit-site/src/components/global-styles/variations/variations-color.js b/packages/edit-site/src/components/global-styles/variations/variations-color.js
@@ -11,12 +11,10 @@ import {
  */
 import Variation from './variation';
 import StylesPreviewColors from '../preview-colors';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { useColorVariations } from '../hooks';
 
 export default function ColorVariations() {
-	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
-		property: 'color',
-	} );
+	const colorVariations = useColorVariations();
 
 	if ( ! colorVariations?.length ) {
 		return null;

diff --git a/packages/edit-site/src/components/global-styles/variations/variations-typography.js b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
@@ -10,13 +10,13 @@ import {
 /**
  * Internal dependencies
  */
-import { useUniqueTypographyVariations } from '../hooks';
+import { useTypographyVariations } from '../hooks';
 import TypographyExample from '../typography-example';
 import PreviewIframe from '../preview-iframe';
 import Variation from './variation';
 
 export default function TypographyVariations() {
-	const typographyVariations = useUniqueTypographyVariations();
+	const typographyVariations = useTypographyVariations();
 
 	if ( ! typographyVariations?.length ) {
 		return null;

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -29,8 +29,10 @@ import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-glob
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 import ColorVariations from '../global-styles/variations/variations-color';
 import TypographyVariations from '../global-styles/variations/variations-typography';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-import { useUniqueTypographyVariations } from '../global-styles/hooks';
+import {
+	useColorVariations,
+	useTypographyVariations,
+} from '../global-styles/hooks';
 
 const noop = () => {};
 
@@ -76,11 +78,8 @@ function SidebarNavigationScreenGlobalStylesContent() {
 		};
 	}, [] );
 
-	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
-		property: 'color',
-	} );
-
-	const typographyVariations = useUniqueTypographyVariations();
+	const colorVariations = useColorVariations();
+	const typographyVariations = useTypographyVariations();
 
 	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
 	// loaded. This is necessary because the Iframe component waits until

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
@@ -5,6 +5,7 @@ import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { useContext, useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -54,13 +55,29 @@ export function useCurrentMergeThemeStyleVariationsWithUserConfig( {
 	property,
 	filter,
 } ) {
-	const variations = useSelect( ( select ) => {
-		return select(
-			coreStore
-		).__experimentalGetCurrentThemeGlobalStylesVariations();
+	const { variationsFromTheme } = useSelect( ( select ) => {
+		const _variationsFromTheme =
+			select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations();
+
+		return {
+			variationsFromTheme: _variationsFromTheme || [],
+		};
 	}, [] );
 	const { user: baseVariation } = useContext( GlobalStylesContext );
 
+	const variations = useMemo( () => {
+		return [
+			{
+				title: __( 'Default' ),
+				settings: {},
+				styles: {},
+			},
+			...variationsFromTheme,
+		];
+	}, [ variationsFromTheme ] );
+
 	return useThemeStyleVariationsByProperty( {
 		variations,
 		property,