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

This reverts commit e7bf3b6.
WordPress · Sep 24, 2024 · f517c55 · f517c55
1 parent 4a91d32
commit f517c55
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 84 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,9 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
-	__experimentalText as Text,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
 	Button,
@@ -26,14 +25,8 @@ import { unlock } from '../../lock-unlock';
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 function FontFamilies() {
-	const { baseCustomFonts, modalTabOpen, setModalTabOpen } =
-		useContext( FontLibraryContext );
+	const { modalTabOpen, setModalTabOpen } = useContext( FontLibraryContext );
 	const [ fontFamilies ] = useGlobalSetting( 'typography.fontFamilies' );
-	const [ baseFontFamilies ] = useGlobalSetting(
-		'typography.fontFamilies',
-		undefined,
-		'base'
-	);
 	const themeFonts = fontFamilies?.theme
 		? fontFamilies.theme
 				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
@@ -46,11 +39,6 @@ function FontFamilies() {
 		: [];
 	const hasFonts = 0 < customFonts.length || 0 < themeFonts.length;
 
-	const hasInstalledFonts =
-		hasFonts ||
-		baseFontFamilies?.theme?.length > 0 ||
-		baseCustomFonts?.length > 0;
-
 	return (
 		<>
 			{ !! modalTabOpen && (
@@ -60,69 +48,48 @@ function FontFamilies() {
 				/>
 			) }
 
-			<VStack spacing={ 4 }>
-				{ 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 ) => (
+			<VStack spacing={ 2 }>
+				<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+				{ hasFonts ? (
+					<>
+						<ItemGroup isBordered isSeparated>
+							{ customFonts.map( ( font ) => (
 								<FontFamilyItem
 									key={ font.slug }
 									font={ font }
 								/>
 							) ) }
-						</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 ) => (
+							{ themeFonts.map( ( font ) => (
 								<FontFamilyItem
 									key={ font.slug }
 									font={ font }
 								/>
 							) ) }
 						</ItemGroup>
-					</VStack>
-				) }
-				{ ! hasFonts && (
-					<VStack>
-						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
-						<Text as="p">
-							{ hasInstalledFonts
-								? __( 'No fonts activated.' )
-								: __( 'No fonts installed.' ) }
-						</Text>
-					</VStack>
+						<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>
+					</>
 				) }
-				<Button
-					className="edit-site-global-styles-font-families__manage-fonts"
-					variant="secondary"
-					__next40pxDefaultSize
-					onClick={ () => {
-						setModalTabOpen(
-							hasInstalledFonts
-								? 'installed-fonts'
-								: 'upload-fonts'
-						);
-					} }
-				>
-					{ hasInstalledFonts
-						? __( '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
@@ -21,7 +21,7 @@ import {
 import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useContext, useEffect, useState } from '@wordpress/element';
-import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { chevronLeft, chevronRight } from '@wordpress/icons';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -224,7 +224,6 @@ function InstalledFonts() {
 		}
 	};
 
-	const hasFonts = baseThemeFonts.length > 0 || baseCustomFonts.length > 0;
 	return (
 		<div className="font-library-modal__tabpanel-layout">
 			{ isResolvingLibrary && (
@@ -250,18 +249,10 @@ function InstalledFonts() {
 										{ notice.message }
 									</Notice>
 								) }
-								{ ! hasFonts && (
-									<Text as="p">
-										{ __( 'No fonts installed.' ) }
-									</Text>
-								) }
-								{ baseThemeFonts.length > 0 && (
+								{ baseCustomFonts.length > 0 && (
 									<VStack>
 										<h2 className="font-library-modal__fonts-title">
-											{
-												/* translators: Heading for a list of fonts provided by the theme. */
-												_x( 'Theme', 'font source' )
-											}
+											{ __( 'Installed Fonts' ) }
 										</h2>
 										{ /*
 										 * Disable reason: The `list` ARIA role is redundant but
@@ -272,7 +263,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"
@@ -296,13 +287,10 @@ function InstalledFonts() {
 										{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 									</VStack>
 								) }
-								{ baseCustomFonts.length > 0 && (
+								{ baseThemeFonts.length > 0 && (
 									<VStack>
 										<h2 className="font-library-modal__fonts-title">
-											{
-												/* translators: Heading for a list of fonts installed by the user. */
-												_x( 'Custom', 'font source' )
-											}
+											{ __( 'Theme Fonts' ) }
 										</h2>
 										{ /*
 										 * Disable reason: The `list` ARIA role is redundant but
@@ -313,7 +301,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"

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -52,6 +52,7 @@
 	color: $gray-700;
 }
 
+.edit-site-global-styles-font-families__add-fonts,
 .edit-site-global-styles-font-families__manage-fonts {
 	justify-content: center;
 }