From efd61055e9dc14d5d13ce8ed12786221d59d6363 Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Wed, 14 Feb 2024 15:22:12 -0500
Subject: [PATCH 01/15] Use NavigatorProvider in installed fonts panel

---
 .../font-library-modal/installed-fonts.js     | 93 ++++++++++---------
 .../font-library-modal/library-font-card.js   | 13 ++-
 2 files changed, 63 insertions(+), 43 deletions(-)

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
index 99c99e44a43af..456e58d68d3f2 100644
--- 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
@@ -8,10 +8,14 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalNavigatorToParentButton as NavigatorToParentButton,
 	Button,
 	Spinner,
 	FlexItem,
 } from '@wordpress/components';
+import { chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -38,14 +42,6 @@ function InstalledFonts() {
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
 
-	const handleUnselectFont = () => {
-		handleSetLibraryFontSelected( null );
-	};
-
-	const handleSelectFont = ( font ) => {
-		handleSetLibraryFontSelected( font );
-	};
-
 	const handleConfirmUninstall = async () => {
 		setNotice( null );
 
@@ -57,7 +53,7 @@ function InstalledFonts() {
 			} );
 
 			// If the font was succesfully uninstalled it is unselected.
-			handleUnselectFont();
+			handleSetLibraryFontSelected( null );
 			setIsConfirmDeleteOpen( false );
 		} catch ( error ) {
 			setNotice( {
@@ -77,27 +73,17 @@ function InstalledFonts() {
 		setIsConfirmDeleteOpen( false );
 	};
 
-	const tabDescription = !! libraryFontSelected
-		? __(
-				'Choose font variants. Keep in mind that too many variants could make your site slower.'
-		  )
-		: null;
-
 	const shouldDisplayDeleteButton =
 		!! libraryFontSelected && libraryFontSelected?.source !== 'theme';
 
 	useEffect( () => {
-		handleSelectFont( libraryFontSelected );
+		handleSetLibraryFontSelected( libraryFontSelected );
 		refreshLibrary();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	return (
 		<TabPanelLayout
-			title={ libraryFontSelected?.name || '' }
-			description={ tabDescription }
 			notice={ notice }
-			handleBack={ !! libraryFontSelected && handleUnselectFont }
 			footer={
 				<Footer
 					shouldDisplayDeleteButton={ shouldDisplayDeleteButton }
@@ -112,23 +98,30 @@ function InstalledFonts() {
 				handleCancelUninstall={ handleCancelUninstall }
 			/>
 
-			{ ! libraryFontSelected && (
-				<>
-					{ isResolvingLibrary && (
-						<FlexItem>
-							<Spacer margin={ 2 } />
-							<Spinner />
-							<Spacer margin={ 2 } />
-						</FlexItem>
-					) }
+			{ isResolvingLibrary && (
+				<FlexItem>
+					<Spacer margin={ 2 } />
+					<Spinner />
+					<Spacer margin={ 2 } />
+				</FlexItem>
+			) }
+
+			<NavigatorProvider initialPath="/">
+				<NavigatorScreen path="/">
 					{ baseCustomFonts.length > 0 && (
 						<>
+							<Text className="font-library-modal__subtitle">
+								{ __( 'Installed Fonts' ) }
+							</Text>
+
+							<Spacer margin={ 2 } />
+
 							{ baseCustomFonts.map( ( font ) => (
 								<LibraryFontCard
 									font={ font }
 									key={ font.slug }
 									onClick={ () => {
-										handleSelectFont( font );
+										handleSetLibraryFontSelected( font );
 									} }
 								/>
 							) ) }
@@ -143,29 +136,45 @@ function InstalledFonts() {
 							</Text>
 
 							<Spacer margin={ 2 } />
+
 							{ baseThemeFonts.map( ( font ) => (
 								<LibraryFontCard
 									font={ font }
 									key={ font.slug }
 									onClick={ () => {
-										handleSelectFont( font );
+										handleSetLibraryFontSelected( font );
 									} }
 								/>
 							) ) }
 						</>
 					) }
 					<Spacer margin={ 16 } />
-				</>
-			) }
-
-			{ libraryFontSelected && (
-				<LibraryFontDetails
-					font={ libraryFontSelected }
-					isConfirmDeleteOpen={ isConfirmDeleteOpen }
-					handleConfirmUninstall={ handleConfirmUninstall }
-					handleCancelUninstall={ handleCancelUninstall }
-				/>
-			) }
+				</NavigatorScreen>
+
+				<NavigatorScreen path="/fontFamily">
+					<HStack align="center">
+						<NavigatorToParentButton icon={ chevronLeft }>
+							{ __( 'Return to Library' ) }
+						</NavigatorToParentButton>
+
+						<Text className="font-library-modal__subtitle">
+							{ libraryFontSelected?.name }
+						</Text>
+					</HStack>
+					<Text>
+						{ __(
+							'Choose font variants. Keep in mind that too many variants could make your site slower.'
+						) }
+					</Text>
+
+					<LibraryFontDetails
+						font={ libraryFontSelected }
+						isConfirmDeleteOpen={ isConfirmDeleteOpen }
+						handleConfirmUninstall={ handleConfirmUninstall }
+						handleCancelUninstall={ handleCancelUninstall }
+					/>
+				</NavigatorScreen>
+			</NavigatorProvider>
 		</TabPanelLayout>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js
index aae43fcf63eba..b84ff2ad163c3 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js
@@ -3,6 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -26,8 +27,18 @@ function LibraryFontCard( { font, ...props } ) {
 		variantsInstalled
 	);
 
+	const navi = useNavigator();
+
 	return (
-		<FontCard font={ font } variantsText={ variantsText } { ...props } />
+		<FontCard
+			font={ font }
+			variantsText={ variantsText }
+			{ ...props }
+			onClick={ () => {
+				props.onClick();
+				navi.goTo( '/fontFamily' );
+			} }
+		/>
 	);
 }
 

From b3135c6bfb5a27b5814d267eac6eceaf23811fc1 Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Thu, 15 Feb 2024 13:33:25 -0500
Subject: [PATCH 02/15] Style Changes to font modal installed font details page

---
 .../font-library-modal/installed-fonts.js      | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

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
index 456e58d68d3f2..ff5799bc8a3b2 100644
--- 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
@@ -11,6 +11,7 @@ import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalHeading as Heading,
 	Button,
 	Spinner,
 	FlexItem,
@@ -152,15 +153,18 @@ function InstalledFonts() {
 				</NavigatorScreen>
 
 				<NavigatorScreen path="/fontFamily">
-					<HStack align="center">
-						<NavigatorToParentButton icon={ chevronLeft }>
-							{ __( 'Return to Library' ) }
-						</NavigatorToParentButton>
-
-						<Text className="font-library-modal__subtitle">
+					<HStack spacing={ 2 } aligh="left">
+						<NavigatorToParentButton
+							icon={ chevronLeft }
+							isSmall
+							aria-label={ __( 'Navigate to the previous view' ) }
+						/>
+
+						<Heading level={ 2 } size={ 13 }>
 							{ libraryFontSelected?.name }
-						</Text>
+						</Heading>
 					</HStack>
+					<Spacer margin={ 4 } />
 					<Text>
 						{ __(
 							'Choose font variants. Keep in mind that too many variants could make your site slower.'

From c4e6ab566f52f5147dfff607d3195365bef1c50e Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Mon, 19 Feb 2024 08:55:39 -0500
Subject: [PATCH 03/15] Simplified Font Face Demo component so it can be more
 easily reused

---
 .../collection-font-variant.js                |  2 +-
 .../font-library-modal/font-card.js           | 25 +---------------
 .../font-library-modal/font-demo.js           | 30 +++++++++++++++++--
 .../library-font-variant.js                   |  2 +-
 4 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
index 0db8932a98e34..96fd1d51d9567 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -45,7 +45,7 @@ function CollectionFontVariant( {
 				/>
 				<label htmlFor={ checkboxId }>
 					<FontFaceDemo
-						fontFace={ face }
+						font={ face }
 						text={ displayName }
 						onClick={ handleToggleActivation }
 					/>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
index 9333946844801..e2034e0189b46 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
@@ -14,27 +14,9 @@ import {
  * Internal dependencies
  */
 import FontDemo from './font-demo';
-import { getFamilyPreviewStyle } from './utils/preview-styles';
 import { chevronRight } from '@wordpress/icons';
 
 function FontCard( { font, onClick, variantsText } ) {
-	const fakeFontFace = {
-		fontStyle: 'normal',
-		fontWeight: '400',
-		fontFamily: font.fontFamily,
-		fake: true,
-	};
-
-	const displayFontFace =
-		font.fontFace && font.fontFace.length
-			? font?.fontFace?.find(
-					( face ) =>
-						face.fontStyle === 'normal' && face.fontWeight === '400'
-			  ) || font.fontFace[ 0 ]
-			: fakeFontFace;
-
-	const demoStyle = getFamilyPreviewStyle( font );
-
 	const variantsCount = font.fontFace?.length || 1;
 
 	const style = {
@@ -48,12 +30,7 @@ function FontCard( { font, onClick, variantsText } ) {
 			className="font-library-modal__font-card"
 		>
 			<Flex justify="space-between" wrap={ false }>
-				<FontDemo
-					customPreviewUrl={ font.preview }
-					fontFace={ displayFontFace }
-					text={ font.name }
-					style={ demoStyle }
-				/>
+				<FontDemo font={ font } />
 				<Flex justify="flex-end">
 					<FlexItem>
 						<Text className="font-library-modal__font-card__count">
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
index ee745caf45932..a9773ab025603 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
@@ -8,7 +8,10 @@ import { useContext, useEffect, useState, useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { FontLibraryContext } from './context';
-import { getFacePreviewStyle } from './utils/preview-styles';
+import {
+	getFacePreviewStyle,
+	getFamilyPreviewStyle,
+} from './utils/preview-styles';
 
 function getPreviewUrl( fontFace ) {
 	if ( fontFace.preview ) {
@@ -19,8 +22,31 @@ function getPreviewUrl( fontFace ) {
 	}
 }
 
-function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
+function getDisplayFontFace( font ) {
+	if ( font.fontFace && font.fontFace.length ) {
+		return (
+			font.fontFace.find(
+				( face ) =>
+					face.fontStyle === 'normal' && face.fontWeight === '400'
+			) || font.fontFace[ 0 ]
+		);
+	}
+	return {
+		fontStyle: 'normal',
+		fontWeight: '400',
+		fontFamily: font.fontFamily,
+		fake: true,
+	};
+}
+
+function FontFaceDemo( { font, text } ) {
 	const ref = useRef( null );
+
+	const fontFace = getDisplayFontFace( font );
+	const style = getFamilyPreviewStyle( font );
+	text = text || font.name;
+	const customPreviewUrl = font.preview;
+
 	const [ isIntersecting, setIsIntersecting ] = useState( false );
 	const [ isAssetLoaded, setIsAssetLoaded ] = useState( false );
 	const { loadFontFaceAsset } = useContext( FontLibraryContext );
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
index f58eccd2b6ec2..42e8d624a742d 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
@@ -55,7 +55,7 @@ function LibraryFontVariant( { face, font } ) {
 				/>
 				<label htmlFor={ checkboxId }>
 					<FontFaceDemo
-						fontFace={ face }
+						font={ face }
 						text={ displayName }
 						onClick={ handleToggleActivation }
 					/>

From 41c7203f632ee581d9cfa63a16c392c9f1adff86 Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Mon, 19 Feb 2024 08:59:39 -0500
Subject: [PATCH 04/15] Refactored 'installed-fonts' component to use Navigator
 Components

---
 .../font-library-modal/installed-fonts.js     | 319 ++++++++++--------
 1 file changed, 185 insertions(+), 134 deletions(-)

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
index ff5799bc8a3b2..6f55cb4b4ea81 100644
--- 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
@@ -1,32 +1,34 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { useContext, useEffect, useState } from '@wordpress/element';
 import {
-	privateApis as componentsPrivateApis,
+	Button,
+	__experimentalConfirmDialog as ConfirmDialog,
 	__experimentalHStack as HStack,
-	__experimentalSpacer as Spacer,
-	__experimentalText as Text,
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
-	__experimentalHeading as Heading,
-	Button,
+	__experimentalUseNavigator as useNavigator,
+	Notice,
+	__experimentalSpacer as Spacer,
 	Spinner,
-	FlexItem,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { useContext, useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import { chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import TabPanelLayout from './tab-panel-layout';
+import { unlock } from '../../../lock-unlock';
 import { FontLibraryContext } from './context';
-import LibraryFontDetails from './library-font-details';
+import FontFaceDemo from './font-demo';
 import LibraryFontCard from './library-font-card';
-import ConfirmDeleteDialog from './confirm-delete-dialog';
-import { unlock } from '../../../lock-unlock';
+import LibraryFontVariant from './library-font-variant';
+import { sortFontFaces } from './utils/sort-font-faces';
 const { ProgressBar } = unlock( componentsPrivateApis );
 
 function InstalledFonts() {
@@ -38,44 +40,37 @@ function InstalledFonts() {
 		refreshLibrary,
 		uninstallFontFamily,
 		isResolvingLibrary,
+		isInstalling,
+		saveFontFamilies,
+		fontFamiliesHasChanges,
 		notice,
 		setNotice,
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
 
-	const handleConfirmUninstall = async () => {
-		setNotice( null );
-
-		try {
-			await uninstallFontFamily( libraryFontSelected );
-			setNotice( {
-				type: 'success',
-				message: __( 'Font family uninstalled successfully.' ),
-			} );
-
-			// If the font was succesfully uninstalled it is unselected.
-			handleSetLibraryFontSelected( null );
-			setIsConfirmDeleteOpen( false );
-		} catch ( error ) {
-			setNotice( {
-				type: 'error',
-				message:
-					__( 'There was an error uninstalling the font family. ' ) +
-					error.message,
-			} );
-		}
-	};
+	const shouldDisplayDeleteButton =
+		!! libraryFontSelected && libraryFontSelected?.source !== 'theme';
 
-	const handleUninstallClick = async () => {
+	const handleUninstallClick = () => {
 		setIsConfirmDeleteOpen( true );
 	};
 
-	const handleCancelUninstall = () => {
-		setIsConfirmDeleteOpen( false );
-	};
+	const getFontFacesToDisplay = ( font ) => {
+		if ( ! font ) {
+			return [];
+		}
+		if ( ! font.fontFace || ! font.fontFace.length ) {
+			return [
+				{
+					fontFamily: font.fontFamily,
+					fontStyle: 'normal',
+					fontWeight: '400',
+				},
+			 ]
+		}
+		return sortFontFaces ( font.fontFace );
+	}
 
-	const shouldDisplayDeleteButton =
-		!! libraryFontSelected && libraryFontSelected?.source !== 'theme';
 
 	useEffect( () => {
 		handleSetLibraryFontSelected( libraryFontSelected );
@@ -83,86 +78,87 @@ function InstalledFonts() {
 	}, [] );
 
 	return (
-		<TabPanelLayout
-			notice={ notice }
-			footer={
-				<Footer
-					shouldDisplayDeleteButton={ shouldDisplayDeleteButton }
-					handleUninstallClick={ handleUninstallClick }
-				/>
-			}
-		>
-			<ConfirmDeleteDialog
-				font={ libraryFontSelected }
-				isConfirmDeleteOpen={ isConfirmDeleteOpen }
-				handleConfirmUninstall={ handleConfirmUninstall }
-				handleCancelUninstall={ handleCancelUninstall }
-			/>
+		<div className="font-library-modal__tabpanel-layout">
 
 			{ isResolvingLibrary && (
-				<FlexItem>
-					<Spacer margin={ 2 } />
+				<HStack align="center">
+					<Spacer/>
 					<Spinner />
-					<Spacer margin={ 2 } />
-				</FlexItem>
+					<Spacer/>
+				</HStack>
+			) }
+
+			{ notice && (
+				<>
+					<Spacer margin={ 1 } />
+					<Notice
+						status={ notice.type }
+						onRemove={ () => setNotice( null ) }
+					>
+						{ notice.message }
+					</Notice>
+					<Spacer margin={ 1 } />
+				</>
 			) }
 
 			<NavigatorProvider initialPath="/">
 				<NavigatorScreen path="/">
-					{ baseCustomFonts.length > 0 && (
-						<>
-							<Text className="font-library-modal__subtitle">
-								{ __( 'Installed Fonts' ) }
-							</Text>
-
-							<Spacer margin={ 2 } />
-
-							{ baseCustomFonts.map( ( font ) => (
-								<LibraryFontCard
-									font={ font }
-									key={ font.slug }
-									onClick={ () => {
-										handleSetLibraryFontSelected( font );
-									} }
-								/>
-							) ) }
-							<Spacer margin={ 8 } />
-						</>
-					) }
-
-					{ baseThemeFonts.length > 0 && (
-						<>
-							<Text className="font-library-modal__subtitle">
-								{ __( 'Theme Fonts' ) }
-							</Text>
-
-							<Spacer margin={ 2 } />
-
-							{ baseThemeFonts.map( ( font ) => (
-								<LibraryFontCard
-									font={ font }
-									key={ font.slug }
-									onClick={ () => {
-										handleSetLibraryFontSelected( font );
-									} }
-								/>
-							) ) }
-						</>
-					) }
+					{ baseCustomFonts.length > 0 && ( <>
+						<Text className="font-library-modal__subtitle">
+							{ __( 'Installed Fonts' ) }
+						</Text>
+						<Spacer margin={ 2 } />
+						{ baseCustomFonts.map( ( font ) => (
+							<LibraryFontCard
+								font={ font }
+								key={ font.slug }
+								onClick={ () => {
+									handleSetLibraryFontSelected( font );
+								} }
+							/>
+						) ) }
+						<Spacer margin={ 8 } />
+					</> ) }
+
+					{ baseThemeFonts.length > 0 && ( <>
+						<Text className="font-library-modal__subtitle">
+							{ __( 'Theme Fonts' ) }
+						</Text>
+						<Spacer margin={ 2 } />
+						{ baseThemeFonts.map( ( font ) => (
+							<LibraryFontCard
+								font={ font }
+								key={ font.slug }
+								onClick={ () => {
+									handleSetLibraryFontSelected( font );
+								} }
+							/>
+						) ) }
+					</> ) }
 					<Spacer margin={ 16 } />
 				</NavigatorScreen>
 
 				<NavigatorScreen path="/fontFamily">
+
+					<ConfirmDeleteDialog
+						font={ libraryFontSelected }
+						isOpen={ isConfirmDeleteOpen }
+						setIsOpen={ setIsConfirmDeleteOpen }
+						setNotice={ setNotice }
+						uninstallFontFamily={ uninstallFontFamily }
+						handleSetLibraryFontSelected={ handleSetLibraryFontSelected }
+					/>
+
 					<HStack spacing={ 2 } aligh="left">
 						<NavigatorToParentButton
 							icon={ chevronLeft }
 							isSmall
+							onClick={ () => {
+								handleSetLibraryFontSelected( null );
+							} }
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
-
-						<Heading level={ 2 } size={ 13 }>
-							{ libraryFontSelected?.name }
-						</Heading>
+						<FontFaceDemo font={ libraryFontSelected } />
 					</HStack>
 					<Spacer margin={ 4 } />
 					<Text>
@@ -170,45 +166,100 @@ function InstalledFonts() {
 							'Choose font variants. Keep in mind that too many variants could make your site slower.'
 						) }
 					</Text>
+					<Spacer margin={ 4 } />
+					<VStack spacing={ 0 }>
+						<Spacer margin={ 8 } />
+						{ getFontFacesToDisplay( libraryFontSelected ).map( ( face, i ) => (
+						<LibraryFontVariant
+							font={ libraryFontSelected }
+							face={ face }
+							key={ `face${ i }` }
+						/>
+						) ) }
+					</VStack>
 
-					<LibraryFontDetails
-						font={ libraryFontSelected }
-						isConfirmDeleteOpen={ isConfirmDeleteOpen }
-						handleConfirmUninstall={ handleConfirmUninstall }
-						handleCancelUninstall={ handleCancelUninstall }
-					/>
 				</NavigatorScreen>
 			</NavigatorProvider>
-		</TabPanelLayout>
+
+			<HStack justify="flex-end" className="font-library-modal__tabpanel-layout__footer">
+				{ isInstalling && <ProgressBar /> }
+				{ shouldDisplayDeleteButton && (
+				<Button
+					isDestructive
+					variant="tertiary"
+					onClick={ handleUninstallClick }
+				>
+					{ __( 'Delete' ) }
+				</Button>
+				) }
+				<Button
+					variant="primary"
+					onClick={ saveFontFamilies }
+					disabled={ ! fontFamiliesHasChanges }
+					__experimentalIsFocusable
+				>
+					{ __( 'Update' ) }
+				</Button>
+			</HStack>
+		</div>
 	);
 }
 
-function Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {
-	const { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =
-		useContext( FontLibraryContext );
+function ConfirmDeleteDialog( {
+	font,
+	isOpen,
+	setIsOpen,
+	setNotice,
+	uninstallFontFamily,
+	handleSetLibraryFontSelected
+} ) {
+
+	const navigator = useNavigator();
+
+	const handleConfirmUninstall = async () => {
+		setNotice( null );
+
+		try {
+			await uninstallFontFamily( font );
+			setNotice( {
+				type: 'success',
+				message: __( 'Font family uninstalled successfully.' ),
+			} );
+
+			navigator.goBack();
+			handleSetLibraryFontSelected( null );
+			setIsOpen( false );
+		} catch ( error ) {
+			setNotice( {
+				type: 'error',
+				message:
+					__( 'There was an error uninstalling the font family. ' ) +
+					error.message,
+			} );
+		}
+	};
+
+	const handleCancelUninstall = () => {
+		setIsOpen( false );
+	};
+
 	return (
-		<HStack justify="flex-end">
-			{ isInstalling && <ProgressBar /> }
-			<div>
-				{ shouldDisplayDeleteButton && (
-					<Button
-						isDestructive
-						variant="tertiary"
-						onClick={ handleUninstallClick }
-					>
-						{ __( 'Delete' ) }
-					</Button>
+		<ConfirmDialog
+			isOpen={ isOpen }
+			cancelButtonText={ __( 'Cancel' ) }
+			confirmButtonText={ __( 'Delete' ) }
+			onCancel={ handleCancelUninstall }
+			onConfirm={ handleConfirmUninstall }
+		>
+			{ font &&
+				sprintf(
+					/* translators: %s: Name of the font. */
+					__(
+						'Are you sure you want to delete "%s" font and all its variants and assets?'
+					),
+					font.name
 				) }
-			</div>
-			<Button
-				variant="primary"
-				onClick={ saveFontFamilies }
-				disabled={ ! fontFamiliesHasChanges }
-				__experimentalIsFocusable
-			>
-				{ __( 'Update' ) }
-			</Button>
-		</HStack>
+		</ConfirmDialog>
 	);
 }
 

From ba70ff31654b298208cd4ec96a4dee2ab97d0963 Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Tue, 20 Feb 2024 10:02:17 -0500
Subject: [PATCH 05/15] Refactored Font Collection tab to use Navigator
 Provider, refactored Font Card to handle navigator transitions and
 consolidated components when possible

---
 .../collection-font-details.js                |  56 ---
 .../confirm-delete-dialog.js                  |  33 --
 .../font-library-modal/font-card.js           |  12 +-
 .../font-library-modal/font-collection.js     | 458 ++++++++++--------
 .../font-library-modal/installed-fonts.js     | 148 +++---
 .../font-library-modal/library-font-card.js   |  45 --
 .../font-library-modal/style.scss             |   3 +
 7 files changed, 355 insertions(+), 400 deletions(-)
 delete mode 100644 packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js
 delete mode 100644 packages/edit-site/src/components/global-styles/font-library-modal/confirm-delete-dialog.js
 delete mode 100644 packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js
deleted file mode 100644
index a696295266193..0000000000000
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalVStack as VStack,
-	__experimentalSpacer as Spacer,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import CollectionFontVariant from './collection-font-variant';
-import { isFontFontFaceInOutline } from './utils/fonts-outline';
-import { sortFontFaces } from './utils/sort-font-faces';
-
-function CollectionFontDetails( {
-	font,
-	handleToggleVariant,
-	fontToInstallOutline,
-} ) {
-	const fontFaces =
-		font.fontFace && font.fontFace.length
-			? sortFontFaces( font.fontFace )
-			: [
-					{
-						fontFamily: font.fontFamily,
-						fontStyle: 'normal',
-						fontWeight: '400',
-					},
-			  ];
-
-	return (
-		<>
-			<Spacer margin={ 4 } />
-			<VStack spacing={ 0 }>
-				<Spacer margin={ 8 } />
-				{ fontFaces.map( ( face, i ) => (
-					<CollectionFontVariant
-						font={ font }
-						face={ face }
-						key={ `face${ i }` }
-						handleToggleVariant={ handleToggleVariant }
-						selected={ isFontFontFaceInOutline(
-							font.slug,
-							font.fontFace ? face : null, // If the font has no fontFace, we want to check if the font is in the outline
-							fontToInstallOutline
-						) }
-					/>
-				) ) }
-			</VStack>
-			<Spacer margin={ 16 } />
-		</>
-	);
-}
-
-export default CollectionFontDetails;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/confirm-delete-dialog.js b/packages/edit-site/src/components/global-styles/font-library-modal/confirm-delete-dialog.js
deleted file mode 100644
index b87a921bd35e5..0000000000000
--- a/packages/edit-site/src/components/global-styles/font-library-modal/confirm-delete-dialog.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
-
-function ConfirmDeleteDialog( {
-	font,
-	isConfirmDeleteOpen,
-	handleConfirmUninstall,
-	handleCancelUninstall,
-} ) {
-	return (
-		<ConfirmDialog
-			isOpen={ isConfirmDeleteOpen }
-			cancelButtonText={ __( 'Cancel' ) }
-			confirmButtonText={ __( 'Delete' ) }
-			onCancel={ handleCancelUninstall }
-			onConfirm={ handleConfirmUninstall }
-		>
-			{ font &&
-				sprintf(
-					/* translators: %s: Name of the font. */
-					__(
-						'Are you sure you want to delete "%s" font and all its variants and assets?'
-					),
-					font.name
-				) }
-		</ConfirmDialog>
-	);
-}
-
-export default ConfirmDeleteDialog;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
index e2034e0189b46..8728e5d61b22a 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-card.js
@@ -3,6 +3,7 @@
  */
 import { _n, sprintf } from '@wordpress/i18n';
 import {
+	__experimentalUseNavigator as useNavigator,
 	__experimentalText as Text,
 	Button,
 	Flex,
@@ -16,16 +17,23 @@ import {
 import FontDemo from './font-demo';
 import { chevronRight } from '@wordpress/icons';
 
-function FontCard( { font, onClick, variantsText } ) {
+function FontCard( { font, onClick, variantsText, navigatorPath } ) {
 	const variantsCount = font.fontFace?.length || 1;
 
 	const style = {
 		cursor: !! onClick ? 'pointer' : 'default',
 	};
 
+	const navigator = useNavigator();
+
 	return (
 		<Button
-			onClick={ onClick }
+			onClick={ () => {
+				onClick();
+				if ( navigatorPath ) {
+					navigator.goTo( navigatorPath );
+				}
+			} }
 			style={ style }
 			className="font-library-modal__font-card"
 		>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index 74daf15640ffa..ae28836594064 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -13,6 +13,11 @@ import {
 	__experimentalInputControl as InputControl,
 	__experimentalText as Text,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalHeading as Heading,
 	SelectControl,
 	Spinner,
 	Icon,
@@ -23,7 +28,7 @@ import {
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
-import { search, closeSmall, moreVertical } from '@wordpress/icons';
+import { search, closeSmall, moreVertical, chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -32,11 +37,16 @@ import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
 import FontCard from './font-card';
 import filterFonts from './utils/filter-fonts';
-import CollectionFontDetails from './collection-font-details';
 import { toggleFont } from './utils/toggleFont';
-import { getFontsOutline } from './utils/fonts-outline';
+import {
+	getFontsOutline,
+	isFontFontFaceInOutline,
+} from './utils/fonts-outline';
 import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
 import { downloadFontFaceAssets } from './utils';
+import { sortFontFaces } from './utils/sort-font-faces';
+import CollectionFontVariant from './collection-font-variant';
+import FontFaceDemo from './font-demo';
 
 const DEFAULT_CATEGORY = {
 	slug: 'all',
@@ -60,8 +70,14 @@ function FontCollection( { slug } ) {
 	const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
 		requiresPermission && ! getGoogleFontsPermissionFromStorage()
 	);
-	const { collections, getFontCollection, installFont, notice, setNotice } =
-		useContext( FontLibraryContext );
+	const {
+		collections,
+		getFontCollection,
+		installFont,
+		isInstalling,
+		notice,
+		setNotice,
+	} = useContext( FontLibraryContext );
 	const selectedCollection = collections.find(
 		( collection ) => collection.slug === slug
 	);
@@ -153,10 +169,6 @@ function FontCollection( { slug } ) {
 		setPage( 1 );
 	};
 
-	const handleUnselectFont = () => {
-		setSelectedFont( null );
-	};
-
 	const handleToggleVariant = ( font, face ) => {
 		const newFontsToInstall = toggleFont( font, face, fontsToInstall );
 		setFontsToInstall( newFontsToInstall );
@@ -212,21 +224,28 @@ function FontCollection( { slug } ) {
 		resetFontsToInstall();
 	};
 
-	let footerComponent = null;
-	if ( selectedFont ) {
-		footerComponent = (
-			<InstallFooter
-				handleInstall={ handleInstall }
-				isDisabled={ fontsToInstall.length === 0 }
-			/>
-		);
-	} else if ( ! renderConfirmDialog && totalPages > 1 ) {
-		footerComponent = (
-			<PaginationFooter
-				page={ page }
-				totalPages={ totalPages }
-				setPage={ setPage }
-			/>
+	const getSortedFontFaces = ( fontFamily ) => {
+		if ( ! fontFamily ) {
+			return [];
+		}
+		if ( ! fontFamily.fontFace || ! fontFamily.fontFace.length ) {
+			return [
+				{
+					fontFamily: fontFamily.fontFamily,
+					fontStyle: 'normal',
+					fontWeight: '400',
+				},
+			];
+		}
+		return sortFontFaces( fontFamily.fontFace );
+	};
+
+	if ( renderConfirmDialog ) {
+		return (
+			<TabPanelLayout notice={ notice }>
+				<Spacer margin={ 8 } />
+				<GoogleFontsConfirmDialog />
+			</TabPanelLayout>
 		);
 	}
 
@@ -252,194 +271,223 @@ function FontCollection( { slug } ) {
 	};
 
 	return (
-		<TabPanelLayout
-			title={
-				! selectedFont ? selectedCollection.name : selectedFont.name
-			}
-			actions={ <ActionsComponent /> }
-			description={
-				! selectedFont
-					? selectedCollection.description
-					: __( 'Select font variants to install.' )
-			}
-			notice={ notice }
-			handleBack={ !! selectedFont && handleUnselectFont }
-			footer={ footerComponent }
-		>
-			{ renderConfirmDialog && (
-				<>
-					<Spacer margin={ 8 } />
-					<GoogleFontsConfirmDialog />
-				</>
-			) }
-
-			{ ! renderConfirmDialog && ! selectedFont && (
-				<Flex>
-					<FlexItem>
-						<InputControl
-							value={ filters.search }
-							placeholder={ __( 'Font name…' ) }
-							label={ __( 'Search' ) }
-							onChange={ debouncedUpdateSearchInput }
-							prefix={ <Icon icon={ search } /> }
-							suffix={
-								filters?.search ? (
-									<Icon
-										icon={ closeSmall }
-										onClick={ resetSearch }
-									/>
-								) : null
-							}
-						/>
-					</FlexItem>
-					<FlexItem>
-						<SelectControl
-							label={ __( 'Category' ) }
-							value={ filters.category }
-							onChange={ handleCategoryFilter }
-						>
-							{ categories &&
-								categories.map( ( category ) => (
-									<option
-										value={ category.slug }
-										key={ category.slug }
-									>
-										{ category.name }
-									</option>
-								) ) }
-						</SelectControl>
-					</FlexItem>
-				</Flex>
-			) }
-
-			<Spacer margin={ 4 } />
-			{ ! renderConfirmDialog &&
-				! selectedCollection?.font_families &&
-				! notice && <Spinner /> }
-
-			{ ! renderConfirmDialog &&
-				!! selectedCollection?.font_families?.length &&
-				! fonts.length && (
-					<Text>
-						{ __(
-							'No fonts found. Try with a different search term'
+		<div className="font-library-modal__tabpanel-layout">
+			<NavigatorProvider
+				initialPath="/"
+				className="font-library-modal__tabpanel-layout"
+			>
+				<NavigatorScreen path="/">
+					<HStack justify="space-between">
+						<Heading level={ 2 } size={ 13 }>
+							{ selectedCollection.name }
+						</Heading>
+						<ActionsComponent />
+					</HStack>
+					<Text>{ selectedCollection.description }</Text>
+					<Spacer margin={ 4 } />
+					<Flex>
+						<FlexItem>
+							<InputControl
+								value={ filters.search }
+								placeholder={ __( 'Font name…' ) }
+								label={ __( 'Search' ) }
+								onChange={ debouncedUpdateSearchInput }
+								prefix={ <Icon icon={ search } /> }
+								suffix={
+									filters?.search ? (
+										<Icon
+											icon={ closeSmall }
+											onClick={ resetSearch }
+										/>
+									) : null
+								}
+							/>
+						</FlexItem>
+						<FlexItem>
+							<SelectControl
+								label={ __( 'Category' ) }
+								value={ filters.category }
+								onChange={ handleCategoryFilter }
+							>
+								{ categories &&
+									categories.map( ( category ) => (
+										<option
+											value={ category.slug }
+											key={ category.slug }
+										>
+											{ category.name }
+										</option>
+									) ) }
+							</SelectControl>
+						</FlexItem>
+					</Flex>
+
+					<Spacer margin={ 4 } />
+
+					{ ! selectedCollection?.font_families && ! notice && (
+						<Spinner />
+					) }
+
+					{ !! selectedCollection?.font_families?.length &&
+						! fonts.length && (
+							<Text>
+								{ __(
+									'No fonts found. Try with a different search term'
+								) }
+							</Text>
 						) }
-					</Text>
-				) }
-
-			{ ! renderConfirmDialog && selectedFont && (
-				<CollectionFontDetails
-					font={ selectedFont }
-					handleToggleVariant={ handleToggleVariant }
-					fontToInstallOutline={ fontToInstallOutline }
-				/>
-			) }
 
-			{ ! renderConfirmDialog && ! selectedFont && (
-				<div className="font-library-modal__fonts-grid__main">
-					{ items.map( ( font ) => (
-						<FontCard
-							key={ font.font_family_settings.slug }
-							font={ font.font_family_settings }
+					<div className="font-library-modal__fonts-grid__main">
+						{ items.map( ( font ) => (
+							<FontCard
+								key={ font.font_family_settings.slug }
+								font={ font.font_family_settings }
+								navigatorPath={ '/fontFamily' }
+								onClick={ () => {
+									setSelectedFont(
+										font.font_family_settings
+									);
+								} }
+							/>
+						) ) }
+					</div>
+				</NavigatorScreen>
+
+				<NavigatorScreen path="/fontFamily">
+					<HStack spacing={ 2 } aligh="left">
+						<NavigatorToParentButton
+							icon={ chevronLeft }
+							isSmall
 							onClick={ () => {
-								setSelectedFont( font.font_family_settings );
+								setSelectedFont( null );
 							} }
+							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
-					) ) }
-				</div>
+						<FontFaceDemo font={ selectedFont } />
+					</HStack>
+					<Spacer margin={ 4 } />
+					<Text> { __( 'Select font variants to install.' ) } </Text>
+					<Spacer margin={ 4 } />
+					<VStack spacing={ 0 }>
+						<Spacer margin={ 8 } />
+						{ getSortedFontFaces( selectedFont ).map(
+							( face, i ) => (
+								<CollectionFontVariant
+									font={ selectedFont }
+									face={ face }
+									key={ `face${ i }` }
+									handleToggleVariant={ handleToggleVariant }
+									selected={ isFontFontFaceInOutline(
+										selectedFont.slug,
+										selectedFont.fontFace ? face : null, // If the font has no fontFace, we want to check if the font is in the outline
+										fontToInstallOutline
+									) }
+								/>
+							)
+						) }
+					</VStack>
+					<Spacer margin={ 16 } />
+				</NavigatorScreen>
+			</NavigatorProvider>
+
+			{ selectedFont && (
+				<Flex
+					justify="flex-end"
+					className="font-library-modal__tabpanel-layout__footer"
+				>
+					<Button
+						variant="primary"
+						onClick={ handleInstall }
+						isBusy={ isInstalling }
+						disabled={ fontsToInstall.length === 0 || isInstalling }
+						__experimentalIsFocusable
+					>
+						{ __( 'Install' ) }
+					</Button>
+				</Flex>
 			) }
-		</TabPanelLayout>
-	);
-}
 
-function PaginationFooter( { page, totalPages, setPage } ) {
-	return (
-		<Flex justify="center">
-			<Button
-				label={ __( 'First page' ) }
-				size="compact"
-				onClick={ () => setPage( 1 ) }
-				disabled={ page === 1 }
-				__experimentalIsFocusable
-			>
-				<span>«</span>
-			</Button>
-			<Button
-				label={ __( 'Previous page' ) }
-				size="compact"
-				onClick={ () => setPage( page - 1 ) }
-				disabled={ page === 1 }
-				__experimentalIsFocusable
-			>
-				<span>‹</span>
-			</Button>
-			<HStack justify="flex-start" expanded={ false } spacing={ 2 }>
-				{ createInterpolateElement(
-					sprintf(
-						// translators: %s: Total number of pages.
-						_x( 'Page <CurrenPageControl /> of %s', 'paging' ),
-						totalPages
-					),
-					{
-						CurrenPageControl: (
-							<SelectControl
-								aria-label={ __( 'Current page' ) }
-								value={ page }
-								options={ [ ...Array( totalPages ) ].map(
-									( e, i ) => {
-										return {
-											label: i + 1,
-											value: i + 1,
-										};
-									}
-								) }
-								onChange={ ( newPage ) =>
-									setPage( parseInt( newPage ) )
-								}
-								size={ 'compact' }
-								__nextHasNoMarginBottom
-							/>
-						),
-					}
-				) }
-			</HStack>
-			<Button
-				label={ __( 'Next page' ) }
-				size="compact"
-				onClick={ () => setPage( page + 1 ) }
-				disabled={ page === totalPages }
-				__experimentalIsFocusable
-			>
-				<span>›</span>
-			</Button>
-			<Button
-				label={ __( 'Last page' ) }
-				size="compact"
-				onClick={ () => setPage( totalPages ) }
-				disabled={ page === totalPages }
-				__experimentalIsFocusable
-			>
-				<span>»</span>
-			</Button>
-		</Flex>
-	);
-}
-
-function InstallFooter( { handleInstall, isDisabled } ) {
-	const { isInstalling } = useContext( FontLibraryContext );
-
-	return (
-		<Flex justify="flex-end">
-			<Button
-				variant="primary"
-				onClick={ handleInstall }
-				isBusy={ isInstalling }
-				disabled={ isDisabled || isInstalling }
-				__experimentalIsFocusable
-			>
-				{ __( 'Install' ) }
-			</Button>
-		</Flex>
+			{ ! selectedFont && (
+				<Flex
+					justify="center"
+					className="font-library-modal__tabpanel-layout__footer"
+				>
+					<Button
+						label={ __( 'First page' ) }
+						size="compact"
+						onClick={ () => setPage( 1 ) }
+						disabled={ page === 1 }
+						__experimentalIsFocusable
+					>
+						<span>«</span>
+					</Button>
+					<Button
+						label={ __( 'Previous page' ) }
+						size="compact"
+						onClick={ () => setPage( page - 1 ) }
+						disabled={ page === 1 }
+						__experimentalIsFocusable
+					>
+						<span>‹</span>
+					</Button>
+					<HStack
+						justify="flex-start"
+						expanded={ false }
+						spacing={ 2 }
+					>
+						{ createInterpolateElement(
+							sprintf(
+								// translators: %s: Total number of pages.
+								_x(
+									'Page <CurrenPageControl /> of %s',
+									'paging'
+								),
+								totalPages
+							),
+							{
+								CurrenPageControl: (
+									<SelectControl
+										aria-label={ __( 'Current page' ) }
+										value={ page }
+										options={ [
+											...Array( totalPages ),
+										].map( ( e, i ) => {
+											return {
+												label: i + 1,
+												value: i + 1,
+											};
+										} ) }
+										onChange={ ( newPage ) =>
+											setPage( parseInt( newPage ) )
+										}
+										size={ 'compact' }
+										__nextHasNoMarginBottom
+									/>
+								),
+							}
+						) }
+					</HStack>
+					<Button
+						label={ __( 'Next page' ) }
+						size="compact"
+						onClick={ () => setPage( page + 1 ) }
+						disabled={ page === totalPages }
+						__experimentalIsFocusable
+					>
+						<span>›</span>
+					</Button>
+					<Button
+						label={ __( 'Last page' ) }
+						size="compact"
+						onClick={ () => setPage( totalPages ) }
+						disabled={ page === totalPages }
+						__experimentalIsFocusable
+					>
+						<span>»</span>
+					</Button>
+				</Flex>
+			) }
+		</div>
 	);
 }
 
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
index 6f55cb4b4ea81..94f196d9c730b 100644
--- 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
@@ -17,7 +17,7 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useContext, useEffect, useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { chevronLeft } from '@wordpress/icons';
 
 /**
@@ -26,7 +26,7 @@ import { chevronLeft } from '@wordpress/icons';
 import { unlock } from '../../../lock-unlock';
 import { FontLibraryContext } from './context';
 import FontFaceDemo from './font-demo';
-import LibraryFontCard from './library-font-card';
+import FontCard from './font-card';
 import LibraryFontVariant from './library-font-variant';
 import { sortFontFaces } from './utils/sort-font-faces';
 const { ProgressBar } = unlock( componentsPrivateApis );
@@ -42,6 +42,7 @@ function InstalledFonts() {
 		isResolvingLibrary,
 		isInstalling,
 		saveFontFamilies,
+		getFontFacesActivated,
 		fontFamiliesHasChanges,
 		notice,
 		setNotice,
@@ -66,11 +67,25 @@ function InstalledFonts() {
 					fontStyle: 'normal',
 					fontWeight: '400',
 				},
-			 ]
+			];
 		}
-		return sortFontFaces ( font.fontFace );
-	}
+		return sortFontFaces( font.fontFace );
+	};
 
+	const getFontCardVariantsText = ( font ) => {
+		const variantsInstalled =
+			font?.fontFace?.length > 0 ? font.fontFace.length : 1;
+		const variantsActive = getFontFacesActivated(
+			font.slug,
+			font.source
+		).length;
+		return sprintf(
+			/* translators: 1: Active font variants, 2: Total font variants. */
+			__( '%1$s/%2$s variants active' ),
+			variantsActive,
+			variantsInstalled
+		);
+	};
 
 	useEffect( () => {
 		handleSetLibraryFontSelected( libraryFontSelected );
@@ -79,12 +94,11 @@ function InstalledFonts() {
 
 	return (
 		<div className="font-library-modal__tabpanel-layout">
-
 			{ isResolvingLibrary && (
 				<HStack align="center">
-					<Spacer/>
+					<Spacer />
 					<Spinner />
-					<Spacer/>
+					<Spacer />
 				</HStack>
 			) }
 
@@ -103,50 +117,63 @@ function InstalledFonts() {
 
 			<NavigatorProvider initialPath="/">
 				<NavigatorScreen path="/">
-					{ baseCustomFonts.length > 0 && ( <>
-						<Text className="font-library-modal__subtitle">
-							{ __( 'Installed Fonts' ) }
-						</Text>
-						<Spacer margin={ 2 } />
-						{ baseCustomFonts.map( ( font ) => (
-							<LibraryFontCard
-								font={ font }
-								key={ font.slug }
-								onClick={ () => {
-									handleSetLibraryFontSelected( font );
-								} }
-							/>
-						) ) }
-						<Spacer margin={ 8 } />
-					</> ) }
+					{ baseCustomFonts.length > 0 && (
+						<>
+							<Text className="font-library-modal__subtitle">
+								{ __( 'Installed Fonts' ) }
+							</Text>
+							<Spacer margin={ 2 } />
+							{ baseCustomFonts.map( ( font ) => (
+								<FontCard
+									font={ font }
+									key={ font.slug }
+									navigatorPath={ '/fontFamily' }
+									variantsText={ getFontCardVariantsText(
+										font
+									) }
+									onClick={ () => {
+										handleSetLibraryFontSelected( font );
+									} }
+								/>
+							) ) }
+							<Spacer margin={ 8 } />
+						</>
+					) }
 
-					{ baseThemeFonts.length > 0 && ( <>
-						<Text className="font-library-modal__subtitle">
-							{ __( 'Theme Fonts' ) }
-						</Text>
-						<Spacer margin={ 2 } />
-						{ baseThemeFonts.map( ( font ) => (
-							<LibraryFontCard
-								font={ font }
-								key={ font.slug }
-								onClick={ () => {
-									handleSetLibraryFontSelected( font );
-								} }
-							/>
-						) ) }
-					</> ) }
+					{ baseThemeFonts.length > 0 && (
+						<>
+							<Text className="font-library-modal__subtitle">
+								{ __( 'Theme Fonts' ) }
+							</Text>
+							<Spacer margin={ 2 } />
+							{ baseThemeFonts.map( ( font ) => (
+								<FontCard
+									font={ font }
+									key={ font.slug }
+									navigatorPath={ '/fontFamily' }
+									variantsText={ getFontCardVariantsText(
+										font
+									) }
+									onClick={ () => {
+										handleSetLibraryFontSelected( font );
+									} }
+								/>
+							) ) }
+						</>
+					) }
 					<Spacer margin={ 16 } />
 				</NavigatorScreen>
 
 				<NavigatorScreen path="/fontFamily">
-
 					<ConfirmDeleteDialog
 						font={ libraryFontSelected }
 						isOpen={ isConfirmDeleteOpen }
 						setIsOpen={ setIsConfirmDeleteOpen }
 						setNotice={ setNotice }
 						uninstallFontFamily={ uninstallFontFamily }
-						handleSetLibraryFontSelected={ handleSetLibraryFontSelected }
+						handleSetLibraryFontSelected={
+							handleSetLibraryFontSelected
+						}
 					/>
 
 					<HStack spacing={ 2 } aligh="left">
@@ -169,28 +196,32 @@ function InstalledFonts() {
 					<Spacer margin={ 4 } />
 					<VStack spacing={ 0 }>
 						<Spacer margin={ 8 } />
-						{ getFontFacesToDisplay( libraryFontSelected ).map( ( face, i ) => (
-						<LibraryFontVariant
-							font={ libraryFontSelected }
-							face={ face }
-							key={ `face${ i }` }
-						/>
-						) ) }
+						{ getFontFacesToDisplay( libraryFontSelected ).map(
+							( face, i ) => (
+								<LibraryFontVariant
+									font={ libraryFontSelected }
+									face={ face }
+									key={ `face${ i }` }
+								/>
+							)
+						) }
 					</VStack>
-
 				</NavigatorScreen>
 			</NavigatorProvider>
 
-			<HStack justify="flex-end" className="font-library-modal__tabpanel-layout__footer">
+			<HStack
+				justify="flex-end"
+				className="font-library-modal__tabpanel-layout__footer"
+			>
 				{ isInstalling && <ProgressBar /> }
 				{ shouldDisplayDeleteButton && (
-				<Button
-					isDestructive
-					variant="tertiary"
-					onClick={ handleUninstallClick }
-				>
-					{ __( 'Delete' ) }
-				</Button>
+					<Button
+						isDestructive
+						variant="tertiary"
+						onClick={ handleUninstallClick }
+					>
+						{ __( 'Delete' ) }
+					</Button>
 				) }
 				<Button
 					variant="primary"
@@ -211,9 +242,8 @@ function ConfirmDeleteDialog( {
 	setIsOpen,
 	setNotice,
 	uninstallFontFamily,
-	handleSetLibraryFontSelected
+	handleSetLibraryFontSelected,
 } ) {
-
 	const navigator = useNavigator();
 
 	const handleConfirmUninstall = async () => {
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js
deleted file mode 100644
index b84ff2ad163c3..0000000000000
--- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-card.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __, sprintf } from '@wordpress/i18n';
-import { useContext } from '@wordpress/element';
-import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import FontCard from './font-card';
-import { FontLibraryContext } from './context';
-
-function LibraryFontCard( { font, ...props } ) {
-	const { getFontFacesActivated } = useContext( FontLibraryContext );
-
-	const variantsInstalled =
-		font?.fontFace?.length > 0 ? font.fontFace.length : 1;
-	const variantsActive = getFontFacesActivated(
-		font.slug,
-		font.source
-	).length;
-	const variantsText = sprintf(
-		/* translators: 1: Active font variants, 2: Total font variants. */
-		__( '%1$s/%2$s variants active' ),
-		variantsActive,
-		variantsInstalled
-	);
-
-	const navi = useNavigator();
-
-	return (
-		<FontCard
-			font={ font }
-			variantsText={ variantsText }
-			{ ...props }
-			onClick={ () => {
-				props.onClick();
-				navi.goTo( '/fontFamily' );
-			} }
-		/>
-	);
-}
-
-export default LibraryFontCard;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index 544e3ed63c988..5fc19ac914dd1 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -25,6 +25,9 @@
 }
 
 .font-library-modal__tabpanel-layout {
+
+	margin-top: $grid-unit-40;
+
 	.font-library-modal__tabpanel-layout__footer {
 		border-top: 1px solid $gray-300;
 		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};

From 05fccb5f15e90582b869f8c638d2745ec0410567 Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Tue, 20 Feb 2024 10:06:30 -0500
Subject: [PATCH 06/15] Corrected/standardized Font Demo component name
 throughout

---
 .../font-library-modal/collection-font-variant.js             | 4 ++--
 .../global-styles/font-library-modal/font-collection.js       | 4 ++--
 .../components/global-styles/font-library-modal/font-demo.js  | 4 ++--
 .../global-styles/font-library-modal/installed-fonts.js       | 4 ++--
 .../global-styles/font-library-modal/library-font-variant.js  | 4 ++--
 5 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
index 96fd1d51d9567..70bcf788bd578 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -11,7 +11,7 @@ import {
  * Internal dependencies
  */
 import { getFontFaceVariantName } from './utils';
-import FontFaceDemo from './font-demo';
+import FontDemo from './font-demo';
 import { unlock } from '../../../lock-unlock';
 
 function CollectionFontVariant( {
@@ -44,7 +44,7 @@ function CollectionFontVariant( {
 					id={ checkboxId }
 				/>
 				<label htmlFor={ checkboxId }>
-					<FontFaceDemo
+					<FontDemo
 						font={ face }
 						text={ displayName }
 						onClick={ handleToggleActivation }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index ae28836594064..b40d56bc08622 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -46,7 +46,7 @@ import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
 import { downloadFontFaceAssets } from './utils';
 import { sortFontFaces } from './utils/sort-font-faces';
 import CollectionFontVariant from './collection-font-variant';
-import FontFaceDemo from './font-demo';
+import FontDemo from './font-demo';
 
 const DEFAULT_CATEGORY = {
 	slug: 'all',
@@ -363,7 +363,7 @@ function FontCollection( { slug } ) {
 							} }
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
-						<FontFaceDemo font={ selectedFont } />
+						<FontDemo font={ selectedFont } />
 					</HStack>
 					<Spacer margin={ 4 } />
 					<Text> { __( 'Select font variants to install.' ) } </Text>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
index a9773ab025603..4837a16e271ac 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
@@ -39,7 +39,7 @@ function getDisplayFontFace( font ) {
 	};
 }
 
-function FontFaceDemo( { font, text } ) {
+function FontDemo( { font, text } ) {
 	const ref = useRef( null );
 
 	const fontFace = getDisplayFontFace( font );
@@ -105,4 +105,4 @@ function FontFaceDemo( { font, text } ) {
 	);
 }
 
-export default FontFaceDemo;
+export default FontDemo;
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
index 94f196d9c730b..abed07750f326 100644
--- 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
@@ -25,7 +25,7 @@ import { chevronLeft } from '@wordpress/icons';
  */
 import { unlock } from '../../../lock-unlock';
 import { FontLibraryContext } from './context';
-import FontFaceDemo from './font-demo';
+import FontDemo from './font-demo';
 import FontCard from './font-card';
 import LibraryFontVariant from './library-font-variant';
 import { sortFontFaces } from './utils/sort-font-faces';
@@ -185,7 +185,7 @@ function InstalledFonts() {
 							} }
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
-						<FontFaceDemo font={ libraryFontSelected } />
+						<FontDemo font={ libraryFontSelected } />
 					</HStack>
 					<Spacer margin={ 4 } />
 					<Text>
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
index 42e8d624a742d..a60f2c6e2411d 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
@@ -13,7 +13,7 @@ import {
  */
 import { getFontFaceVariantName } from './utils';
 import { FontLibraryContext } from './context';
-import FontFaceDemo from './font-demo';
+import FontDemo from './font-demo';
 import { unlock } from '../../../lock-unlock';
 
 function LibraryFontVariant( { face, font } ) {
@@ -54,7 +54,7 @@ function LibraryFontVariant( { face, font } ) {
 					id={ checkboxId }
 				/>
 				<label htmlFor={ checkboxId }>
-					<FontFaceDemo
+					<FontDemo
 						font={ face }
 						text={ displayName }
 						onClick={ handleToggleActivation }

From e0d527d477e4b858c65e8c076a260f14fd8e22fc Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Tue, 20 Feb 2024 10:29:40 -0500
Subject: [PATCH 07/15] Fixed notice display

---
 .../font-library-modal/font-collection.js     | 13 ++++++
 .../font-library-modal/installed-fonts.js     | 45 ++++++++++++-------
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index b40d56bc08622..b5cd2da8d6d86 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -18,6 +18,7 @@ import {
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
 	__experimentalHeading as Heading,
+	Notice,
 	SelectControl,
 	Spinner,
 	Icon,
@@ -365,6 +366,18 @@ function FontCollection( { slug } ) {
 						/>
 						<FontDemo font={ selectedFont } />
 					</HStack>
+					{ notice && (
+						<>
+							<Spacer margin={ 1 } />
+							<Notice
+								status={ notice.type }
+								onRemove={ () => setNotice( null ) }
+							>
+								{ notice.message }
+							</Notice>
+							<Spacer margin={ 1 } />
+						</>
+					) }
 					<Spacer margin={ 4 } />
 					<Text> { __( 'Select font variants to install.' ) } </Text>
 					<Spacer margin={ 4 } />
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
index abed07750f326..099bf670a3e00 100644
--- 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
@@ -102,21 +102,20 @@ function InstalledFonts() {
 				</HStack>
 			) }
 
-			{ notice && (
-				<>
-					<Spacer margin={ 1 } />
-					<Notice
-						status={ notice.type }
-						onRemove={ () => setNotice( null ) }
-					>
-						{ notice.message }
-					</Notice>
-					<Spacer margin={ 1 } />
-				</>
-			) }
-
 			<NavigatorProvider initialPath="/">
 				<NavigatorScreen path="/">
+					{ notice && (
+						<>
+							<Spacer margin={ 1 } />
+							<Notice
+								status={ notice.type }
+								onRemove={ () => setNotice( null ) }
+							>
+								{ notice.message }
+							</Notice>
+							<Spacer margin={ 1 } />
+						</>
+					) }
 					{ baseCustomFonts.length > 0 && (
 						<>
 							<Text className="font-library-modal__subtitle">
@@ -187,6 +186,18 @@ function InstalledFonts() {
 						/>
 						<FontDemo font={ libraryFontSelected } />
 					</HStack>
+					{ notice && (
+						<>
+							<Spacer margin={ 1 } />
+							<Notice
+								status={ notice.type }
+								onRemove={ () => setNotice( null ) }
+							>
+								{ notice.message }
+							</Notice>
+							<Spacer margin={ 1 } />
+						</>
+					) }
 					<Spacer margin={ 4 } />
 					<Text>
 						{ __(
@@ -251,15 +262,15 @@ function ConfirmDeleteDialog( {
 
 		try {
 			await uninstallFontFamily( font );
+			setIsOpen( false );
+			navigator.goBack();
+			handleSetLibraryFontSelected( null );
 			setNotice( {
 				type: 'success',
 				message: __( 'Font family uninstalled successfully.' ),
 			} );
-
-			navigator.goBack();
-			handleSetLibraryFontSelected( null );
-			setIsOpen( false );
 		} catch ( error ) {
+			setIsOpen( false );
 			setNotice( {
 				type: 'error',
 				message:

From 4a47882c76dce82192483d30974e8bdf9735c2de Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Tue, 20 Feb 2024 13:40:50 -0500
Subject: [PATCH 08/15] Fixed focus state outline

---
 .../components/global-styles/font-library-modal/style.scss   | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index 5fc19ac914dd1..bb8afd500a6d2 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -22,6 +22,11 @@
 		font-weight: 500;
 		font-size: 11px;
 	}
+
+	// Add padding so the focus state outline (box-shadow) of font list items is visible
+	.components-navigator-screen {
+		padding: 3px;
+	}
 }
 
 .font-library-modal__tabpanel-layout {

From 9f88596747a98dd00708e8c3f59792d6ebfb35f6 Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Tue, 20 Feb 2024 14:11:11 -0500
Subject: [PATCH 09/15] Fixed secondary page heading layout

---
 .../global-styles/font-library-modal/font-collection.js  | 4 ++--
 .../global-styles/font-library-modal/installed-fonts.js  | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index b5cd2da8d6d86..1454d68ee2771 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -355,7 +355,7 @@ function FontCollection( { slug } ) {
 				</NavigatorScreen>
 
 				<NavigatorScreen path="/fontFamily">
-					<HStack spacing={ 2 } aligh="left">
+					<Flex justify="flex-start">
 						<NavigatorToParentButton
 							icon={ chevronLeft }
 							isSmall
@@ -365,7 +365,7 @@ function FontCollection( { slug } ) {
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
 						<FontDemo font={ selectedFont } />
-					</HStack>
+					</Flex>
 					{ notice && (
 						<>
 							<Spacer margin={ 1 } />
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
index 099bf670a3e00..fe810c21aa55b 100644
--- 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
@@ -9,11 +9,12 @@ import {
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
 	__experimentalUseNavigator as useNavigator,
-	Notice,
 	__experimentalSpacer as Spacer,
-	Spinner,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
+	Flex,
+	Notice,
+	Spinner,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useContext, useEffect, useState } from '@wordpress/element';
@@ -175,7 +176,7 @@ function InstalledFonts() {
 						}
 					/>
 
-					<HStack spacing={ 2 } aligh="left">
+					<Flex justify="flex-start">
 						<NavigatorToParentButton
 							icon={ chevronLeft }
 							isSmall
@@ -185,7 +186,7 @@ function InstalledFonts() {
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
 						<FontDemo font={ libraryFontSelected } />
-					</HStack>
+					</Flex>
 					{ notice && (
 						<>
 							<Spacer margin={ 1 } />

From e19cb136331fa37d0bcd78ea822930d3ad9943c6 Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Tue, 20 Feb 2024 14:17:57 -0500
Subject: [PATCH 10/15] Added hover state to font list items

---
 .../font-library-modal/collection-font-variant.js      |  2 +-
 .../font-library-modal/library-font-variant.js         |  2 +-
 .../global-styles/font-library-modal/style.scss        | 10 ++++------
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
index 70bcf788bd578..04300be95a0cf 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -35,7 +35,7 @@ function CollectionFontVariant( {
 	);
 
 	return (
-		<div className="font-library-modal__library-font-variant">
+		<div className="font-library-modal__font-card">
 			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ selected }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
index a60f2c6e2411d..a81d12bbe858d 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/library-font-variant.js
@@ -45,7 +45,7 @@ function LibraryFontVariant( { face, font } ) {
 	);
 
 	return (
-		<div className="font-library-modal__library-font-variant">
+		<div className="font-library-modal__font-card">
 			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ isInstalled }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index bb8afd500a6d2..9c6fd97adac90 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -55,6 +55,10 @@
 	padding: $grid-unit-20;
 	margin-top: -1px; /* To collapse the margin with the previous element */
 
+	&:hover {
+		background-color: $gray-100;
+	}
+
 	.font-library-modal__font-card__name {
 		font-weight: bold;
 	}
@@ -64,12 +68,6 @@
 	}
 }
 
-.font-library-modal__library-font-variant {
-	border: 1px solid $gray-200;
-	padding: $grid-unit-20;
-	margin-top: -1px; /* To collapse the margin with the previous element */
-}
-
 .font-library-modal__font-variant_demo-image {
 	display: block;
 	height: $grid-unit-30;

From 0fa200956dfacb031b216c1c6e6800a01f092563 Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Tue, 20 Feb 2024 14:56:32 -0500
Subject: [PATCH 11/15] Simplified and removed 'TabPanelLayout' component

---
 .../font-library-modal/font-collection.js     |  8 +-
 .../font-library-modal/style.scss             |  5 +-
 .../font-library-modal/tab-panel-layout.js    | 92 -------------------
 .../font-library-modal/upload-fonts.js        | 18 +++-
 4 files changed, 17 insertions(+), 106 deletions(-)
 delete mode 100644 packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index 1454d68ee2771..e744cdb87fc69 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -34,7 +34,6 @@ import { search, closeSmall, moreVertical, chevronLeft } from '@wordpress/icons'
 /**
  * Internal dependencies
  */
-import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
 import FontCard from './font-card';
 import filterFonts from './utils/filter-fonts';
@@ -242,12 +241,7 @@ function FontCollection( { slug } ) {
 	};
 
 	if ( renderConfirmDialog ) {
-		return (
-			<TabPanelLayout notice={ notice }>
-				<Spacer margin={ 8 } />
-				<GoogleFontsConfirmDialog />
-			</TabPanelLayout>
-		);
+		return <GoogleFontsConfirmDialog />;
 	}
 
 	const ActionsComponent = () => {
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index 9c6fd97adac90..cfc42aa63a5c5 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -123,6 +123,7 @@ button.font-library-modal__upload-area {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	margin-top: $grid-unit-80;
 
 	h3 {
 		font-size: 1.4rem;
@@ -130,7 +131,7 @@ button.font-library-modal__upload-area {
 
 	.components-card {
 		width: 50%;
-		min-width: 250px;
-		max-width: 350px;
+		min-width: 350px;
+		max-width: 400px;
 	}
 }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js b/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js
deleted file mode 100644
index 87a569b5500ee..0000000000000
--- a/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-import {
-	__experimentalText as Text,
-	__experimentalHeading as Heading,
-	__experimentalVStack as VStack,
-	__experimentalSpacer as Spacer,
-	__experimentalHStack as HStack,
-	Button,
-	Notice,
-	FlexBlock,
-	FlexItem,
-} from '@wordpress/components';
-import { chevronLeft } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { FontLibraryContext } from './context';
-
-function TabPanelLayout( {
-	title,
-	description,
-	notice,
-	handleBack,
-	children,
-	footer,
-	actions,
-} ) {
-	const { setNotice } = useContext( FontLibraryContext );
-
-	return (
-		<div className="font-library-modal__tabpanel-layout">
-			<Spacer margin={ 4 } />
-			<VStack spacing={ 4 } justify="space-between">
-				<VStack spacing={ 2 }>
-					<HStack
-						justify={
-							!! handleBack ? 'flex-start' : 'space-between'
-						}
-					>
-						{ !! handleBack && (
-							<Button
-								variant="tertiary"
-								onClick={ handleBack }
-								icon={ chevronLeft }
-								size="small"
-								label={ __( 'Back' ) }
-							/>
-						) }
-						{ title && (
-							<Heading
-								level={ 2 }
-								size={ 13 }
-								className="edit-site-global-styles-header"
-							>
-								{ title }
-							</Heading>
-						) }
-						{ actions && <FlexItem>{ actions }</FlexItem> }
-					</HStack>
-					{ description && <Text>{ description }</Text> }
-					{ notice && (
-						<FlexBlock>
-							<Spacer margin={ 1 } />
-							<Notice
-								status={ notice.type }
-								onRemove={ () => setNotice( null ) }
-							>
-								{ notice.message }
-							</Notice>
-							<Spacer margin={ 1 } />
-						</FlexBlock>
-					) }
-				</VStack>
-				<div className="font-library-modal__tabpanel-layout__main">
-					{ children }
-				</div>
-				{ footer && (
-					<div className="font-library-modal__tabpanel-layout__footer">
-						{ footer }
-					</div>
-				) }
-			</VStack>
-		</div>
-	);
-}
-
-export default TabPanelLayout;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
index a40534861ae96..8b53ddcdbb38a 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
@@ -3,11 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	Button,
-	DropZone,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
+	Button,
+	DropZone,
+	Notice,
 	FormFileUpload,
 	FlexItem,
 	privateApis as componentsPrivateApis,
@@ -22,7 +23,6 @@ import { FontLibraryContext } from './context';
 import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
-import TabPanelLayout from './tab-panel-layout';
 import { unlock } from '../../../lock-unlock';
 
 const { ProgressBar } = unlock( componentsPrivateApis );
@@ -171,9 +171,17 @@ function UploadFonts() {
 	};
 
 	return (
-		<TabPanelLayout notice={ notice }>
+		<div className="font-library-modal__tabpanel-layout">
 			<DropZone onFilesDrop={ handleDropZone } />
 			<VStack className="font-library-modal__local-fonts">
+				{ notice && (
+					<Notice
+						status={ notice.type }
+						onRemove={ () => setNotice( null ) }
+					>
+						{ notice.message }
+					</Notice>
+				) }
 				{ isUploading && (
 					<FlexItem>
 						<div className="font-library-modal__upload-area">
@@ -205,7 +213,7 @@ function UploadFonts() {
 					) }
 				</Text>
 			</VStack>
-		</TabPanelLayout>
+		</div>
 	);
 }
 

From 848e4eb14615ecbe71b6c8bc236bd779f5f79dfd Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Tue, 20 Feb 2024 15:50:54 -0500
Subject: [PATCH 12/15] close verify window as soon as user ansswers

---
 .../global-styles/font-library-modal/installed-fonts.js       | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

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
index fe810c21aa55b..617d1c17cc0ab 100644
--- 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
@@ -260,10 +260,9 @@ function ConfirmDeleteDialog( {
 
 	const handleConfirmUninstall = async () => {
 		setNotice( null );
-
+		setIsOpen( false );
 		try {
 			await uninstallFontFamily( font );
-			setIsOpen( false );
 			navigator.goBack();
 			handleSetLibraryFontSelected( null );
 			setNotice( {
@@ -271,7 +270,6 @@ function ConfirmDeleteDialog( {
 				message: __( 'Font family uninstalled successfully.' ),
 			} );
 		} catch ( error ) {
-			setIsOpen( false );
 			setNotice( {
 				type: 'error',
 				message:

From 44fa5758ebae66c2a145935c4c2636be6eba5f4e Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Wed, 21 Feb 2024 13:37:56 -0500
Subject: [PATCH 13/15] Fixed a bug to better support BOTH font FAMILIES as
 well as font FACES in the Font Demo component.

---
 .../global-styles/font-library-modal/font-demo.js      | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
index 4837a16e271ac..0320bdd4e4893 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-demo.js
@@ -23,6 +23,12 @@ function getPreviewUrl( fontFace ) {
 }
 
 function getDisplayFontFace( font ) {
+	// if this IS a font face return it
+	if ( font.fontStyle || font.fontWeight ) {
+		return font;
+	}
+	// if this is a font family with a collection of font faces
+	// return the first one that is normal and 400 OR just the first one
 	if ( font.fontFace && font.fontFace.length ) {
 		return (
 			font.fontFace.find(
@@ -31,6 +37,8 @@ function getDisplayFontFace( font ) {
 			) || font.fontFace[ 0 ]
 		);
 	}
+	// This must be a font family with no font faces
+	// return a fake font face
 	return {
 		fontStyle: 'normal',
 		fontWeight: '400',
@@ -60,8 +68,8 @@ function FontDemo( { font, text } ) {
 		fontSize: '18px',
 		lineHeight: 1,
 		opacity: isAssetLoaded ? '1' : '0',
-		...faceStyles,
 		...style,
+		...faceStyles,
 	};
 
 	useEffect( () => {

From aa0b118c8063e49db847dc81c00b72e5131d3eb2 Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Fri, 23 Feb 2024 09:34:08 -0500
Subject: [PATCH 14/15] Returned selected font heading to use Heading instead
 of Font Demo

---
 .../font-library-modal/font-collection.js              |  9 +++++++--
 .../font-library-modal/installed-fonts.js              | 10 ++++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index e744cdb87fc69..f60bd87dd4a02 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -46,7 +46,6 @@ import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
 import { downloadFontFaceAssets } from './utils';
 import { sortFontFaces } from './utils/sort-font-faces';
 import CollectionFontVariant from './collection-font-variant';
-import FontDemo from './font-demo';
 
 const DEFAULT_CATEGORY = {
 	slug: 'all',
@@ -358,7 +357,13 @@ function FontCollection( { slug } ) {
 							} }
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
-						<FontDemo font={ selectedFont } />
+						<Heading
+							level={ 2 }
+							size={ 13 }
+							className="edit-site-global-styles-header"
+						>
+							{ selectedFont?.name }
+						</Heading>
 					</Flex>
 					{ notice && (
 						<>
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
index 617d1c17cc0ab..a72b7d59d150c 100644
--- 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
@@ -5,6 +5,7 @@ import {
 	Button,
 	__experimentalConfirmDialog as ConfirmDialog,
 	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
@@ -26,7 +27,6 @@ import { chevronLeft } from '@wordpress/icons';
  */
 import { unlock } from '../../../lock-unlock';
 import { FontLibraryContext } from './context';
-import FontDemo from './font-demo';
 import FontCard from './font-card';
 import LibraryFontVariant from './library-font-variant';
 import { sortFontFaces } from './utils/sort-font-faces';
@@ -185,7 +185,13 @@ function InstalledFonts() {
 							} }
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
-						<FontDemo font={ libraryFontSelected } />
+						<Heading
+							level={ 2 }
+							size={ 13 }
+							className="edit-site-global-styles-header"
+						>
+							{ libraryFontSelected?.name }
+						</Heading>
 					</Flex>
 					{ notice && (
 						<>

From 143adbb610747c3eab5fc4adb3ecfd9681ba858c Mon Sep 17 00:00:00 2001
From: Jason Crist <jcrist@pbking.com>
Date: Fri, 23 Feb 2024 10:40:00 -0500
Subject: [PATCH 15/15] Fixed linting error

---
 .../global-styles/font-library-modal/font-collection.js    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index f60bd87dd4a02..01f7a90357c8b 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -29,7 +29,12 @@ import {
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
-import { search, closeSmall, moreVertical, chevronLeft } from '@wordpress/icons';
+import {
+	search,
+	closeSmall,
+	moreVertical,
+	chevronLeft,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies