From 9612790537cfb6f811280b694989fcdd67a1c37b Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Wed, 24 Jan 2024 14:02:12 +0900
Subject: [PATCH 1/2] Font Library: Replace manage fonts icon with button with
 visible text

---
 .../components/global-styles/font-families.js | 27 +++++++------------
 .../src/components/global-styles/style.scss   |  4 +++
 2 files changed, 13 insertions(+), 18 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 7a7597878eacd..9da7b15f2214b 100644
--- a/packages/edit-site/src/components/global-styles/font-families.js
+++ b/packages/edit-site/src/components/global-styles/font-families.js
@@ -5,11 +5,8 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
 	Button,
-	Tooltip,
 } from '@wordpress/components';
-import { typography } from '@wordpress/icons';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -38,21 +35,7 @@ function FontFamilies() {
 			) }
 
 			<VStack spacing={ 3 }>
-				<HStack justify="space-between">
-					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
-					<HStack justify="flex-end">
-						<Tooltip text={ __( 'Manage fonts' ) }>
-							<Button
-								onClick={ () =>
-									toggleModal( 'installed-fonts' )
-								}
-								aria-label={ __( 'Manage fonts' ) }
-								icon={ typography }
-								size={ 'small' }
-							/>
-						</Tooltip>
-					</HStack>
-				</HStack>
+				<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 				{ hasFonts ? (
 					<ItemGroup isBordered isSeparated>
 						{ customFonts.map( ( font ) => (
@@ -65,6 +48,14 @@ function FontFamilies() {
 				) : (
 					<>{ __( 'No fonts installed.' ) }</>
 				) }
+				<Button
+					className="edit-site-global-styles-font-families__manage-fonts-button"
+					variant="secondary"
+					onClick={ () => toggleModal( 'installed-fonts' ) }
+					size={ 'compact' }
+				>
+					{ __( 'Manage all 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
index a899495cc332b..2f9dad235c9ac 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -117,6 +117,10 @@
 	}
 }
 
+.edit-site-global-styles-font-families__manage-fonts-button {
+	justify-content: center;
+}
+
 .edit-site-global-styles-icon-with-current-color {
 	fill: currentColor;
 }

From 604759ae1aaff400924395e088cf7fa1840cc9a0 Mon Sep 17 00:00:00 2001
From: Tetsuaki Hamano <tetsuaki.hamano@gmail.com>
Date: Wed, 24 Jan 2024 14:24:14 +0900
Subject: [PATCH 2/2] Fix e2e test

---
 test/e2e/specs/site-editor/font-library.spec.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js
index 8bc7cfb17ea62..ad0fdfac189c4 100644
--- a/test/e2e/specs/site-editor/font-library.spec.js
+++ b/test/e2e/specs/site-editor/font-library.spec.js
@@ -19,10 +19,10 @@ test.describe( 'Font Library', () => {
 			await page
 				.getByRole( 'button', { name: /typography styles/i } )
 				.click();
-			const manageFontsIcon = page.getByRole( 'button', {
-				name: /manage fonts/i,
+			const manageFontsButton = page.getByRole( 'button', {
+				name: /Manage all fonts/i,
 			} );
-			await expect( manageFontsIcon ).toBeVisible();
+			await expect( manageFontsButton ).toBeVisible();
 		} );
 	} );
 
@@ -41,10 +41,10 @@ test.describe( 'Font Library', () => {
 			await page
 				.getByRole( 'button', { name: /typography styles/i } )
 				.click();
-			const manageFontsIcon = page.getByRole( 'button', {
-				name: /manage fonts/i,
+			const manageFontsButton = page.getByRole( 'button', {
+				name: /Manage all fonts/i,
 			} );
-			await expect( manageFontsIcon ).toBeVisible();
+			await expect( manageFontsButton ).toBeVisible();
 		} );
 
 		test( 'should open the "Manage Fonts" modal when clicking the "Manage Fonts" icon', async ( {
@@ -56,7 +56,7 @@ test.describe( 'Font Library', () => {
 				.click();
 			await page
 				.getByRole( 'button', {
-					name: /manage fonts/i,
+					name: /Manage all fonts/i,
 				} )
 				.click();
 			await expect( page.getByRole( 'dialog' ) ).toBeVisible();
@@ -74,7 +74,7 @@ test.describe( 'Font Library', () => {
 				.click();
 			await page
 				.getByRole( 'button', {
-					name: /manage fonts/i,
+					name: /Manage all fonts/i,
 				} )
 				.click();
 			await page.getByRole( 'button', { name: /system font/i } ).click();