Revert the manage fonts button. (#66107)

Co-authored-by: ndiego <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: kevin940726 <[email protected]>
Co-authored-by: afercia <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: colorful-tones <[email protected]>
Co-authored-by: richtabor <[email protected]>

Author: 7 people

packages/edit-site/src/components/global-styles/font-families.js

@@ -6,9 +6,11 @@ import {
 	__experimentalText as Text,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
 	Button,
 } from '@wordpress/components';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { settings } from '@wordpress/icons';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -67,10 +69,18 @@ function FontFamilies() {
 				/>
 			) }
 
-			<VStack spacing={ 4 }>
+			<VStack spacing={ 2 }>
+				<HStack justify="space-between">
+					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+					<Button
+						onClick={ () => setModalTabOpen( 'installed-fonts' ) }
+						label={ __( 'Manage fonts' ) }
+						icon={ settings }
+						size="small"
+					/>
+				</HStack>
 				{ activeFonts.length > 0 && (
 					<>
-						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 						<ItemGroup size="large" isBordered isSeparated>
 							{ activeFonts.map( ( font ) => (
 								<FontFamilyItem
@@ -82,31 +92,30 @@ function FontFamilies() {
 					</>
 				) }
 				{ ! 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(
+									hasInstalledFonts
+										? 'installed-fonts'
+										: 'upload-fonts'
+								);
+							} }
+						>
+							{ hasInstalledFonts
+								? __( 'Manage 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>
 		</>
 	);

test/e2e/specs/site-editor/font-library.spec.js

@@ -38,18 +38,18 @@ test.describe( 'Font Library', () => {
 			).toBeVisible();
 		} );
 
-		test( 'should display the "Add fonts" button', async ( { page } ) => {
+		test( 'should display the "Manage fonts" icon', async ( { page } ) => {
 			await page
 				.getByRole( 'region', { name: 'Editor top bar' } )
 				.getByRole( 'button', { name: 'Styles' } )
 				.click();
 			await page
 				.getByRole( 'button', { name: 'Typography Styles' } )
 				.click();
-			const addFontsButton = page.getByRole( 'button', {
-				name: 'Add fonts',
+			const manageFontsIcon = page.getByRole( 'button', {
+				name: 'Manage fonts',
 			} );
-			await expect( addFontsButton ).toBeVisible();
+			await expect( manageFontsIcon ).toBeVisible();
 		} );
 	} );
 
@@ -66,23 +66,21 @@ test.describe( 'Font Library', () => {
 			} );
 		} );
 
-		test( 'should display the "Manage fonts" button', async ( {
-			page,
-		} ) => {
+		test( 'should display the "Manage fonts" icon', async ( { page } ) => {
 			await page
 				.getByRole( 'region', { name: 'Editor top bar' } )
 				.getByRole( 'button', { name: 'Styles' } )
 				.click();
 			await page
 				.getByRole( 'button', { name: 'Typography Styles' } )
 				.click();
-			const manageFontsButton = page.getByRole( 'button', {
+			const manageFontsIcon = page.getByRole( 'button', {
 				name: 'Manage fonts',
 			} );
-			await expect( manageFontsButton ).toBeVisible();
+			await expect( manageFontsIcon ).toBeVisible();
 		} );
 
-		test( 'should open the "Manage fonts" modal when clicking the "Manage fonts" button', async ( {
+		test( 'should open the "Manage fonts" modal when clicking the "Manage fonts" icon', async ( {
 			page,
 		} ) => {
 			await page