From 44e214715c84c15fd39851e91b77d94c43a0710a Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 29 May 2024 16:34:02 +0200
Subject: [PATCH] Replace Manage fonts icon button with visible text button.

---
 .../components/global-styles/font-families.js | 45 +++++++++++--------
 .../src/components/global-styles/style.scss   |  3 +-
 2 files changed, 29 insertions(+), 19 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 7713b27e306ef1..5b72b1264f91b8 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,13 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
 	Button,
 } from '@wordpress/components';
+<<<<<<< HEAD
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { settings } from '@wordpress/icons';
+=======
+>>>>>>> 72a59c77a0 (Replace Manage fonts icon button with visible text button.)
 import { useContext } from '@wordpress/element';
 
 /**
@@ -51,24 +53,31 @@ function FontFamilies() {
 			) }
 
 			<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>
+				<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 				{ hasFonts ? (
-					<ItemGroup isBordered isSeparated>
-						{ customFonts.map( ( font ) => (
-							<FontFamilyItem key={ font.slug } font={ font } />
-						) ) }
-						{ themeFonts.map( ( font ) => (
-							<FontFamilyItem key={ font.slug } font={ font } />
-						) ) }
-					</ItemGroup>
+					<>
+						<ItemGroup isBordered isSeparated>
+							{ customFonts.map( ( font ) => (
+								<FontFamilyItem
+									key={ font.slug }
+									font={ font }
+								/>
+							) ) }
+							{ themeFonts.map( ( font ) => (
+								<FontFamilyItem
+									key={ font.slug }
+									font={ font }
+								/>
+							) ) }
+						</ItemGroup>
+						<Button
+							className="edit-site-global-styles-font-families__manage-fonts"
+							variant="secondary"
+							onClick={ () => setModalTabOpen( 'installed-fonts' ) }
+						>
+							{ __( 'Manage fonts' ) }
+						</Button>
+					</>
 				) : (
 					<>
 						{ __( 'No fonts installed.' ) }
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index 406152db28970b..7230c29a45da8a 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -46,7 +46,8 @@
 	color: $gray-700;
 }
 
-.edit-site-global-styles-font-families__add-fonts {
+.edit-site-global-styles-font-families__add-fonts,
+.edit-site-global-styles-font-families__manage-fonts {
 	justify-content: center;
 }