Font Library: address JS feedback in #57688 (#57961)

* Wrap error messages in sprintf * Use await rather than then * Add variables for API URLs * Update packages/edit-site/src/components/global-styles/font-library-modal/resolvers.js Co-authored-by: Jeff Ong <jonger4@gmail.com> --------- Co-authored-by: Jeff Ong <jonger4@gmail.com>
WordPress · Jan 18, 2024 · a666bb5 · a666bb5
1 parent 74be330
commit a666bb5
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 41 deletions.
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
@@ -9,7 +9,7 @@ import {
 	useEntityRecords,
 	store as coreStore,
 } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -265,8 +265,11 @@ function FontLibraryProvider( { children } ) {
 				alreadyInstalledFontFaces.length === 0
 			) {
 				throw new Error(
-					__( 'No font faces were installed. ' ) +
+					sprintf(
+						/* translators: %s: Specific error message returned from server. */
+						__( 'No font faces were installed. %s' ),
 						detailedErrorMessage
+					)
 				);
 			}
 
@@ -289,9 +292,13 @@ function FontLibraryProvider( { children } ) {
 
 			if ( unsucessfullyInstalledFontFaces.length > 0 ) {
 				throw new Error(
-					__(
-						'Some font faces were installed. There were some errors. '
-					) + detailedErrorMessage
+					sprintf(
+						/* translators: %s: Specific error message returned from server. */
+						__(
+							'Some font faces were installed. There were some errors. %s'
+						),
+						detailedErrorMessage
+					)
 				);
 			}
 		} finally {

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
@@ -7,76 +7,76 @@
  */
 import apiFetch from '@wordpress/api-fetch';
 
+const FONT_FAMILIES_URL = '/wp/v2/font-families';
+const FONT_COLLECTIONS_URL = '/wp/v2/font-collections';
+
 export async function fetchInstallFontFamily( data ) {
 	const config = {
-		path: '/wp/v2/font-families',
+		path: FONT_FAMILIES_URL,
 		method: 'POST',
 		body: data,
 	};
-	return apiFetch( config ).then( ( response ) => {
-		return {
-			id: response.id,
-			...response.font_face_settings,
-			fontFace: [],
-		};
-	} );
+	const response = await apiFetch( config );
+	return {
+		id: response.id,
+		...response.font_family_settings,
+		fontFace: [],
+	};
 }
 
 export async function fetchInstallFontFace( fontFamilyId, data ) {
 	const config = {
-		path: `/wp/v2/font-families/${ fontFamilyId }/font-faces`,
+		path: `${ FONT_FAMILIES_URL }/${ fontFamilyId }/font-faces`,
 		method: 'POST',
 		body: data,
 	};
-	return apiFetch( config ).then( ( response ) => {
-		return {
-			id: response.id,
-			...response.font_face_settings,
-		};
-	} );
+	const response = await apiFetch( config );
+	return {
+		id: response.id,
+		...response.font_face_settings,
+	};
 }
 
 export async function fetchGetFontFamilyBySlug( slug ) {
 	const config = {
-		path: `/wp/v2/font-families?slug=${ slug }&_embed=true`,
+		path: `${ FONT_FAMILIES_URL }?slug=${ slug }&_embed=true`,
 		method: 'GET',
 	};
-	return apiFetch( config ).then( ( response ) => {
-		if ( ! response || response.length === 0 ) {
-			return null;
-		}
-		const fontFamilyPost = response[ 0 ];
-		return {
-			id: fontFamilyPost.id,
-			...fontFamilyPost.font_family_settings,
-			fontFace:
-				fontFamilyPost?._embedded?.font_faces.map(
-					( face ) => face.font_face_settings
-				) || [],
-		};
-	} );
+	const response = await apiFetch( config );
+	if ( ! response || response.length === 0 ) {
+		return null;
+	}
+	const fontFamilyPost = response[ 0 ];
+	return {
+		id: fontFamilyPost.id,
+		...fontFamilyPost.font_family_settings,
+		fontFace:
+			fontFamilyPost?._embedded?.font_faces.map(
+				( face ) => face.font_face_settings
+			) || [],
+	};
 }
 
 export async function fetchUninstallFontFamily( fontFamilyId ) {
 	const config = {
-		path: `/wp/v2/font-families/${ fontFamilyId }?force=true`,
+		path: `${ FONT_FAMILIES_URL }/${ fontFamilyId }?force=true`,
 		method: 'DELETE',
 	};
-	return apiFetch( config );
+	return await apiFetch( config );
 }
 
 export async function fetchFontCollections() {
 	const config = {
-		path: '/wp/v2/font-collections',
+		path: FONT_COLLECTIONS_URL,
 		method: 'GET',
 	};
-	return apiFetch( config );
+	return await apiFetch( config );
 }
 
 export async function fetchFontCollection( id ) {
 	const config = {
-		path: `/wp/v2/font-collections/${ id }`,
+		path: `${ FONT_COLLECTIONS_URL }/${ id }`,
 		method: 'GET',
 	};
-	return apiFetch( config );
+	return await apiFetch( config );
 }