Font Library: Add 'No fonts installed' message on library tab when fo…

…nts aren't available (#63740) * Add message in library tab of font modal when fonts are not available * Reset notice on font library modal open * Add e2e test for no font installed state in font library modal Co-authored-by: akasunil <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: richtabor <[email protected]>
WordPress · Jul 24, 2024 · 368d0ac · 368d0ac · github-actions · Jul 24, 2024
1 parent 8a36fd4
commit 368d0ac
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 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
@@ -26,7 +26,7 @@ import { unlock } from '../../lock-unlock';
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 function FontFamilies() {
-	const { baseCustomFonts, modalTabOpen, setModalTabOpen } =
+	const { baseCustomFonts, modalTabOpen, setModalTabOpen, setNotice } =
 		useContext( FontLibraryContext );
 	const [ fontFamilies ] = useGlobalSetting( 'typography.fontFamilies' );
 	const [ baseFontFamilies ] = useGlobalSetting(
@@ -111,13 +111,15 @@ function FontFamilies() {
 					className="edit-site-global-styles-font-families__manage-fonts"
 					variant="secondary"
 					__next40pxDefaultSize
-					onClick={ () =>
+					onClick={ () => {
+						// Reset notice when opening the modal.
+						setNotice( null );
 						setModalTabOpen(
 							hasInstalledFonts
 								? 'installed-fonts'
 								: 'upload-fonts'
-						)
-					}
+						);
+					} }
 				>
 					{ hasInstalledFonts
 						? __( 'Manage fonts' )

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
@@ -148,6 +148,7 @@ function InstalledFonts() {
 		refreshLibrary();
 	}, [] );
 
+	const hasFonts = baseThemeFonts.length > 0 || baseCustomFonts.length > 0;
 	return (
 		<div className="font-library-modal__tabpanel-layout">
 			{ isResolvingLibrary && (
@@ -173,6 +174,11 @@ function InstalledFonts() {
 										{ notice.message }
 									</Notice>
 								) }
+								{ ! hasFonts && (
+									<Text as="p">
+										{ __( 'No fonts installed.' ) }
+									</Text>
+								) }
 								{ baseThemeFonts.length > 0 && (
 									<VStack>
 										<h2 className="font-library-modal__fonts-title">

diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js
@@ -14,6 +14,24 @@ test.describe( 'Font Library', () => {
 			await editor.canvas.locator( 'body' ).click();
 		} );
 
+		test( 'should display the "no font installed." message', async ( {
+			page,
+		} ) => {
+			await page.getByRole( 'button', { name: 'Styles' } ).click();
+			await page
+				.getByRole( 'button', { name: 'Typography Styles' } )
+				.click();
+			await page
+				.getByRole( 'button', {
+					name: 'Add fonts',
+				} )
+				.click();
+			await page.getByRole( 'tab', { name: 'Library' } ).click();
+			await expect(
+				page.getByLabel( 'library' ).getByText( 'No fonts installed.' )
+			).toBeVisible();
+		} );
+
 		test( 'should display the "Add fonts" button', async ( { page } ) => {
 			await page.getByRole( 'button', { name: 'Styles' } ).click();
 			await page