From 3a739bc2a46230635ccef925a6b1dbb65f413a29 Mon Sep 17 00:00:00 2001 From: Sarah Norris <1645628+mikachan@users.noreply.github.com> Date: Thu, 18 Jan 2024 10:04:53 +0000 Subject: [PATCH] Font Library: Update uninstall/delete on client side (#57932) * Fix delete endpoint * Update fetchUninstallFontFamily to match new format * Update uninstallFont * Add uninstall notice back in * Tidy up comments * Re-word uninstall notices * Add spacing to error message * Refactored how font family values were processed so they would retain their id, which is now used to delete a font family without fetching data via slug * Rename uninstallFont to uninstallFontFamily * Throw uninstall errors rather than returning them --------- Co-authored-by: Jason Crist --- ...class-wp-rest-font-families-controller.php | 2 + .../font-library-modal/context.js | 49 ++++++++++++------- .../font-library-modal/installed-fonts.js | 25 +++++++--- .../font-library-modal/resolvers.js | 8 +-- 4 files changed, 51 insertions(+), 33 deletions(-) diff --git a/lib/experimental/fonts/font-library/class-wp-rest-font-families-controller.php b/lib/experimental/fonts/font-library/class-wp-rest-font-families-controller.php index 89bc88020e333..a48c9cbe1a776 100644 --- a/lib/experimental/fonts/font-library/class-wp-rest-font-families-controller.php +++ b/lib/experimental/fonts/font-library/class-wp-rest-font-families-controller.php @@ -263,6 +263,8 @@ public function delete_item( $request ) { foreach ( $this->get_font_face_ids( $font_family_id ) as $font_face_id ) { wp_delete_post( $font_face_id, true ); } + + return $deleted; } /** 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 078d11e235c04..c653d0a8b0362 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 @@ -17,7 +17,7 @@ import { __ } from '@wordpress/i18n'; import { fetchGetFontFamilyBySlug, fetchInstallFontFamily, - fetchUninstallFonts, + fetchUninstallFontFamily, fetchFontCollections, fetchFontCollection, } from './resolvers'; @@ -70,12 +70,15 @@ function FontLibraryProvider( { children } ) { } ); const libraryFonts = - ( libraryPosts || [] ).map( ( post ) => { - post.font_family_settings.fontFace = - post?._embedded?.font_faces.map( - ( face ) => face.font_face_settings - ) || []; - return post.font_family_settings; + ( libraryPosts || [] ).map( ( fontFamilyPost ) => { + return { + id: fontFamilyPost.id, + ...fontFamilyPost.font_family_settings, + fontFace: + fontFamilyPost?._embedded?.font_faces.map( + ( face ) => face.font_face_settings + ) || [], + }; } ) || []; // Global Styles (settings) font families @@ -296,13 +299,18 @@ function FontLibraryProvider( { children } ) { } } - async function uninstallFont( font ) { + async function uninstallFontFamily( fontFamilyToUninstall ) { try { - // Uninstall the font (remove the font files from the server and the post from the database). - const response = await fetchUninstallFonts( [ font ] ); - // Deactivate the font family (remove the font family from the global styles). - if ( 0 === response.errors.length ) { - deactivateFontFamily( font ); + // Uninstall the font family. + // (Removes the font files from the server and the posts from the database). + const uninstalledFontFamily = await fetchUninstallFontFamily( + fontFamilyToUninstall.id + ); + + // Deactivate the font family if delete request is successful + // (Removes the font family from the global styles). + if ( uninstalledFontFamily.deleted ) { + deactivateFontFamily( fontFamilyToUninstall ); // Save the global styles to the database. await saveSpecifiedEntityEdits( 'root', @@ -311,15 +319,18 @@ function FontLibraryProvider( { children } ) { [ 'settings.typography.fontFamilies' ] ); } + // Refresh the library (the library font families from database). refreshLibrary(); - return response; + + return uninstalledFontFamily; } catch ( error ) { // eslint-disable-next-line no-console - console.error( error ); - return { - errors: [ error ], - }; + console.error( + `There was an error uninstalling the font family:`, + error + ); + throw error; } } @@ -431,7 +442,7 @@ function FontLibraryProvider( { children } ) { getFontFacesActivated, loadFontFaceAsset, installFont, - uninstallFont, + uninstallFontFamily, toggleActivateFont, getAvailableFontsOutline, modalTabOpen, 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 0c481f6e4d8ca..714f91f4bc04c 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 @@ -32,7 +32,7 @@ function InstalledFonts() { baseThemeFonts, handleSetLibraryFontSelected, refreshLibrary, - uninstallFont, + uninstallFontFamily, isResolvingLibrary, } = useContext( FontLibraryContext ); const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false ); @@ -48,15 +48,24 @@ function InstalledFonts() { const [ notice, setNotice ] = useState( null ); const handleConfirmUninstall = async () => { - const response = await uninstallFont( libraryFontSelected ); - // TODO: Refactor uninstall notices - // const uninstallNotice = getNoticeFromUninstallResponse( response ); - // setNotice( uninstallNotice ); - // If the font was succesfully uninstalled it is unselected - if ( ! response?.errors?.length ) { + try { + await uninstallFontFamily( libraryFontSelected ); + setNotice( { + type: 'success', + message: __( 'Font family uninstalled successfully.' ), + } ); + + // If the font was succesfully uninstalled it is unselected. handleUnselectFont(); + setIsConfirmDeleteOpen( false ); + } catch ( error ) { + setNotice( { + type: 'error', + message: + __( 'There was an error uninstalling the font family. ' ) + + error.message, + } ); } - setIsConfirmDeleteOpen( false ); }; const handleUninstallClick = async () => { diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js b/packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js index df10904b75026..baaa698599553 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js @@ -57,14 +57,10 @@ export async function fetchGetFontFamilyBySlug( slug ) { } ); } -export async function fetchUninstallFonts( fonts ) { - const data = { - font_families: fonts, - }; +export async function fetchUninstallFontFamily( fontFamilyId ) { const config = { - path: '/wp/v2/font-families', + path: `/wp/v2/font-families/${ fontFamilyId }?force=true`, method: 'DELETE', - data, }; return apiFetch( config ); }