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 <jcrist@pbking.com>

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;
 	}
 
 	/**

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,

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 () => {

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 );
 }