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>
WordPress · Jul 12, 2024 · e7bf3b6 · e7bf3b6
1 parent d88a0ed
commit e7bf3b6
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 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
@@ -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
@@ -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
@@ -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;
 }