Font Library: Show error message when no fonts found to install (#58914)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
Co-authored-by: okmttdhr <okat@git.wordpress.org>

packages/edit-site/src/components/global-styles/font-library-modal/context.js

@@ -61,15 +61,6 @@ function FontLibraryProvider( { children } ) {
 		setRefreshKey( Date.now() );
 	};
 
-	// Reset notice on dismiss.
-	useEffect( () => {
-		if ( notice ) {
-			notice.onRemove = () => {
-				setNotice( null );
-			};
-		}
-	}, [ notice, setNotice ] );
-
 	const {
 		records: libraryPosts = [],
 		isResolving: isResolvingLibrary,

packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useContext } from '@wordpress/element';
 import {
 	__experimentalText as Text,
 	__experimentalHeading as Heading,
@@ -14,6 +15,11 @@ import {
 import { chevronLeft } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './context';
+
 function TabPanelLayout( {
 	title,
 	description,
@@ -22,6 +28,8 @@ function TabPanelLayout( {
 	children,
 	footer,
 } ) {
+	const { setNotice } = useContext( FontLibraryContext );
+
 	return (
 		<div className="font-library-modal__tabpanel-layout">
 			<Spacer margin={ 4 } />
@@ -53,7 +61,7 @@ function TabPanelLayout( {
 							<Spacer margin={ 1 } />
 							<Notice
 								status={ notice.type }
-								onRemove={ notice.onRemove }
+								onRemove={ () => setNotice( null ) }
 							>
 								{ notice.message }
 							</Notice>

packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js

@@ -63,6 +63,12 @@ function UploadFonts() {
 		} );
 		if ( allowedFiles.length > 0 ) {
 			loadFiles( allowedFiles );
+		} else {
+			setNotice( {
+				type: 'error',
+				message: __( 'No fonts found to install.' ),
+			} );
+			setIsUploading( false );
 		}
 	};