From 5b6ad2773e184908e9f67bc8fcc6d21333455c26 Mon Sep 17 00:00:00 2001
From: scruffian <ben@scruffian.com>
Date: Tue, 5 Mar 2024 13:08:34 +0000
Subject: [PATCH 1/8] Global Styles: Try presets in Site View

---
 .../variations/variations-typography.js       |  1 +
 .../index.js                                  | 35 +++++++++++++++++--
 2 files changed, 34 insertions(+), 2 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 ebbdb0ec015d7..45f1684cd8f85 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
@@ -18,6 +18,7 @@ import TypographyExample from '../typography-example';
 import PreviewIframe from '../preview-iframe';
 import { getFontFamilies } from '../utils';
 import Variation from './variation';
+import PreviewIframe from '../preview-iframe';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
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
index a064e9f587853..3e4283b87abb1 100644
--- 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
@@ -5,7 +5,10 @@ import { __ } from '@wordpress/i18n';
 import { edit, seen } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
+import {
+	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { useCallback } from '@wordpress/element';
@@ -24,6 +27,8 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import StyleBook from '../style-book';
 import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
+import ColorVariations from '../global-styles/variations/variations-color';
+import TypographyVariations from '../global-styles/variations/variations-typography';
 
 const noop = () => {};
 
@@ -80,7 +85,33 @@ function SidebarNavigationScreenGlobalStylesContent() {
 			onChange={ noop }
 			onInput={ noop }
 		>
-			<StyleVariationsContainer />
+			<VStack spacing={ 10 }>
+				<StyleVariationsContainer />
+				<div className="edit-site-global-styles-style-variations-container">
+					<h2
+						style={ {
+							textTransform: 'uppercase',
+							color: 'white',
+							fontWeight: '400',
+						} }
+					>
+						{ __( 'Colors' ) }
+					</h2>
+					<ColorVariations />
+				</div>
+				<div className="edit-site-global-styles-style-variations-container">
+					<h2
+						style={ {
+							textTransform: 'uppercase',
+							color: 'white',
+							fontWeight: '400',
+						} }
+					>
+						{ __( 'Typography' ) }
+					</h2>
+					<TypographyVariations />
+				</div>
+			</VStack>
 		</BlockEditorProvider>
 	);
 }

From a929d6f130aaf1c4925e0a414f40f2a532c25a5b Mon Sep 17 00:00:00 2001
From: scruffian <ben@scruffian.com>
Date: Thu, 7 Mar 2024 12:57:53 +0000
Subject: [PATCH 2/8] get typography working in mobile

---
 .../global-styles/typography-example.js       |  2 --
 .../variations/variations-typography.js       | 22 ++++++++++++++-----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/typography-example.js b/packages/edit-site/src/components/global-styles/typography-example.js
