Font Library Modal: Remove notice context and add message when fonts …

…updated (#64030) Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: madhusudhand <madhudollu@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org> Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: akasunil <sunil25393@git.wordpress.org>
WordPress · Jul 31, 2024 · 7b067aa · 7b067aa
1 parent 1f97f7f
commit 7b067aa
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 32 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, setNotice } =
+	const { baseCustomFonts, modalTabOpen, setModalTabOpen } =
 		useContext( FontLibraryContext );
 	const [ fontFamilies ] = useGlobalSetting( 'typography.fontFamilies' );
 	const [ baseFontFamilies ] = useGlobalSetting(
@@ -112,8 +112,6 @@ function FontFamilies() {
 					variant="secondary"
 					__next40pxDefaultSize
 					onClick={ () => {
-						// Reset notice when opening the modal.
-						setNotice( null );
 						setModalTabOpen(
 							hasInstalledFonts
 								? 'installed-fonts'

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/context.js b/packages/edit-site/src/components/global-styles/font-library-modal/context.js
@@ -54,7 +54,6 @@ function FontLibraryProvider( { children } ) {
 
 	const [ isInstalling, setIsInstalling ] = useState( false );
 	const [ refreshKey, setRefreshKey ] = useState( 0 );
-	const [ notice, setNotice ] = useState( null );
 
 	const refreshLibrary = () => {
 		setRefreshKey( Date.now() );
@@ -139,8 +138,6 @@ function FontLibraryProvider( { children } ) {
 	}, [ modalTabOpen ] );
 
 	const handleSetLibraryFontSelected = ( font ) => {
-		setNotice( null );
-
 		// If font is null, reset the selected font
 		if ( ! font ) {
 			setLibraryFontSelected( null );
@@ -527,8 +524,6 @@ function FontLibraryProvider( { children } ) {
 				modalTabOpen,
 				setModalTabOpen,
 				refreshLibrary,
-				notice,
-				setNotice,
 				saveFontFamilies,
 				isResolvingLibrary,
 				isInstalling,

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
@@ -63,20 +63,15 @@ function FontCollection( { slug } ) {
 	};
 
 	const [ selectedFont, setSelectedFont ] = useState( null );
+	const [ notice, setNotice ] = useState( false );
 	const [ fontsToInstall, setFontsToInstall ] = useState( [] );
 	const [ page, setPage ] = useState( 1 );
 	const [ filters, setFilters ] = useState( {} );
 	const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
 		requiresPermission && ! getGoogleFontsPermissionFromStorage()
 	);
-	const {
-		collections,
-		getFontCollection,
-		installFonts,
-		isInstalling,
-		notice,
-		setNotice,
-	} = useContext( FontLibraryContext );
+	const { collections, getFontCollection, installFonts, isInstalling } =
+		useContext( FontLibraryContext );
 	const selectedCollection = collections.find(
 		( collection ) => collection.slug === slug
 	);
@@ -116,8 +111,7 @@ function FontCollection( { slug } ) {
 
 	useEffect( () => {
 		setSelectedFont( null );
-		setNotice( null );
-	}, [ slug, setNotice ] );
+	}, [ slug ] );
 
 	useEffect( () => {
 		// If the selected fonts change, reset the selected fonts to install

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
@@ -44,7 +44,7 @@ function FontLibraryModal( {
 	onRequestClose,
 	defaultTabId = 'installed-fonts',
 } ) {
-	const { collections, setNotice } = useContext( FontLibraryContext );
+	const { collections } = useContext( FontLibraryContext );
 	const canUserCreate = useSelect( ( select ) => {
 		return select( coreStore ).canUser( 'create', {
 			kind: 'postType',
@@ -59,11 +59,6 @@ function FontLibraryModal( {
 		tabs.push( ...tabsFromCollections( collections || [] ) );
 	}
 
-	// Reset notice when new tab is selected.
-	const onSelect = () => {
-		setNotice( null );
-	};
-
 	return (
 		<Modal
 			title={ __( 'Fonts' ) }
@@ -72,7 +67,7 @@ function FontLibraryModal( {
 			className="font-library-modal"
 		>
 			<div className="font-library-modal__tabs">
-				<Tabs defaultTabId={ defaultTabId } onSelect={ onSelect }>
+				<Tabs defaultTabId={ defaultTabId }>
 					<Tabs.TabList>
 						{ tabs.map( ( { id, title } ) => (
 							<Tabs.Tab key={ id } tabId={ id }>

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
@@ -53,14 +53,13 @@ function InstalledFonts() {
 		isInstalling,
 		saveFontFamilies,
 		getFontFacesActivated,
-		notice,
-		setNotice,
 	} = useContext( FontLibraryContext );
 
 	const [ fontFamilies, setFontFamilies ] = useGlobalSetting(
 		'typography.fontFamilies'
 	);
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
+	const [ notice, setNotice ] = useState( false );
 	const [ baseFontFamilies ] = useGlobalSetting(
 		'typography.fontFamilies',
 		undefined,
@@ -120,6 +119,24 @@ function InstalledFonts() {
 		setIsConfirmDeleteOpen( true );
 	};
 
+	const handleUpdate = async () => {
+		setNotice( null );
+		try {
+			await saveFontFamilies( fontFamilies );
+			setNotice( {
+				type: 'success',
+				message: __( 'Font family updated successfully.' ),
+			} );
+		} catch ( error ) {
+			setNotice( {
+				type: 'error',
+				message:
+					__( 'There was an error updating the font family. ' ) +
+					error.message,
+			} );
+		}
+	};
+
 	const getFontFacesToDisplay = ( font ) => {
 		if ( ! font ) {
 			return [];
@@ -265,6 +282,7 @@ function InstalledFonts() {
 															font
 														) }
 														onClick={ () => {
+															setNotice( null );
 															handleSetLibraryFontSelected(
 																font
 															);
@@ -305,6 +323,7 @@ function InstalledFonts() {
 															font
 														) }
 														onClick={ () => {
+															setNotice( null );
 															handleSetLibraryFontSelected(
 																font
 															);
@@ -337,6 +356,7 @@ function InstalledFonts() {
 									size="small"
 									onClick={ () => {
 										handleSetLibraryFontSelected( null );
+										setNotice( null );
 									} }
 									label={ __( 'Back' ) }
 								/>
@@ -406,9 +426,7 @@ function InstalledFonts() {
 						) }
 						<Button
 							variant="primary"
-							onClick={ () => {
-								saveFontFamilies( fontFamilies );
-							} }
+							onClick={ handleUpdate }
 							disabled={ ! fontFamiliesHasChanges }
 							accessibleWhenDisabled
 						>

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
@@ -25,9 +25,9 @@ import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
 
 function UploadFonts() {
-	const { installFonts, notice, setNotice } =
-		useContext( FontLibraryContext );
+	const { installFonts } = useContext( FontLibraryContext );
 	const [ isUploading, setIsUploading ] = useState( false );
+	const [ notice, setNotice ] = useState( false );
 
 	const handleDropZone = ( files ) => {
 		handleFilesUpload( files );