From 0202fb76a014b9706edbef4891f352b7f6361629 Mon Sep 17 00:00:00 2001 From: Jason Crist Date: Wed, 24 Jan 2024 13:47:08 -0500 Subject: [PATCH 1/4] Refactored download/upload logic to support font faces with multiple src assets --- .../font-library-modal/font-collection.js | 4 +- .../font-library-modal/utils/index.js | 84 ++++++++++--------- 2 files changed, 48 insertions(+), 40 deletions(-) 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 46363365363bb..acbd3665b4c3e 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 @@ -30,7 +30,7 @@ import CollectionFontDetails from './collection-font-details'; import { toggleFont } from './utils/toggleFont'; import { getFontsOutline } from './utils/fonts-outline'; import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog'; -import { downloadFontFaceAsset } from './utils'; +import { downloadFontFaceAssets } from './utils'; const DEFAULT_CATEGORY = { slug: 'all', @@ -161,7 +161,7 @@ function FontCollection( { slug } ) { await Promise.all( fontFamily.fontFace.map( async ( fontFace ) => { if ( fontFace.src ) { - fontFace.file = await downloadFontFaceAsset( + fontFace.file = await downloadFontFaceAssets( fontFace.src ); } diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js index 677b04f7e83d4..d4e74f345a9cc 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js @@ -164,20 +164,25 @@ export function makeFontFacesFormData( font ) { const fontFacesFormData = font.fontFace.map( ( face, faceIndex ) => { const formData = new FormData(); if ( face.file ) { - // Slugified file name because the it might contain spaces or characters treated differently on the server. - const fileId = `file-${ faceIndex }`; - // Add the files to the formData - formData.append( fileId, face.file, face.file.name ); - // remove the file object from the face object the file is referenced in src - const { file, ...faceWithoutFileProperty } = face; - const fontFaceSettings = { - ...faceWithoutFileProperty, - src: fileId, - }; - formData.append( - 'font_face_settings', - JSON.stringify( fontFaceSettings ) - ); + // file may be a single file or a collection of files. + // make sure it's an array + const files = Array.isArray( face.file ) + ? face.file + : [ face.file ]; + const src = []; + + files.forEach( ( file, key ) => { + // Slugified file name because the it might contain spaces or characters treated differently on the server. + const fileId = `file-${ faceIndex }-${ key }`; + // Add the files to the formData + formData.append( fileId, file, file.name ); + src.push( fileId ); + } ); + + face.src = src.length === 1 ? src[ 0 ] : src; + delete face.file; + + formData.append( 'font_face_settings', JSON.stringify( face ) ); } else { formData.append( 'font_face_settings', JSON.stringify( face ) ); } @@ -225,31 +230,34 @@ export async function batchInstallFontFaces( fontFamilyId, fontFacesData ) { /* * 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; +export async function downloadFontFaceAssets( src ) { + //src could be a single string or a collection of strings. + //here, just make sure it's an array + src = Array.isArray( src ) ? src : [ src ]; + + const files = await Promise.all( + src.map( async ( url ) => { + return await 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; - } ); + ); + + // If we only have one file return it (not the array). Otherwise return all of them in the array. + return files.length === 1 ? files[ 0 ] : files; } /* From 597af84364edc9e23e2fd6349c01e7628e34018f Mon Sep 17 00:00:00 2001 From: Jason Crist Date: Thu, 25 Jan 2024 09:42:35 -0500 Subject: [PATCH 2/4] Removed unnecessary --- .../components/global-styles/font-library-modal/utils/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js index d4e74f345a9cc..b00b4b75ca892 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js @@ -237,7 +237,7 @@ export async function downloadFontFaceAssets( src ) { const files = await Promise.all( src.map( async ( url ) => { - return await fetch( new Request( url ) ) + return fetch( new Request( url ) ) .then( ( response ) => { if ( ! response.ok ) { throw new Error( From a00a460d1e8baed48801458f89795a84f6c12999 Mon Sep 17 00:00:00 2001 From: Jason Crist Date: Thu, 25 Jan 2024 15:09:47 -0500 Subject: [PATCH 3/4] Update packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js Co-authored-by: Grant Kinney --- .../components/global-styles/font-library-modal/utils/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js index b00b4b75ca892..102bea5491302 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js @@ -231,8 +231,7 @@ export async function batchInstallFontFaces( fontFamilyId, fontFacesData ) { * Downloads a font face asset from a URL to the client and returns a File object. */ export async function downloadFontFaceAssets( src ) { - //src could be a single string or a collection of strings. - //here, just make sure it's an array + // Normalize to an array, since `src` could be a string or array. src = Array.isArray( src ) ? src : [ src ]; const files = await Promise.all( From b3cbf12fecc921d89b2ccf220b85449d37c5adca Mon Sep 17 00:00:00 2001 From: Jason Crist Date: Thu, 25 Jan 2024 15:10:03 -0500 Subject: [PATCH 4/4] Update packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js Co-authored-by: Grant Kinney --- .../components/global-styles/font-library-modal/utils/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js index 102bea5491302..154ed8ac2cf8f 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js @@ -164,8 +164,7 @@ export function makeFontFacesFormData( font ) { const fontFacesFormData = font.fontFace.map( ( face, faceIndex ) => { const formData = new FormData(); if ( face.file ) { - // file may be a single file or a collection of files. - // make sure it's an array + // Normalize to an array, since face.file may be a single file or an array of files. const files = Array.isArray( face.file ) ? face.file : [ face.file ];