@wordpress/edit-site 5.26.0 → 5.27.1

package/src/components/global-styles/font-library-modal/context.js

@@ -9,13 +9,15 @@ import {
 	useEntityRecords,
 	store as coreStore,
 } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import {
-	fetchInstallFont,
-	fetchUninstallFonts,
+	fetchGetFontFamilyBySlug,
+	fetchInstallFontFamily,
+	fetchUninstallFontFamily,
 	fetchFontCollections,
 	fetchFontCollection,
 } from './resolvers';
@@ -26,10 +28,12 @@ import {
 	mergeFontFamilies,
 	loadFontFaceInBrowser,
 	getDisplaySrcFromFontFace,
-	makeFormDataFromFontFamily,
+	makeFontFacesFormData,
+	makeFontFamilyFormData,
+	batchInstallFontFaces,
+	checkFontFaceInstalled,
 } from './utils';
 import { toggleFont } from './utils/toggleFont';
-import getIntersectingFontFaces from './utils/get-intersecting-font-faces';
 
 export const FontLibraryContext = createContext( {} );
 
@@ -60,12 +64,22 @@ function FontLibraryProvider( { children } ) {
 		records: libraryPosts = [],
 		isResolving: isResolvingLibrary,
 		hasResolved: hasResolvedLibrary,
-	} = useEntityRecords( 'postType', 'wp_font_family', { refreshKey } );
+	} = useEntityRecords( 'postType', 'wp_font_family', {
+		refreshKey,
+		_embed: true,
+	} );
 
 	const libraryFonts =
