List all active fonts in the typography section (#65806)

* list all active fonts * sort active fonts alphabetically also skip unnecessary sorts * abstract font source mapping into function --------- Co-authored-by: Vicente Canales <[email protected]>
WordPress · Oct 8, 2024 · 35f7773 · 35f7773
1 parent 8a54551
commit 35f7773
Showing 1 changed file with 21 additions and 14 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
@@ -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,18 +47,12 @@ function FontFamilies() {
 		undefined,
 		'base'
 	);
-	const themeFonts = fontFamilies?.theme
-		? fontFamilies.theme
-				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
-				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
-		: [];
-	const customFonts = fontFamilies?.custom
-		? fontFamilies.custom
-				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
-				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
-		: [];
-	const hasFonts = 0 < customFonts.length || 0 < themeFonts.length;
-
+	const themeFonts = mapFontsWithSource( fontFamilies?.theme, 'theme' );
+	const customFonts = mapFontsWithSource( fontFamilies?.custom, 'custom' );
+	const activeFonts = [ ...themeFonts, ...customFonts ].sort( ( a, b ) =>
+		a.name.localeCompare( b.name )
+	);
+	const hasFonts = 0 < activeFonts.length;
 	const hasInstalledFonts =
 		hasFonts ||
 		baseFontFamilies?.theme?.length > 0 ||
@@ -61,11 +68,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 }