From b06983193fa58d61ff9ed7595f6ad4202801e09e Mon Sep 17 00:00:00 2001
From: Matias Benedetto <matias.benedetto@gmail.com>
Date: Tue, 1 Oct 2024 16:49:28 -0300
Subject: [PATCH 1/3] list all active fonts

---
 .../src/components/global-styles/font-families.js         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-families.js b/packages/edit-site/src/components/global-styles/font-families.js
index 5332478823c21..b16c19c2bcaf6 100644
--- a/packages/edit-site/src/components/global-styles/font-families.js
+++ b/packages/edit-site/src/components/global-styles/font-families.js
@@ -44,8 +44,8 @@ function FontFamilies() {
 				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
 				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
 		: [];
-	const hasFonts = 0 < customFonts.length || 0 < themeFonts.length;
-
+	const activeFonts = [ ...themeFonts, ...customFonts ];
+	const hasFonts = 0 < activeFonts.length;
 	const hasInstalledFonts =
 		hasFonts ||
 		baseFontFamilies?.theme?.length > 0 ||
@@ -61,11 +61,11 @@ function FontFamilies() {
 			) }
 
 			<VStack spacing={ 4 }>
-				{ [ ...themeFonts, ...customFonts ].length > 0 && (
+				{ activeFonts.length > 0 && (
 					<>
 						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 						<ItemGroup size="large" isBordered isSeparated>
-							{ themeFonts.map( ( font ) => (
+							{ activeFonts.map( ( font ) => (
 								<FontFamilyItem
 									key={ font.slug }
 									font={ font }

From 0e9cb69c2dfdb18aa9ea075b59f5c98922d1415b Mon Sep 17 00:00:00 2001
From: Vicente Canales <1157901+vcanales@users.noreply.github.com>
Date: Thu, 3 Oct 2024 21:40:04 -0300
Subject: [PATCH 2/3] sort active fonts alphabetically

also skip unnecessary sorts
---
 .../components/global-styles/font-families.js    | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-families.js b/packages/edit-site/src/components/global-styles/font-families.js
index b16c19c2bcaf6..6d8ddf006865c 100644
--- a/packages/edit-site/src/components/global-styles/font-families.js
+++ b/packages/edit-site/src/components/global-styles/font-families.js
@@ -35,16 +35,18 @@ function FontFamilies() {
 		'base'
 	);
 	const themeFonts = fontFamilies?.theme
-		? fontFamilies.theme
-				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
-				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		? fontFamilies.theme.map( ( f ) =>
+				setUIValuesNeeded( f, { source: 'theme' } )
+		  )
 		: [];
 	const customFonts = fontFamilies?.custom
-		? fontFamilies.custom
-				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
-				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		? fontFamilies.custom.map( ( f ) =>
+				setUIValuesNeeded( f, { source: 'custom' } )
+		  )
 		: [];
-	const activeFonts = [ ...themeFonts, ...customFonts ];
+	const activeFonts = [ ...themeFonts, ...customFonts ].sort( ( a, b ) =>
+		a.name.localeCompare( b.name )
+	);
 	const hasFonts = 0 < activeFonts.length;
 	const hasInstalledFonts =
 		hasFonts ||

From 8c19ada9daf1950b6ca8c54955333ab79c3fb67e Mon Sep 17 00:00:00 2001
From: Vicente Canales <1157901+vcanales@users.noreply.github.com>
Date: Thu, 3 Oct 2024 21:43:05 -0300
Subject: [PATCH 3/3] abstract font source mapping into function

---
 .../components/global-styles/font-families.js | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-families.js b/packages/edit-site/src/components/global-styles/font-families.js
index 6d8ddf006865c..cd1697b7b79bd 100644
--- a/packages/edit-site/src/components/global-styles/font-families.js
+++ b/packages/edit-site/src/components/global-styles/font-families.js
@@ -25,6 +25,19 @@ import { unlock } from '../../lock-unlock';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
+/**
+ * Maps the fonts with the source, if available.
+ *
+ * @param {Array}  fonts  The fonts to map.
+ * @param {string} source The source of the fonts.
+ * @return {Array} The mapped fonts.
+ */
+function mapFontsWithSource( fonts, source ) {
+	return fonts
+		? fonts.map( ( f ) => setUIValuesNeeded( f, { source } ) )
+		: [];
+}
+
 function FontFamilies() {
 	const { baseCustomFonts, modalTabOpen, setModalTabOpen } =
 		useContext( FontLibraryContext );
@@ -34,16 +47,8 @@ function FontFamilies() {
 		undefined,
 		'base'
 	);
-	const themeFonts = fontFamilies?.theme
-		? fontFamilies.theme.map( ( f ) =>
-				setUIValuesNeeded( f, { source: 'theme' } )
-		  )
-		: [];
-	const customFonts = fontFamilies?.custom
-		? fontFamilies.custom.map( ( f ) =>
-				setUIValuesNeeded( f, { source: 'custom' } )
-		  )
-		: [];
+	const themeFonts = mapFontsWithSource( fontFamilies?.theme, 'theme' );
+	const customFonts = mapFontsWithSource( fontFamilies?.custom, 'custom' );
 	const activeFonts = [ ...themeFonts, ...customFonts ].sort( ( a, b ) =>
 		a.name.localeCompare( b.name )
 	);