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

WordPress · Sep 24, 2024 · 68bb1be · 68bb1be
1 parent 327ff86
commit 68bb1be
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 65 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/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;
 }