Revert "Revert "Font Library: Group fonts by source (WordPress#63211)" (

WordPress#65590)" This reverts commit 61c26c3.
huubl · Oct 2, 2024 · a270bfd · a270bfd
1 parent 18b7d74
commit a270bfd
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 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
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	__experimentalText as Text,
 	__experimentalItemGroup as ItemGroup,
@@ -61,9 +61,14 @@ function FontFamilies() {
 			) }
 
 			<VStack spacing={ 4 }>
-				{ [ ...themeFonts, ...customFonts ].length > 0 && (
-					<>
-						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+				{ themeFonts.length > 0 && (
+					<VStack>
+						<Subtitle level={ 3 }>
+							{
+								/* translators: Heading for a list of fonts provided by the theme. */
+								_x( 'Theme', 'font source' )
+							}
+						</Subtitle>
 						<ItemGroup size="large" isBordered isSeparated>
 							{ themeFonts.map( ( font ) => (
 								<FontFamilyItem
@@ -72,7 +77,25 @@ function FontFamilies() {
 								/>
 							) ) }
 						</ItemGroup>
-					</>
+					</VStack>
+				) }
+				{ customFonts.length > 0 && (
+					<VStack>
+						<Subtitle level={ 3 }>
+							{
+								/* translators: Heading for a list of fonts installed by the user. */
+								_x( 'Custom', 'font source' )
+							}
+						</Subtitle>
+						<ItemGroup size="large" isBordered isSeparated>
+							{ customFonts.map( ( font ) => (
+								<FontFamilyItem
+									key={ font.slug }
+									font={ font }
+								/>
+							) ) }
+						</ItemGroup>
+					</VStack>
 				) }
 				{ ! hasFonts && (
 					<VStack>

diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -27,7 +27,7 @@ function ScreenTypography() {
 			<ScreenHeader
 				title={ __( 'Typography' ) }
 				description={ __(
-					'Available fonts, typographic styles, and the application of those styles.'
+					'Typography styles and the application of those styles on site elements.'
 				) }
 			/>
 			<div className="edit-site-global-styles-screen">