-		( libraryPosts || [] ).map( ( post ) =>
-			JSON.parse( post.content.raw )
-		) || [];
+		( 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
 	const [ fontFamilies, setFontFamilies ] = useGlobalSetting(
@@ -157,11 +171,12 @@ function FontLibraryProvider( { children } ) {
 
 	const getAvailableFontsOutline = ( availableFontFamilies ) => {
 		const outline = availableFontFamilies.reduce( ( acc, font ) => {
-			const availableFontFaces = Array.isArray( font?.fontFace )
-				? font?.fontFace.map(
-						( face ) => `${ face.fontStyle + face.fontWeight }`
-				  )
-				: [ 'normal400' ]; // If the font doesn't have fontFace, we assume it is a system font and we add the defaults: normal 400
+			const availableFontFaces =
+				font?.fontFace && font.fontFace?.length > 0
+					? font?.fontFace.map(
+							( face ) => `${ face.fontStyle + face.fontWeight }`
+					  )
+					: [ 'normal400' ]; // If the font doesn't have fontFace, we assume it is a system font and we add the defaults: normal 400
 
 			acc[ font.slug ] = availableFontFaces;
 			return acc;
@@ -192,45 +207,133 @@ function FontLibraryProvider( { children } ) {
 		return getActivatedFontsOutline( source )[ slug ] || [];
 	};
 
-	async function installFont( font ) {
+	async function installFont( fontFamilyToInstall ) {
 		setIsInstalling( true );
 		try {
-			// Prepare formData to install.
-			const formData = makeFormDataFromFontFamily( font );
+			// Get the font family if it already exists.
+			let installedFontFamily = await fetchGetFontFamilyBySlug(
+				fontFamilyToInstall.slug
+			);
+
+			// Otherwise create it.
+			if ( ! installedFontFamily ) {
+				// Prepare font family form data to install.
+				installedFontFamily = await fetchInstallFontFamily(
+					makeFontFamilyFormData( fontFamilyToInstall )
+				);
+			}
+
+			// Collect font faces that have already been installed (to be activated later)
+			const alreadyInstalledFontFaces =
+				installedFontFamily.fontFace && fontFamilyToInstall.fontFace
+					? installedFontFamily.fontFace.filter(
+							( fontFaceToInstall ) =>
+								checkFontFaceInstalled(
+									fontFaceToInstall,
+									fontFamilyToInstall.fontFace
+								)
+					  )
+					: [];
+
+			// Filter out Font Faces that have already been installed (so that they are not re-installed)
+			if (
+				installedFontFamily.fontFace &&
+				fontFamilyToInstall.fontFace
+			) {
+				fontFamilyToInstall.fontFace =
+					fontFamilyToInstall.fontFace.filter(
+						( fontFaceToInstall ) =>
+							! checkFontFaceInstalled(
+								fontFaceToInstall,
+								installedFontFamily.fontFace
+							)
+					);
+			}
+
 			// Install the fonts (upload the font files to the server and create the post in the database).
-			const response = await fetchInstallFont( formData );
-			const fontsInstalled = response?.successes || [];
-			// Get intersecting font faces between the fonts we tried to installed and the fonts that were installed
-			// (to avoid activating a non installed font).
-			const fontToBeActivated = getIntersectingFontFaces(
-				fontsInstalled,
-				[ font ]
+			let sucessfullyInstalledFontFaces = [];
+			let unsucessfullyInstalledFontFaces = [];
+			if ( fontFamilyToInstall?.fontFace?.length > 0 ) {
+				const response = await batchInstallFontFaces(
+					installedFontFamily.id,
+					makeFontFacesFormData( fontFamilyToInstall )
+				);
+				sucessfullyInstalledFontFaces = response?.successes;
+				unsucessfullyInstalledFontFaces = response?.errors;
+			}
+
+			const detailedErrorMessage = unsucessfullyInstalledFontFaces.reduce(
+				( errorMessageCollection, error ) => {
+					return `${ errorMessageCollection } ${ error.message }`;
+				},
+				''
 			);
-			// Activate the font families (add the font families to the global styles).
-			activateCustomFontFamilies( fontToBeActivated );
+
+			// If there were no successes and nothing already installed then we don't need to activate anything and can bounce now.
+			if (
+				fontFamilyToInstall?.fontFace?.length > 0 &&
+				sucessfullyInstalledFontFaces.length === 0 &&
+				alreadyInstalledFontFaces.length === 0
+			) {
+				throw new Error(
+					sprintf(
+						/* translators: %s: Specific error message returned from server. */
+						__( 'No font faces were installed. %s' ),
+						detailedErrorMessage
+					)
+				);
+			}
+
+			// Use the sucessfully installed font faces
+			// As well as any font faces that were already installed (those will be activated)
+			if (
+				sucessfullyInstalledFontFaces?.length > 0 ||
+				alreadyInstalledFontFaces?.length > 0
+			) {
+				fontFamilyToInstall.fontFace = [
+					...sucessfullyInstalledFontFaces,
+					...alreadyInstalledFontFaces,
+				];
+			}
+
+			// Activate the font family (add the font family to the global styles).
+			activateCustomFontFamilies( [ fontFamilyToInstall ] );
+
 			// Save the global styles to the database.
 			saveSpecifiedEntityEdits( 'root', 'globalStyles', globalStylesId, [
 				'settings.typography.fontFamilies',
 			] );
+
 			refreshLibrary();
-			setIsInstalling( false );
 
-			return response;
-		} catch ( error ) {
+			if ( unsucessfullyInstalledFontFaces.length > 0 ) {
+				throw new Error(
+					sprintf(
+						/* translators: %s: Specific error message returned from server. */
+						__(
+							'Some font faces were installed. There were some errors. %s'
+						),
+						detailedErrorMessage
+					)
+				);
+			}
+		} finally {
 			setIsInstalling( false );
-			return {
-				errors: [ error ],
-			};
 		}
 	}
 
-	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',
@@ -239,15 +342,18 @@ function FontLibraryProvider( { children } ) {
 					[ 'settings.typography.fontFamilies' ]
 				);
 			}
-			// Refresh the library (the the library font families from database).
+
+			// 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;
 		}
 	}
 
@@ -322,16 +428,16 @@ function FontLibraryProvider( { children } ) {
 		const response = await fetchFontCollections();
 		setFontCollections( response );
 	};
-	const getFontCollection = async ( id ) => {
+	const getFontCollection = async ( slug ) => {
 		try {
 			const hasData = !! collections.find(
-				( collection ) => collection.id === id
-			)?.data;
+				( collection ) => collection.slug === slug
+			)?.font_families;
 			if ( hasData ) return;
-			const response = await fetchFontCollection( id );
+			const response = await fetchFontCollection( slug );
 			const updatedCollections = collections.map( ( collection ) =>
-				collection.id === id
-					? { ...collection, data: { ...response?.data } }
+				collection.slug === slug
+					? { ...collection, ...response }
 					: collection
 			);
 			setFontCollections( updatedCollections );
@@ -359,7 +465,7 @@ function FontLibraryProvider( { children } ) {
 				getFontFacesActivated,
 				loadFontFaceAsset,
 				installFont,
-				uninstallFont,
+				uninstallFontFamily,
 				toggleActivateFont,
 				getAvailableFontsOutline,
 				modalTabOpen,

package/src/components/global-styles/font-library-modal/font-collection.js

@@ -30,14 +30,14 @@ 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 { getNoticeFromInstallResponse } from './utils/get-notice-from-response';
+import { downloadFontFaceAsset } from './utils';
 
 const DEFAULT_CATEGORY = {
-	id: 'all',
+	slug: 'all',
 	name: __( 'All' ),
 };
-function FontCollection( { id } ) {
-	const requiresPermission = id === 'default-font-collection';
+function FontCollection( { slug } ) {
+	const requiresPermission = slug === 'default-font-collection';
 
 	const getGoogleFontsPermissionFromStorage = () => {
 		return (
@@ -57,7 +57,7 @@ function FontCollection( { id } ) {
 	const { collections, getFontCollection, installFont } =
 		useContext( FontLibraryContext );
 	const selectedCollection = collections.find(
-		( collection ) => collection.id === id
+		( collection ) => collection.slug === slug
 	);
 
 	useEffect( () => {
@@ -69,12 +69,12 @@ function FontCollection( { id } ) {
 		handleStorage();
 		window.addEventListener( 'storage', handleStorage );
 		return () => window.removeEventListener( 'storage', handleStorage );
-	}, [ id, requiresPermission ] );
+	}, [ slug, requiresPermission ] );
 
 	useEffect( () => {
 		const fetchFontCollection = async () => {
 			try {
-				await getFontCollection( id );
+				await getFontCollection( slug );
 				resetFilters();
 			} catch ( e ) {
 				setNotice( {
@@ -85,12 +85,12 @@ function FontCollection( { id } ) {
 			}
 		};
 		fetchFontCollection();
-	}, [ id, getFontCollection ] );
+	}, [ slug, getFontCollection ] );
 
 	useEffect( () => {
 		setSelectedFont( null );
 		setNotice( null );
-	}, [ id ] );
+	}, [ slug ] );
 
 	useEffect( () => {
 		// If the selected fonts change, reset the selected fonts to install
@@ -108,10 +108,10 @@ function FontCollection( { id } ) {
 	}, [ notice ] );
 
 	const collectionFonts = useMemo(
-		() => selectedCollection?.data?.fontFamilies ?? [],
+		() => selectedCollection?.font_families ?? [],
 		[ selectedCollection ]
 	);
-	const collectionCategories = selectedCollection?.data?.categories ?? [];
+	const collectionCategories = selectedCollection?.categories ?? [];
 
 	const categories = [ DEFAULT_CATEGORY, ...collectionCategories ];
 
@@ -154,9 +154,44 @@ function FontCollection( { id } ) {
 	};
 
 	const handleInstall = async () => {
-		const response = await installFont( fontsToInstall[ 0 ] );
-		const installNotice = getNoticeFromInstallResponse( response );
-		setNotice( installNotice );
+		const fontFamily = fontsToInstall[ 0 ];
+
+		try {
+			if ( fontFamily?.fontFace ) {
+				await Promise.all(
+					fontFamily.fontFace.map( async ( fontFace ) => {
+						if ( fontFace.src ) {
+							fontFace.file = await downloadFontFaceAsset(
+								fontFace.src
+							);
+						}
+					} )
+				);
+			}
+		} 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;
+		}
+
+		try {
+			await installFont( fontFamily );
+			setNotice( {
+				type: 'success',
+				message: __( 'Fonts were installed successfully.' ),
+			} );
+		} catch ( error ) {
+			setNotice( {
+				type: 'error',
+				message: error.message,
+			} );
+		}
 		resetFontsToInstall();
 	};
 
@@ -228,8 +263,8 @@ function FontCollection( { id } ) {
 							{ categories &&
 								categories.map( ( category ) => (
 									<option
-										value={ category.id }
-										key={ category.id }
+										value={ category.slug }
+										key={ category.slug }
 									>
 										{ category.name }
 									</option>
@@ -241,11 +276,11 @@ function FontCollection( { id } ) {
 
 			<Spacer margin={ 4 } />
 			{ ! renderConfirmDialog &&
-				! selectedCollection?.data?.fontFamilies &&
+				! selectedCollection?.font_families &&
 				! notice && <Spinner /> }
 
 			{ ! renderConfirmDialog &&
-				!! selectedCollection?.data?.fontFamilies?.length &&
+				!! selectedCollection?.font_families?.length &&
 				! fonts.length && (
 					<Text>
 						{ __(
@@ -266,10 +301,10 @@ function FontCollection( { id } ) {
 				<FontsGrid>
 					{ fonts.map( ( font ) => (
 						<FontCard
-							key={ font.slug }
-							font={ font }
+							key={ font.font_family_settings.slug }
+							font={ font.font_family_settings }
 							onClick={ () => {
-								setSelectedFont( font );
+								setSelectedFont( font.font_family_settings );
 							} }
 						/>
 					) ) }

package/src/components/global-styles/font-library-modal/fonts-grid.js

@@ -42,9 +42,13 @@ function FontsGrid( { title, children, pageSize = 32 } ) {
 				<div className="font-library-modal__fonts-grid__main">
 					{ items.map( ( child, i ) => {
 						if ( i === itemsLimit - 1 ) {
-							return <div ref={ setLastItem }>{ child }</div>;
+							return (
+								<div key={ child.key } ref={ setLastItem }>
+									{ child }
+								</div>
+							);
 						}
-						return child;
+						return <div key={ child.key }>{ child }</div>;
 					} ) }
 				</div>
 			</VStack>

package/src/components/global-styles/font-library-modal/index.js

@@ -31,10 +31,10 @@ const DEFAULT_TABS = [
 ];
 
 const tabsFromCollections = ( collections ) =>
-	collections.map( ( { id, name } ) => ( {
-		id,
+	collections.map( ( { slug, name } ) => ( {
+		id: slug,
 		title:
-			collections.length === 1 && id === 'default-font-collection'
+			collections.length === 1 && slug === 'default-font-collection'
 				? __( 'Install Fonts' )
 				: name,
 	} ) );
@@ -76,7 +76,7 @@ function FontLibraryModal( {
 								contents = <InstalledFonts />;
 								break;
 							default:
-								contents = <FontCollection id={ id } />;
+								contents = <FontCollection slug={ id } />;
 						}
 						return (
 							<Tabs.TabPanel

package/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -22,7 +22,6 @@ import FontsGrid from './fonts-grid';
 import LibraryFontDetails from './library-font-details';
 import LibraryFontCard from './library-font-card';
 import ConfirmDeleteDialog from './confirm-delete-dialog';
-import { getNoticeFromUninstallResponse } from './utils/get-notice-from-response';
 import { unlock } from '../../../lock-unlock';
 const { ProgressBar } = unlock( componentsPrivateApis );
 
@@ -33,7 +32,7 @@ function InstalledFonts() {
 		baseThemeFonts,
 		handleSetLibraryFontSelected,
 		refreshLibrary,
-		uninstallFont,
+		uninstallFontFamily,
 		isResolvingLibrary,
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
@@ -49,14 +48,24 @@ function InstalledFonts() {
 	const [ notice, setNotice ] = useState( null );
 
 	const handleConfirmUninstall = async () => {
-		const response = await uninstallFont( libraryFontSelected );
-		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 () => {
@@ -77,6 +86,7 @@ function InstalledFonts() {
 		!! libraryFontSelected && libraryFontSelected?.source !== 'theme';
 
 	useEffect( () => {
+		handleSelectFont( libraryFontSelected );
 		refreshLibrary();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );

package/src/components/global-styles/font-library-modal/library-font-card.js

@@ -13,7 +13,8 @@ import { FontLibraryContext } from './context';
 function LibraryFontCard( { font, ...props } ) {
 	const { getFontFacesActivated } = useContext( FontLibraryContext );
 
-	const variantsInstalled = font.fontFace?.length || 1;
+	const variantsInstalled =
+		font?.fontFace?.length > 0 ? font.fontFace.length : 1;
 	const variantsActive = getFontFacesActivated(
 		font.slug,
 		font.source

package/src/components/global-styles/font-library-modal/library-font-variant.js

@@ -20,17 +20,18 @@ function LibraryFontVariant( { face, font } ) {
 	const { isFontActivated, toggleActivateFont } =
 		useContext( FontLibraryContext );
 
-	const isIstalled = font?.fontFace
-		? isFontActivated(
-				font.slug,
-				face.fontStyle,
-				face.fontWeight,
-				font.source
-		  )
-		: isFontActivated( font.slug, null, null, font.source );
+	const isIstalled =
+		font?.fontFace?.length > 0
+			? isFontActivated(
+					font.slug,
+					face.fontStyle,
+					face.fontWeight,
+					font.source
+			  )
+			: isFontActivated( font.slug, null, null, font.source );
 
 	const handleToggleActivation = () => {
-		if ( font?.fontFace ) {
+		if ( font?.fontFace?.length > 0 ) {
 			toggleActivateFont( font, face );
 			return;
 		}

package/src/components/global-styles/font-library-modal/local-fonts.js

@@ -23,7 +23,6 @@ import { FontLibraryContext } from './context';
 import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
-import { getNoticeFromInstallResponse } from './utils/get-notice-from-response';
 import { unlock } from '../../../lock-unlock';
 
 const { ProgressBar } = unlock( componentsPrivateApis );
@@ -161,12 +160,23 @@ function LocalFonts() {
 					'Variants from only one font family can be uploaded at a time.'
 				),
 			} );
+			setIsUploading( false );
 			return;
 		}
 
-		const response = await installFont( fontFamilies[ 0 ] );
-		const installNotice = getNoticeFromInstallResponse( response );
-		setNotice( installNotice );
+		try {
+			await installFont( fontFamilies[ 0 ] );
+			setNotice( {
+				type: 'success',
+				message: __( 'Fonts were installed successfully.' ),
+			} );
+		} catch ( error ) {
+			setNotice( {
+				type: 'error',
+				message: error.message,
+			} );
+		}
+
 		setIsUploading( false );
 	};