Download then upload font face assets when installing from a collecti…

…on (#57694)

* Download then upload font face assets when installing from a collection

* Add error handling to font download-then-upload

* Check for downloadFromUrl property before downloading to upload

* Simplify downloadFontFaceAsset and move to utils.

* Add error handling to downloadFontFaceAsset

* Use Promise.all to handle multiple asynchronous font face downloads.
>
>
Co-authored-by: Sarah Norris <[email protected]>

---------

Co-authored-by: Jeff Ong <[email protected]>
Co-authored-by: Sarah Norris <[email protected]>

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

@@ -31,6 +31,7 @@ import { toggleFont } from './utils/toggleFont';
 import { getFontsOutline } from './utils/fonts-outline';
 import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
 import { getNoticeFromInstallResponse } from './utils/get-notice-from-response';
+import { downloadFontFaceAsset } from './utils';
 
 const DEFAULT_CATEGORY = {
 	id: 'all',
@@ -154,7 +155,34 @@ function FontCollection( { id } ) {
 	};
 
 	const handleInstall = async () => {
-		const response = await installFont( fontsToInstall[ 0 ] );
+		const fontFamily = fontsToInstall[ 0 ];
+
+		try {
+			if ( fontFamily?.fontFace ) {
+				await Promise.all(
+					fontFamily.fontFace.map( async ( fontFace ) => {
+						if ( fontFace.downloadFromUrl ) {
+							fontFace.file = await downloadFontFaceAsset(
+								fontFace.downloadFromUrl
+							);
+							delete fontFace.downloadFromUrl;
+						}
+					} )
+				);
+			}
+		} catch ( error ) {
+			// If any of the fonts fail to download,
+			// show an error notice and stop the request from being sent.
+			setNotice( {
+				type: 'error',
+				message: __(
+					'Error installing the fonts, could not be downloaded.'
+				),
+			} );
+			return;
+		}
+
+		const response = await installFont( fontFamily );
 		const installNotice = getNoticeFromInstallResponse( response );
 		setNotice( installNotice );
 		resetFontsToInstall();

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

@@ -9,6 +9,11 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { FONT_WEIGHTS, FONT_STYLES } from './constants';
 import { unlock } from '../../../../lock-unlock';
 
+/**
+ * Browser dependencies
+ */
+const { File } = window;
+
 export function setUIValuesNeeded( font, extraValues = {} ) {
 	if ( ! font.name && ( font.fontFamily || font.slug ) ) {
 		font.name = font.fontFamily || font.slug;
@@ -164,3 +169,33 @@ export function makeFormDataFromFontFamily( fontFamily ) {
 	formData.append( 'font_family_settings', JSON.stringify( newFontFamily ) );
 	return formData;
 }
+
+/*
+ * Downloads a font face asset from a URL to the client and returns a File object.
+ */
+export async function downloadFontFaceAsset( url ) {
+	return fetch( new Request( url ) )
+		.then( ( response ) => {
+			if ( ! response.ok ) {
+				throw new Error(
+					`Error downloading font face asset from ${ url }. Server responded with status: ${ response.status }`
+				);
+			}
+			return response.blob();
+		} )
+		.then( ( blob ) => {
+			const filename = url.split( '/' ).pop();
+			const file = new File( [ blob ], filename, {
+				type: blob.type,
+			} );
+			return file;
+		} )
+		.catch( ( error ) => {
+			// eslint-disable-next-line no-console
+			console.error(
+				`Error downloading font face asset from ${ url }:`,
+				error
+			);
+			throw error;
+		} );
+}