From a270bfd9187273aade29791b5e089de6cc90d748 Mon Sep 17 00:00:00 2001
From: Huub <50170696+huubl@users.noreply.github.com>
Date: Wed, 2 Oct 2024 16:34:19 +0200
Subject: [PATCH] Revert "Revert "Font Library: Group fonts by source (#63211)"
 (#65590)"

This reverts commit 61c26c3584f4236dd206023f69183c92580ef9cc.
---
 .../components/global-styles/font-families.js | 33 ++++++++++++++++---
 .../global-styles/screen-typography.js        |  2 +-
 2 files changed, 29 insertions(+), 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
index 5332478823c21..6a554b136317d 100644
--- 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
index 3739e3234258b..70acf9e7ae3d4 100644
--- 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">