From b8167eb0569f9933f7a1a2a25f4a3d971db3bb88 Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 19 Jul 2024 14:39:57 +0530 Subject: [PATCH 1/3] Add message in library tab of font modal when fonts are not available --- .../global-styles/font-library-modal/installed-fonts.js | 6 ++++++ 1 file changed, 6 insertions(+) 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 f3c8d73eef307e..76618a54aeb92f 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 @@ -148,6 +148,7 @@ function InstalledFonts() { refreshLibrary(); }, [] ); + const hasFonts = baseThemeFonts.length > 0 || baseCustomFonts.length > 0; return (
{ isResolvingLibrary && ( @@ -173,6 +174,11 @@ function InstalledFonts() { { notice.message } ) } + { ! hasFonts && ( + + { __( 'No fonts installed.' ) } + + ) } { baseThemeFonts.length > 0 && (

From 17571cb8838395c73cbbe414ec055bff25c60a3b Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 19 Jul 2024 14:40:34 +0530 Subject: [PATCH 2/3] Reset notice on font library modal open --- .../src/components/global-styles/font-families.js | 11 +++++++---- 1 file changed, 7 insertions(+), 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 index 811d4e66b27a0d..f1f7df23ce5458 100644 --- 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,8 @@ import { unlock } from '../../lock-unlock'; const { useGlobalSetting } = unlock( blockEditorPrivateApis ); function FontFamilies() { - const { modalTabOpen, setModalTabOpen } = useContext( FontLibraryContext ); + const { modalTabOpen, setModalTabOpen, setNotice } = + useContext( FontLibraryContext ); const [ fontFamilies ] = useGlobalSetting( 'typography.fontFamilies' ); const themeFonts = fontFamilies?.theme ? fontFamilies.theme @@ -96,11 +97,13 @@ 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( hasFonts ? 'installed-fonts' : 'upload-fonts' - ) - } + ); + } } > { hasFonts ? __( 'Manage fonts' ) : __( 'Add fonts' ) } From 9fabacc3ed665054844a54e8bc8ad162adf7332f Mon Sep 17 00:00:00 2001 From: akasunil Date: Fri, 19 Jul 2024 15:55:16 +0530 Subject: [PATCH 3/3] Add e2e test for no font installed state in font library modal --- .../e2e/specs/site-editor/font-library.spec.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/test/e2e/specs/site-editor/font-library.spec.js b/test/e2e/specs/site-editor/font-library.spec.js index 36b12eaf186c65..3025e61303c22e 100644 --- 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