@wordpress/edit-site 5.28.8 → 5.28.10

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

@@ -35,12 +35,12 @@ import {
 	checkFontFaceInstalled,
 } from './utils';
 import { toggleFont } from './utils/toggleFont';
+import setNestedValue from '../../../utils/set-nested-value';
 
 export const FontLibraryContext = createContext( {} );
 
 function FontLibraryProvider( { children } ) {
-	const { __experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits } =
-		useDispatch( coreStore );
+	const { saveEntityRecord } = useDispatch( coreStore );
 	const { globalStylesId } = useSelect( ( select ) => {
 		const { __experimentalGetCurrentGlobalStylesId } = select( coreStore );
 		return { globalStylesId: __experimentalGetCurrentGlobalStylesId() };
@@ -94,29 +94,61 @@ function FontLibraryProvider( { children } ) {
 		'base'
 	);
 
-	// Save font families to the global styles post in the database.
-	const saveFontFamilies = () => {
-		saveSpecifiedEntityEdits( 'root', 'globalStyles', globalStylesId, [
-			'settings.typography.fontFamilies',
-		] );
+	/*
+	 * Save the font families to the database.
+
+	 * This function is called when the user activates or deactivates a font family.
+	 * It only updates the global styles post content in the database for new font families.
+	 * This avoids saving other styles/settings changed by the user using other parts of the editor.
+	 * 
+	 * It uses the font families from the param to avoid using the font families from an outdated state.
+	 * 
+	 * @param {Array} fonts - The font families that will be saved to the database.
+	 */
+	const saveFontFamilies = async ( fonts ) => {
+		// Gets the global styles database post content.
+		const updatedGlobalStyles = globalStyles.record;
+
+		// Updates the database version of global styles with the edited font families in the client.
+		setNestedValue(
+			updatedGlobalStyles,
+			[ 'settings', 'typography', 'fontFamilies' ],
+			fonts
+		);
+
+		// Saves a new version of the global styles in the database.
+		await saveEntityRecord( 'root', 'globalStyles', updatedGlobalStyles );
 	};
 
 	// Library Fonts
 	const [ modalTabOpen, setModalTabOpen ] = useState( false );
 	const [ libraryFontSelected, setLibraryFontSelected ] = useState( null );
 
-	const baseThemeFonts = baseFontFamilies?.theme
-		? baseFontFamilies.theme
-				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
-				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
-		: [];
-
+	// Themes Fonts are the fonts defined in the global styles (database persisted theme.json data).
 	const themeFonts = fontFamilies?.theme
 		? fontFamilies.theme
 				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
 				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
 		: [];
 
+	const themeFontsSlugs = new Set( themeFonts.map( ( f ) => f.slug ) );
+
+	/*
+	 * Base Theme Fonts are the fonts defined in the theme.json *file*.
+	 *
+	 * Uses the fonts from global styles + the ones from the theme.json file that hasn't repeated slugs.
+	 * Avoids incosistencies with the fonts listed in the font library modal as base (unactivated).
+	 * These inconsistencies can happen when the active theme fonts in global styles aren't defined in theme.json file as when a theme style variation is applied.
+	 */
+	const baseThemeFonts = baseFontFamilies?.theme
+		? themeFonts.concat(
+				baseFontFamilies.theme
+					.filter( ( f ) => ! themeFontsSlugs.has( f.slug ) )
+					.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
+					.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		  )
+		: [];
+
 	const customFonts = fontFamilies?.custom
 		? fontFamilies.custom
 				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
@@ -144,8 +176,7 @@ function FontLibraryProvider( { children } ) {
 			return;
 		}
 
-		const fonts =
-			font.source === 'theme' ? baseThemeFonts : baseCustomFonts;
+		const fonts = font.source === 'theme' ? themeFonts : baseCustomFonts;
 
 		// Tries to find the font in the installed fonts
 		const fontSelected = fonts.find( ( f ) => f.slug === font.slug );
@@ -269,11 +300,13 @@ function FontLibraryProvider( { children } ) {
 					sucessfullyInstalledFontFaces?.length > 0 ||
 					alreadyInstalledFontFaces?.length > 0
 				) {
-					fontFamilyToInstall.fontFace = [
+					// Use font data from REST API not from client to ensure
+					// correct font information is used.
+					installedFontFamily.fontFace = [
 						...sucessfullyInstalledFontFaces,
-						...alreadyInstalledFontFaces,
 					];
-					fontFamiliesToActivate.push( fontFamilyToInstall );
+
+					fontFamiliesToActivate.push( installedFontFamily );
 				}
 
 				// If it's a system font but was installed successfully, activate it.
@@ -308,15 +341,11 @@ function FontLibraryProvider( { children } ) {
 
 			if ( fontFamiliesToActivate.length > 0 ) {
 				// Activate the font family (add the font family to the global styles).
-				activateCustomFontFamilies( fontFamiliesToActivate );
-
-				// Save the global styles to the database.
-				await saveSpecifiedEntityEdits(
-					'root',
-					'globalStyles',
-					globalStylesId,
-					[ 'settings.typography.fontFamilies' ]
+				const activeFonts = activateCustomFontFamilies(
+					fontFamiliesToActivate
 				);
+				// Save the global styles to the database.
+				await saveFontFamilies( activeFonts );
 
 				refreshLibrary();
 			}
@@ -346,14 +375,11 @@ function FontLibraryProvider( { children } ) {
 			// 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',
-					'globalStyles',
-					globalStylesId,
-					[ 'settings.typography.fontFamilies' ]
+				const activeFonts = deactivateFontFamily(
+					fontFamilyToUninstall
 				);
+				// Save the global styles to the database.
+				await saveFontFamilies( activeFonts );
 			}
 
 			// Refresh the library (the library font families from database).
@@ -377,27 +403,54 @@ function FontLibraryProvider( { children } ) {
 		const newCustomFonts = initialCustomFonts.filter(
 			( f ) => f.slug !== font.slug
 		);
-		setFontFamilies( {
+		const activeFonts = {
 			...fontFamilies,
 			[ font.source ]: newCustomFonts,
-		} );
+		};
+		setFontFamilies( activeFonts );
 
 		if ( font.fontFace ) {
 			font.fontFace.forEach( ( face ) => {
 				unloadFontFaceInBrowser( face, 'all' );
 			} );
 		}
+		return activeFonts;
 	};
 
 	const activateCustomFontFamilies = ( fontsToAdd ) => {
-		// Merge the existing custom fonts with the new fonts.
-		// Activate the fonts by set the new custom fonts array.
-		setFontFamilies( {
+		const fontsToActivate = cleanFontsForSave( fontsToAdd );
+
+		const activeFonts = {
 			...fontFamilies,
-			custom: mergeFontFamilies( fontFamilies?.custom, fontsToAdd ),
-		} );
+			// Merge the existing custom fonts with the new fonts.
+			custom: mergeFontFamilies( fontFamilies?.custom, fontsToActivate ),
+		};
+
+		// Activate the fonts by set the new custom fonts array.
+		setFontFamilies( activeFonts );
+
+		loadFontsInBrowser( fontsToActivate );
+
+		return activeFonts;
+	};
+
+	// Removes the id from the families and faces to avoid saving that to global styles post content.
+	const cleanFontsForSave = ( fonts ) => {
+		return fonts.map( ( { id: _familyDbId, fontFace, ...font } ) => ( {
+			...font,
+			...( fontFace && fontFace.length > 0
+				? {
+						fontFace: fontFace.map(
+							( { id: _faceDbId, ...face } ) => face
+						),
+				  }
+				: {} ),
+		} ) );
+	};
+
+	const loadFontsInBrowser = ( fonts ) => {
 		// Add custom fonts to the browser.
-		fontsToAdd.forEach( ( font ) => {
+		fonts.forEach( ( font ) => {
 			if ( font.fontFace ) {
 				font.fontFace.forEach( ( face ) => {
 					// Load font faces just in the iframe because they already are in the document.
@@ -489,6 +542,7 @@ function FontLibraryProvider( { children } ) {
 			value={ {
 				libraryFontSelected,
 				handleSetLibraryFontSelected,
+				fontFamilies,
 				themeFonts,
 				baseThemeFonts,
 				customFonts,

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

@@ -361,6 +361,7 @@ function FontCollection( { slug } ) {
 							isSmall
 							onClick={ () => {
 								setSelectedFont( null );
+								setNotice( null );
 							} }
 							aria-label={ __( 'Navigate to the previous view' ) }
 						/>

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import {
 	Modal,
 	privateApis as componentsPrivateApis,
@@ -23,7 +23,7 @@ const { Tabs } = unlock( componentsPrivateApis );
 
 const DEFAULT_TAB = {
 	id: 'installed-fonts',
-	title: __( 'Library' ),
+	title: _x( 'Library', 'Font library' ),
 };
 
 const UPLOAD_TAB = {

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

@@ -49,6 +49,7 @@ function InstalledFonts() {
 		fontFamiliesHasChanges,
 		notice,
 		setNotice,
+		fontFamilies,
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
 	const customFontFamilyId =
@@ -262,7 +263,9 @@ function InstalledFonts() {
 				) }
 				<Button
 					variant="primary"
-					onClick={ saveFontFamilies }
+					onClick={ () => {
+						saveFontFamilies( fontFamilies );
+					} }
 					disabled={ ! fontFamiliesHasChanges }
 					__experimentalIsFocusable
 				>

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

@@ -234,10 +234,23 @@ export function makeFontFacesFormData( font ) {
 }
 
 export async function batchInstallFontFaces( fontFamilyId, fontFacesData ) {
-	const promises = fontFacesData.map( ( faceData ) =>
-		fetchInstallFontFace( fontFamilyId, faceData )
-	);
-	const responses = await Promise.allSettled( promises );
+	const responses = [];
+
+	/*
+	 * Uses the same response format as Promise.allSettled, but executes requests in sequence to work
+	 * around a race condition that can cause an error when the fonts directory doesn't exist yet.
+	 */
+	for ( const faceData of fontFacesData ) {
+		try {
+			const response = await fetchInstallFontFace(
+				fontFamilyId,
+				faceData
+			);
+			responses.push( { status: 'fulfilled', value: response } );
+		} catch ( error ) {
+			responses.push( { status: 'rejected', reason: error } );
+		}
+	}
 
 	const results = {
 		errors: [],

package/src/hooks/push-changes-to-global-styles/index.js

@@ -26,6 +26,7 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { useSupportedStyles } from '../../components/global-styles/hooks';
 import { unlock } from '../../lock-unlock';
+import setNestedValue from '../../utils/set-nested-value';
 
 const { cleanEmptyObject, GlobalStylesContext } = unlock(
 	blockEditorPrivateApis
@@ -235,46 +236,6 @@ function useChangesToPush( name, attributes, userConfig ) {
 	}, [ supports, attributes, blockUserConfig ] );
 }
 
-/**
- * Sets the value at path of object.
- * If a portion of path doesn’t exist, it’s created.
- * Arrays are created for missing index properties while objects are created
- * for all other missing properties.
- *
- * This function intentionally mutates the input object.
- *
- * Inspired by _.set().
- *
- * @see https://lodash.com/docs/4.17.15#set
- *
- * @todo Needs to be deduplicated with its copy in `@wordpress/core-data`.
- *
- * @param {Object} object Object to modify
- * @param {Array}  path   Path of the property to set.
- * @param {*}      value  Value to set.
- */
-function setNestedValue( object, path, value ) {
-	if ( ! object || typeof object !== 'object' ) {
-		return object;
-	}
-
-	path.reduce( ( acc, key, idx ) => {
-		if ( acc[ key ] === undefined ) {
-			if ( Number.isInteger( path[ idx + 1 ] ) ) {
-				acc[ key ] = [];
-			} else {
-				acc[ key ] = {};
-			}
-		}
-		if ( idx === path.length - 1 ) {
-			acc[ key ] = value;
-		}
-		return acc[ key ];
-	}, object );
-
-	return object;
-}
-
 function cloneDeep( object ) {
 	return ! object ? {} : JSON.parse( JSON.stringify( object ) );
 }

package/src/utils/set-nested-value.js

@@ -0,0 +1,39 @@
+/**
+ * Sets the value at path of object.
+ * If a portion of path doesn’t exist, it’s created.
+ * Arrays are created for missing index properties while objects are created
+ * for all other missing properties.
+ *
+ * This function intentionally mutates the input object.
+ *
+ * Inspired by _.set().
+ *
+ * @see https://lodash.com/docs/4.17.15#set
+ *
+ * @todo Needs to be deduplicated with its copy in `@wordpress/core-data`.
+ *
+ * @param {Object} object Object to modify
+ * @param {Array}  path   Path of the property to set.
+ * @param {*}      value  Value to set.
+ */
+export default function setNestedValue( object, path, value ) {
+	if ( ! object || typeof object !== 'object' ) {
+		return object;
+	}
+
+	path.reduce( ( acc, key, idx ) => {
+		if ( acc[ key ] === undefined ) {
+			if ( Number.isInteger( path[ idx + 1 ] ) ) {
+				acc[ key ] = [];
+			} else {
+				acc[ key ] = {};
+			}
+		}
+		if ( idx === path.length - 1 ) {
+			acc[ key ] = value;
+		}
+		return acc[ key ];
+	}, object );
+
+	return object;
+}