Font Library: Make notices more consistent

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

@@ -55,11 +55,21 @@ function FontLibraryProvider( { children } ) {
 
 	const [ isInstalling, setIsInstalling ] = useState( false );
 	const [ refreshKey, setRefreshKey ] = useState( 0 );
+	const [ notice, setNotice ] = useState( null );
 
 	const refreshLibrary = () => {
 		setRefreshKey( Date.now() );
 	};
 
+	// Reset notice on dismiss.
+	useEffect( () => {
+		if ( notice ) {
+			notice.onRemove = () => {
+				setNotice( null );
+			};
+		}
+	}, [ notice, setNotice ] );
+
 	const {
 		records: libraryPosts = [],
 		isResolving: isResolvingLibrary,
@@ -471,6 +481,8 @@ function FontLibraryProvider( { children } ) {
 				modalTabOpen,
 				toggleModal,
 				refreshLibrary,
+				notice,
+				setNotice,
 				saveFontFamilies,
 				fontFamiliesHasChanges,
 				isResolvingLibrary,

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

@@ -12,7 +12,6 @@ import {
 	FlexItem,
 	Flex,
 	Button,
-	Notice,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
@@ -47,14 +46,13 @@ function FontCollection( { slug } ) {
 		);
 	};
 
-	const [ notice, setNotice ] = useState( null );
 	const [ selectedFont, setSelectedFont ] = useState( null );
 	const [ fontsToInstall, setFontsToInstall ] = useState( [] );
 	const [ filters, setFilters ] = useState( {} );
 	const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
 		requiresPermission && ! getGoogleFontsPermissionFromStorage()
 	);
-	const { collections, getFontCollection, installFont } =
+	const { collections, getFontCollection, installFont, notice, setNotice } =
 		useContext( FontLibraryContext );
 	const selectedCollection = collections.find(
 		( collection ) => collection.slug === slug
@@ -85,28 +83,18 @@ function FontCollection( { slug } ) {
 			}
 		};
 		fetchFontCollection();
-	}, [ slug, getFontCollection ] );
+	}, [ slug, getFontCollection, setNotice ] );
 
 	useEffect( () => {
 		setSelectedFont( null );
 		setNotice( null );
-	}, [ slug ] );
+	}, [ slug, setNotice ] );
 
 	useEffect( () => {
 		// If the selected fonts change, reset the selected fonts to install
 		setFontsToInstall( [] );
 	}, [ selectedFont ] );
 
-	// Reset notice after 5 seconds
-	useEffect( () => {
-		if ( notice && notice?.duration !== 0 ) {
-			const timeout = setTimeout( () => {
-				setNotice( null );
-			}, notice.duration ?? 5000 );
-			return () => clearTimeout( timeout );
-		}
-	}, [ notice ] );
-
 	const collectionFonts = useMemo(
 		() => selectedCollection?.font_families ?? [],
 		[ selectedCollection ]
@@ -205,6 +193,7 @@ function FontCollection( { slug } ) {
 					? selectedCollection.description
 					: __( 'Select font variants to install.' )
 			}
+			notice={ notice }
 			handleBack={ !! selectedFont && handleUnselectFont }
 			footer={
 				fontsToInstall.length > 0 && (
@@ -219,22 +208,6 @@ function FontCollection( { slug } ) {
 				</>
 			) }
 
-			{ notice && (
-				<>
-					<FlexItem>
-						<Spacer margin={ 2 } />
-						<Notice
-							isDismissible={ false }
-							status={ notice.type }
-							className="font-library-modal__font-collection__notice"
-						>
-							{ notice.message }
-						</Notice>
-					</FlexItem>
-					<Spacer margin={ 2 } />
-				</>
-			) }
-
 			{ ! renderConfirmDialog && ! selectedFont && (
 				<Flex>
 					<FlexItem>

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

@@ -62,7 +62,7 @@ function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
 			}
 		};
 		loadAsset();
-	}, [ fontFace, isIntersecting, loadFontFaceAsset ] );
+	}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );
 
 	return (
 		<div ref={ ref }>

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

@@ -43,13 +43,18 @@ function FontLibraryModal( {
 	onRequestClose,
 	initialTabId = 'installed-fonts',
 } ) {
-	const { collections } = useContext( FontLibraryContext );
+	const { collections, setNotice } = useContext( FontLibraryContext );
 
 	const tabs = [
 		...DEFAULT_TABS,
 		...tabsFromCollections( collections || [] ),
 	];
 
+	// Reset notice when new tab is selected.
+	const onSelect = () => {
+		setNotice( null );
+	};
+
 	return (
 		<Modal
 			title={ __( 'Fonts' ) }
@@ -58,7 +63,7 @@ function FontLibraryModal( {
 			className="font-library-modal"
 		>
 			<div className="font-library-modal__tabs">
-				<Tabs initialTabId={ initialTabId }>
+				<Tabs initialTabId={ initialTabId } onSelect={ onSelect }>
 					<Tabs.TabList>
 						{ tabs.map( ( { id, title } ) => (
 							<Tabs.Tab key={ id } tabId={ id }>

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

@@ -9,7 +9,6 @@ import {
 	__experimentalSpacer as Spacer,
 	Button,
 	Spinner,
-	Notice,
 	FlexItem,
 } from '@wordpress/components';
 
@@ -34,6 +33,8 @@ function InstalledFonts() {
 		refreshLibrary,
 		uninstallFontFamily,
 		isResolvingLibrary,
+		notice,
+		setNotice,
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
 
@@ -45,8 +46,6 @@ function InstalledFonts() {
 		handleSetLibraryFontSelected( font );
 	};
 
-	const [ notice, setNotice ] = useState( null );
-
 	const handleConfirmUninstall = async () => {
 		try {
 			await uninstallFontFamily( libraryFontSelected );
@@ -91,20 +90,11 @@ function InstalledFonts() {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
-	// Reset notice after 5 seconds
-	useEffect( () => {
-		if ( notice ) {
-			const timeout = setTimeout( () => {
-				setNotice( null );
-			}, 5000 );
-			return () => clearTimeout( timeout );
-		}
-	}, [ notice ] );
-
 	return (
 		<TabPanelLayout
 			title={ libraryFontSelected?.name || '' }
 			description={ tabDescription }
+			notice={ notice }
 			handleBack={ !! libraryFontSelected && handleUnselectFont }
 			footer={
 				<Footer
@@ -120,28 +110,17 @@ function InstalledFonts() {
 				handleCancelUninstall={ handleCancelUninstall }
 			/>
 
-			{ notice && (
-				<>
-					<FlexItem>
-						<Spacer margin={ 2 } />
-						<Notice
-							isDismissible={ false }
-							status={ notice.type }
-							className="font-library-modal__font-collection__notice"
-						>
-							{ notice.message }
-						</Notice>
-					</FlexItem>
-					<Spacer margin={ 4 } />
-				</>
-			) }
-
 			{ ! libraryFontSelected && (
 				<>
-					{ isResolvingLibrary && <Spinner /> }
+					{ isResolvingLibrary && (
+						<FlexItem>
+							<Spacer margin={ 2 } />
+							<Spinner />
+							<Spacer margin={ 2 } />
+						</FlexItem>
+					) }
 					{ baseCustomFonts.length > 0 && (
 						<>
-							<Spacer margin={ 2 } />
 							<FontsGrid>
 								{ baseCustomFonts.map( ( font ) => (
 									<LibraryFontCard