From abb39072983bf78942d499887ed1f8f530608cc0 Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Fri, 12 Jul 2024 10:14:05 +0900
Subject: [PATCH] Font Library: Group fonts by source (#63211)

* Font Library Sidebar: Group fonts by source

* Render text as paragraph

* Change "User" to "Custom"

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
---
 .../components/global-styles/font-families.js | 64 ++++++++++---------
 .../font-library-modal/installed-fonts.js     | 12 ++--
 .../src/components/global-styles/style.scss   |  1 -
 3 files changed, 41 insertions(+), 36 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 cbb6b7828c72ee..309bd8a9dc81fe 100644
--- a/packages/edit-site/src/components/global-styles/font-families.js
+++ b/packages/edit-site/src/components/global-styles/font-families.js
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
+	__experimentalText as Text,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
 	Button,
@@ -48,48 +49,53 @@ function FontFamilies() {
 				/>
 			) }
 
-			<VStack spacing={ 2 }>
-				<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
-				{ hasFonts ? (
-					<>
+			<VStack spacing={ 4 }>
+				{ themeFonts.length > 0 && (
+					<VStack>
+						<Subtitle level={ 3 }>{ __( 'Theme Fonts' ) }</Subtitle>
 						<ItemGroup isBordered isSeparated>
-							{ customFonts.map( ( font ) => (
+							{ themeFonts.map( ( font ) => (
 								<FontFamilyItem
 									key={ font.slug }
 									font={ font }
 								/>
 							) ) }
-							{ themeFonts.map( ( font ) => (
+						</ItemGroup>
+					</VStack>
+				) }
+				{ customFonts.length > 0 && (
+					<VStack>
+						<Subtitle level={ 3 }>
+							{ __( 'Custom fonts' ) }
+						</Subtitle>
+						<ItemGroup isBordered isSeparated>
+							{ customFonts.map( ( font ) => (
 								<FontFamilyItem
 									key={ font.slug }
 									font={ font }
 								/>
 							) ) }
 						</ItemGroup>
-						<Button
-							className="edit-site-global-styles-font-families__manage-fonts"
-							variant="secondary"
-							__next40pxDefaultSize
-							onClick={ () =>
-								setModalTabOpen( 'installed-fonts' )
-							}
-						>
-							{ __( 'Manage fonts' ) }
-						</Button>
-					</>
-				) : (
-					<>
-						{ __( 'No fonts installed.' ) }
-						<Button
-							className="edit-site-global-styles-font-families__add-fonts"
-							variant="secondary"
-							__next40pxDefaultSize
-							onClick={ () => setModalTabOpen( 'upload-fonts' ) }
-						>
-							{ __( 'Add fonts' ) }
-						</Button>
-					</>
+					</VStack>
+				) }
+				{ ! hasFonts && (
+					<VStack>
+						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+						<Text as="p">{ __( 'No fonts installed.' ) }</Text>
+					</VStack>
 				) }
+				<Button
+					className="edit-site-global-styles-font-families__manage-fonts"
+					variant="secondary"
+					__next40pxDefaultSize
+					onClick={ () =>
+						setModalTabOpen(
+							hasFonts ? 'installed-fonts' : 'upload-fonts'
+						)
+					}
+				>
+					{ hasFonts ? __( 'Manage fonts' ) : __( 'Add fonts' ) }
+				</Button>
 			</VStack>
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index 7d3fa0cd703b64..564f972ce10f0a 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -169,10 +169,10 @@ function InstalledFonts() {
 										{ notice.message }
 									</Notice>
 								) }
-								{ baseCustomFonts.length > 0 && (
+								{ baseThemeFonts.length > 0 && (
 									<VStack>
 										<h2 className="font-library-modal__fonts-title">
-											{ __( 'Installed Fonts' ) }
+											{ __( 'Theme Fonts' ) }
 										</h2>
 										{ /*
 										 * Disable reason: The `list` ARIA role is redundant but
@@ -183,7 +183,7 @@ function InstalledFonts() {
 											role="list"
 											className="font-library-modal__fonts-list"
 										>
-											{ baseCustomFonts.map( ( font ) => (
+											{ baseThemeFonts.map( ( font ) => (
 												<li
 													key={ font.slug }
 													className="font-library-modal__fonts-list-item"
@@ -206,10 +206,10 @@ function InstalledFonts() {
 										{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 									</VStack>
 								) }
-								{ baseThemeFonts.length > 0 && (
+								{ baseCustomFonts.length > 0 && (
 									<VStack>
 										<h2 className="font-library-modal__fonts-title">
-											{ __( 'Theme Fonts' ) }
+											{ __( 'Custom fonts' ) }
 										</h2>
 										{ /*
 										 * Disable reason: The `list` ARIA role is redundant but
@@ -220,7 +220,7 @@ function InstalledFonts() {
 											role="list"
 											className="font-library-modal__fonts-list"
 										>
-											{ baseThemeFonts.map( ( font ) => (
+											{ baseCustomFonts.map( ( font ) => (
 												<li
 													key={ font.slug }
 													className="font-library-modal__fonts-list-item"
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 32145692c1fd6e..399e692e250d6d 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -52,7 +52,6 @@
 	color: $gray-700;
 }
 
-.edit-site-global-styles-font-families__add-fonts,
 .edit-site-global-styles-font-families__manage-fonts {
 	justify-content: center;
 }