index 45eb23aa0d6a5..dfb8920fb5ea2 100644
--- a/packages/edit-site/src/components/global-styles/typography-example.js
+++ b/packages/edit-site/src/components/global-styles/typography-example.js
@@ -50,8 +50,6 @@ export default function PreviewTypography( { fontSize, variation } ) {
 				type: 'tween',
 			} }
 			style={ {
-				fontSize: '22px',
-				lineHeight: '44px',
 				textAlign: 'center',
 			} }
 		>
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 45f1684cd8f85..3355f304b2f08 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
@@ -4,6 +4,7 @@
 import { useContext } from '@wordpress/element';
 import {
 	__experimentalGrid as Grid,
+	__experimentalVStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
@@ -18,7 +19,6 @@ import TypographyExample from '../typography-example';
 import PreviewIframe from '../preview-iframe';
 import { getFontFamilies } from '../utils';
 import Variation from './variation';
-import PreviewIframe from '../preview-iframe';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
@@ -75,11 +75,21 @@ export default function TypographyVariations() {
 										label={ variation?.title }
 										isFocused={ isFocused }
 									>
-										{ ( { key } ) => (
-											<TypographyExample
-												key={ key }
-												variation={ variation }
-											/>
+										{ ( { ratio, key } ) => (
+											<HStack
+												spacing={ 10 * ratio }
+												justify="center"
+												style={ {
+													height: '100%',
+													overflow: 'hidden',
+												} }
+											>
+												<TypographyExample
+													key={ key }
+													variation={ variation }
+													fontSize={ 85 * ratio }
+												/>
+											</HStack>
 										) }
 									</PreviewIframe>
 								) }

From 6546d51c65120d7838a75fa77cb50974555fd203 Mon Sep 17 00:00:00 2001
From: scruffian <ben@scruffian.com>
Date: Thu, 7 Mar 2024 13:10:00 +0000
Subject: [PATCH 3/8] add border radius

---
 .../edit-site/src/components/global-styles/preview-iframe.js | 1 -
 packages/edit-site/src/components/global-styles/style.scss   | 5 ++++-
 .../global-styles/variations/variations-typography.js        | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/preview-iframe.js b/packages/edit-site/src/components/global-styles/preview-iframe.js
index ea4207e35a113..e830accf6d939 100644
--- a/packages/edit-site/src/components/global-styles/preview-iframe.js
+++ b/packages/edit-site/src/components/global-styles/preview-iframe.js
@@ -118,7 +118,6 @@ export default function PreviewIframe( {
 				<Iframe
 					className="edit-site-global-styles-preview__iframe"
 					style={ {
-						width: '100%',
 						height: normalizedHeight * ratio,
 					} }
 					onMouseEnter={ () => setIsHovered( true ) }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 66aa76bf908d4..547656667f55f 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -7,8 +7,10 @@
 }
 
 .edit-site-global-styles-preview__iframe {
-	max-width: 100%;
+	border-radius: $radius-block-ui;
 	display: block;
+	max-width: 100%;
+	width: 100%;
 }
 
 .edit-site-typography-preview {
@@ -165,3 +167,4 @@
 .edit-site-global-styles-sidebar__panel .block-editor-block-icon svg {
 	fill: currentColor;
 }
+
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 3355f304b2f08..c59e9e872cd5b 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
@@ -77,6 +77,7 @@ export default function TypographyVariations() {
 									>
 										{ ( { ratio, key } ) => (
 											<HStack
+												key={ key }
 												spacing={ 10 * ratio }
 												justify="center"
 												style={ {
@@ -85,7 +86,6 @@ export default function TypographyVariations() {
 												} }
 											>
 												<TypographyExample
-													key={ key }
 													variation={ variation }
 													fontSize={ 85 * ratio }
 												/>

From ab033019b9d771d466628f6ab449fe4408ef9ec1 Mon Sep 17 00:00:00 2001
From: scruffian <ben@scruffian.com>
Date: Thu, 7 Mar 2024 13:35:33 +0000
Subject: [PATCH 4/8] tidy up styles

---
 .../components/global-styles/screen-colors.js |  2 +-
 .../index.js                                  | 29 +++++++------------
 .../sidebar-navigation-screen/style.scss      | 11 ++++++-
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 00fb623f5475e..a24fc7d34a295 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -39,7 +39,7 @@ function ScreenColors() {
 				) }
 			/>
 			<div className="edit-site-global-styles-screen-colors">
-				<VStack spacing={ 3 }>
+				<VStack spacing={ 6 }>
 					<ColorVariations />
 					<Palette />
 					<StylesColorPanel
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
index 3e4283b87abb1..869ada529c3ea 100644
--- 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
@@ -85,30 +85,21 @@ function SidebarNavigationScreenGlobalStylesContent() {
 			onChange={ noop }
 			onInput={ noop }
 		>
-			<VStack spacing={ 10 }>
+			<VStack
+				spacing={ 10 }
+				className="edit-site-global-styles-variation-container"
+			>
 				<StyleVariationsContainer />
-				<div className="edit-site-global-styles-style-variations-container">
-					<h2
-						style={ {
-							textTransform: 'uppercase',
-							color: 'white',
-							fontWeight: '400',
-						} }
-					>
+				<div>
+					<h3 className="edit-site-global-styles-variation-title">
 						{ __( 'Colors' ) }
-					</h2>
+					</h3>
 					<ColorVariations />
 				</div>
-				<div className="edit-site-global-styles-style-variations-container">
-					<h2
-						style={ {
-							textTransform: 'uppercase',
-							color: 'white',
-							fontWeight: '400',
-						} }
-					>
+				<div>
+					<h3 className="edit-site-global-styles-variation-title">
 						{ __( 'Typography' ) }
-					</h2>
+					</h3>
 					<TypographyVariations />
 				</div>
 			</VStack>
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index 44e266cdf6011..ed1f682255f01 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -77,7 +77,7 @@
 	flex-shrink: 0;
 }
 
-.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variation-container {
 	@include break-medium() {
 		// Safari does not currently support `scrollbar-gutter: stable`, so at
 		// particular viewport sizes it's possible for previews to render prior to a
@@ -90,7 +90,16 @@
 		// See: https://github.com/WordPress/gutenberg/issues/55112
 		max-width: 292px;
 	}
+}
+
+.edit-site-global-styles-variation-title {
+	color: $gray-300;
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+}
 
+.edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
 	.edit-site-global-styles-variations_item-preview {
 		box-shadow: 0 0 0 $border-width $gray-900;
 	}

From c9b7390c80ead06495d3a570629b0e81c0f5b635 Mon Sep 17 00:00:00 2001
From: scruffian <ben@scruffian.com>
Date: Wed, 13 Mar 2024 23:52:39 +0000
Subject: [PATCH 5/8] only output the preset headers if there are presets

---
 .../index.js                                  | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

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
index 869ada529c3ea..c28f5220c6fe6 100644
--- 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,6 +29,7 @@ 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';
 
 const noop = () => {};
 
@@ -74,6 +75,15 @@ function SidebarNavigationScreenGlobalStylesContent() {
 		};
 	}, [] );
 
+	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
+		property: 'color',
+	} );
+
+	const typographyVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( {
+			property: 'typography',
+		} );
+
 	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
 	// loaded. This is necessary because the Iframe component waits until
 	// the block editor store's `__internalIsInitialized` is true before
@@ -90,18 +100,22 @@ function SidebarNavigationScreenGlobalStylesContent() {
 				className="edit-site-global-styles-variation-container"
 			>
 				<StyleVariationsContainer />
-				<div>
-					<h3 className="edit-site-global-styles-variation-title">
-						{ __( 'Colors' ) }
-					</h3>
-					<ColorVariations />
-				</div>
-				<div>
-					<h3 className="edit-site-global-styles-variation-title">
-						{ __( 'Typography' ) }
-					</h3>
-					<TypographyVariations />
-				</div>
+				{ colorVariations && (
+					<div>
+						<h3 className="edit-site-global-styles-variation-title">
+							{ __( 'Colors' ) }
+						</h3>
+						<ColorVariations />
+					</div>
+				) }
+				{ typographyVariations && (
+					<div>
+						<h3 className="edit-site-global-styles-variation-title">
+							{ __( 'Typography' ) }
+						</h3>
+						<TypographyVariations />
+					</div>
+				) }
 			</VStack>
 		</BlockEditorProvider>
 	);

From cdf5af954672822306dbd2ae427f8251254f1333 Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Thu, 14 Mar 2024 15:18:02 +1100
Subject: [PATCH 6/8] Filtering for settings before showing titles.

---
 .../sidebar-navigation-screen-global-styles/index.js       | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

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
index c28f5220c6fe6..d9dc57ffae1e6 100644
--- 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
@@ -77,11 +77,14 @@ function SidebarNavigationScreenGlobalStylesContent() {
 
 	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
 		property: 'color',
+		filter: ( variation ) => !! variation?.settings?.color,
 	} );
 
 	const typographyVariations =
 		useCurrentMergeThemeStyleVariationsWithUserConfig( {
 			property: 'typography',
+			filter: ( variation ) =>
+				!! variation?.settings?.typography?.fontFamilies,
 		} );
 
 	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
@@ -100,7 +103,7 @@ function SidebarNavigationScreenGlobalStylesContent() {
 				className="edit-site-global-styles-variation-container"
 			>
 				<StyleVariationsContainer />
-				{ colorVariations && (
+				{ colorVariations?.length && (
 					<div>
 						<h3 className="edit-site-global-styles-variation-title">
 							{ __( 'Colors' ) }
@@ -108,7 +111,7 @@ function SidebarNavigationScreenGlobalStylesContent() {
 						<ColorVariations />
 					</div>
 				) }
-				{ typographyVariations && (
+				{ typographyVariations?.length && (
 					<div>
 						<h3 className="edit-site-global-styles-variation-title">
 							{ __( 'Typography' ) }

From 6b066122ff06a7717caecd6bb09178b8fdb84a96 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Fri, 15 Mar 2024 12:15:29 +0000
Subject: [PATCH 7/8] Remove the filters that might remove variations that are
 valid

---
 .../sidebar-navigation-screen-global-styles/index.js           | 3 ---
 1 file changed, 3 deletions(-)

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
index d9dc57ffae1e6..9f3f95e351b11 100644
--- 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
@@ -77,14 +77,11 @@ function SidebarNavigationScreenGlobalStylesContent() {
 
 	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
 		property: 'color',
-		filter: ( variation ) => !! variation?.settings?.color,
 	} );
 
 	const typographyVariations =
 		useCurrentMergeThemeStyleVariationsWithUserConfig( {
 			property: 'typography',
-			filter: ( variation ) =>
-				!! variation?.settings?.typography?.fontFamilies,
 		} );
 
 	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are

From a3593f21e73b9cd6b8b3fa033dbd1faee8ea53e1 Mon Sep 17 00:00:00 2001
From: Ben Dwyer <ben@scruffian.com>
Date: Fri, 15 Mar 2024 13:00:13 +0000
Subject: [PATCH 8/8] move the unique typography variations to a hook

---
 .../src/components/global-styles/hooks.js     | 43 +++++++++++++++++-
 .../variations/variations-typography.js       | 45 ++-----------------
 .../index.js                                  |  6 +--
 3 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/hooks.js b/packages/edit-site/src/components/global-styles/hooks.js
index 123bda7497320..97c71afa456f8 100644
--- a/packages/edit-site/src/components/global-styles/hooks.js
+++ b/packages/edit-site/src/components/global-styles/hooks.js
@@ -9,14 +9,20 @@ 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';
 
 /**
  * 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 } = unlock( blockEditorPrivateApis );
+const { useGlobalSetting, useGlobalStyle, GlobalStylesContext } = unlock(
+	blockEditorPrivateApis
+);
 
 // Enable colord's a11y plugin.
 extend( [ a11yPlugin ] );
@@ -92,3 +98,38 @@ export function useSupportedStyles( name, element ) {
 
 	return supportedPanels;
 }
+
+export function useUniqueTypographyVariations() {
+	const typographyVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( {
+			property: 'typography',
+		} );
+
+	const { base } = useContext( GlobalStylesContext );
+	/*
+	 * Filter duplicate variations based on the font families used in the variation.
+	 */
+	return typographyVariations?.length
+		? Object.values(
+				typographyVariations.reduce( ( acc, variation ) => {
+					const [ bodyFontFamily, headingFontFamily ] =
+						getFontFamilies(
+							mergeBaseAndUserConfigs( base, variation )
+						);
+					if (
+						headingFontFamily?.name &&
+						bodyFontFamily?.name &&
+						! acc[
+							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
+						]
+					) {
+						acc[
+							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
+						] = variation;
+					}
+
+					return acc;
+				}, {} )
+		  )
+		: [];
+}
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 c59e9e872cd5b..16c4133ea061a 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
@@ -1,66 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
 import {
 	__experimentalGrid as Grid,
 	__experimentalVStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from '../global-styles-provider';
-import { unlock } from '../../../lock-unlock';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { useUniqueTypographyVariations } from '../hooks';
 import TypographyExample from '../typography-example';
 import PreviewIframe from '../preview-iframe';
-import { getFontFamilies } from '../utils';
 import Variation from './variation';
 
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-
 export default function TypographyVariations() {
-	const typographyVariations =
-		useCurrentMergeThemeStyleVariationsWithUserConfig( {
-			property: 'typography',
-		} );
-
-	const { base } = useContext( GlobalStylesContext );
+	const typographyVariations = useUniqueTypographyVariations();
 
 	if ( ! typographyVariations?.length ) {
 		return null;
 	}
 
-	/*
-	 * Filter duplicate variations based on the font families used in the variation.
-	 */
-	const uniqueTypographyVariations = typographyVariations?.length
-		? Object.values(
-				typographyVariations.reduce( ( acc, variation ) => {
-					const [ bodyFontFamily, headingFontFamily ] =
-						getFontFamilies(
-							mergeBaseAndUserConfigs( base, variation )
-						);
-					if (
-						headingFontFamily?.name &&
-						bodyFontFamily?.name &&
-						! acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						]
-					) {
-						acc[
-							`${ headingFontFamily?.name }:${ bodyFontFamily?.name }`
-						] = variation;
-					}
-
-					return acc;
-				}, {} )
-		  )
-		: [];
-
 	return (
 		<VStack spacing={ 3 }>
 			<Grid
@@ -68,7 +29,7 @@ export default function TypographyVariations() {
 				className="edit-site-global-styles-style-variations-container"
 			>
 				{ typographyVariations && typographyVariations.length
-					? uniqueTypographyVariations.map( ( variation, index ) => (
+					? typographyVariations.map( ( variation, index ) => (
 							<Variation key={ index } variation={ variation }>
 								{ ( isFocused ) => (
 									<PreviewIframe
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
index 9f3f95e351b11..1fb3e090ce575 100644
--- 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
@@ -30,6 +30,7 @@ import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-d
 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';
 
 const noop = () => {};
 
@@ -79,10 +80,7 @@ function SidebarNavigationScreenGlobalStylesContent() {
 		property: 'color',
 	} );
 
-	const typographyVariations =
-		useCurrentMergeThemeStyleVariationsWithUserConfig( {
-			property: 'typography',
-		} );
+	const typographyVariations = useUniqueTypographyVariations();
 
 	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
 	// loaded. This is necessary because the Iframe component waits until