From ef3645b9bff6b922a6da74bde808437664526d98 Mon Sep 17 00:00:00 2001
From: scruffian <ben@scruffian.com>
Date: Fri, 8 Mar 2024 17:15:25 +0000
Subject: [PATCH] Show the default empty variation as well as the other presets

---
 .../variations/variations-typography.js       | 58 +++++++++----------
 .../use-theme-style-variations-by-property.js | 25 ++++++--
 2 files changed, 50 insertions(+), 33 deletions(-)

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
index 16c4133ea061a..440aec3d94311 100644
--- a/packages/edit-site/src/components/global-styles/variations/variations-typography.js
+++ b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
@@ -28,35 +28,35 @@ export default function TypographyVariations() {
 				columns={ 3 }
 				className="edit-site-global-styles-style-variations-container"
 			>
-				{ typographyVariations && typographyVariations.length
-					? typographyVariations.map( ( variation, index ) => (
-							<Variation key={ index } variation={ variation }>
-								{ ( isFocused ) => (
-									<PreviewIframe
-										label={ variation?.title }
-										isFocused={ isFocused }
-									>
-										{ ( { ratio, key } ) => (
-											<HStack
-												key={ key }
-												spacing={ 10 * ratio }
-												justify="center"
-												style={ {
-													height: '100%',
-													overflow: 'hidden',
-												} }
-											>
-												<TypographyExample
-													variation={ variation }
-													fontSize={ 85 * ratio }
-												/>
-											</HStack>
-										) }
-									</PreviewIframe>
-								) }
-							</Variation>
-					  ) )
-					: null }
+				{ typographyVariations &&
+					typographyVariations.length &&
+					typographyVariations.map( ( variation, index ) => (
+						<Variation key={ index } variation={ variation }>
+							{ ( isFocused ) => (
+								<PreviewIframe
+									label={ variation?.title }
+									isFocused={ isFocused }
+								>
+									{ ( { ratio, key } ) => (
+										<HStack
+											key={ key }
+											spacing={ 10 * ratio }
+											justify="center"
+											style={ {
+												height: '100%',
+												overflow: 'hidden',
+											} }
+										>
+											<TypographyExample
+												variation={ variation }
+												fontSize={ 85 * ratio }
+											/>
+										</HStack>
+									) }
+								</PreviewIframe>
+							) }
+						</Variation>
+					) ) }
 			</Grid>
 		</VStack>
 	);
diff --git a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js
index d15b624c9eb44..f2acef0026916 100644
--- a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js
+++ b/packages/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,