From 7b067aa68224890dc5589b38c5df85be579997d3 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Wed, 31 Jul 2024 22:47:27 +0900 Subject: [PATCH] Font Library Modal: Remove notice context and add message when fonts updated (#64030) Co-authored-by: t-hamano Co-authored-by: mikachan Co-authored-by: madhusudhand Co-authored-by: jasmussen Co-authored-by: afercia Co-authored-by: akasunil --- .../components/global-styles/font-families.js | 4 +-- .../font-library-modal/context.js | 5 ---- .../font-library-modal/font-collection.js | 14 +++------- .../global-styles/font-library-modal/index.js | 9 ++---- .../font-library-modal/installed-fonts.js | 28 +++++++++++++++---- .../font-library-modal/upload-fonts.js | 4 +-- 6 files changed, 32 insertions(+), 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 index f6610d0457bba..6a554b136317d 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,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 index e02dcb2e8a0af..abfb5484e44bf 100644 --- 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 index cf6857b30c59e..6f8a27a8aa892 100644 --- 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 index 80edc1596f08c..5af4be90fecdc 100644 --- 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 (
- + { tabs.map( ( { id, title } ) => ( 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 6602a778dc66c..7ca2a9218c3bb 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 @@ -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() { ) }