@wordpress/edit-site 6.33.3 → 6.34.0

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

@@ -1,540 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext, useState, useEffect } from '@wordpress/element';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	useEntityRecord,
-	useEntityRecords,
-	store as coreStore,
-} from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import {
-	fetchGetFontFamilyBySlug,
-	fetchInstallFontFamily,
-	fetchUninstallFontFamily,
-	fetchFontCollections,
-	fetchFontCollection,
-} from './resolvers';
-import { unlock } from '../../../lock-unlock';
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
-import {
-	setUIValuesNeeded,
-	mergeFontFamilies,
-	loadFontFaceInBrowser,
-	unloadFontFaceInBrowser,
-	getDisplaySrcFromFontFace,
-	makeFontFacesFormData,
-	makeFontFamilyFormData,
-	batchInstallFontFaces,
-	checkFontFaceInstalled,
-} from './utils';
-import { toggleFont } from './utils/toggleFont';
-import setNestedValue from '../../../utils/set-nested-value';
-
-export const FontLibraryContext = createContext( {} );
-FontLibraryContext.displayName = 'FontLibraryContext';
-
-function FontLibraryProvider( { children } ) {
-	const { saveEntityRecord } = useDispatch( coreStore );
-	const { globalStylesId } = useSelect( ( select ) => {
-		const { __experimentalGetCurrentGlobalStylesId } = select( coreStore );
-		return { globalStylesId: __experimentalGetCurrentGlobalStylesId() };
-	} );
-
-	const globalStyles = useEntityRecord(
-		'root',
-		'globalStyles',
-		globalStylesId
-	);
-
-	const [ isInstalling, setIsInstalling ] = useState( false );
-	const [ refreshKey, setRefreshKey ] = useState( 0 );
-
-	const refreshLibrary = () => {
-		setRefreshKey( Date.now() );
-	};
-
-	const { records: libraryPosts = [], isResolving: isResolvingLibrary } =
-		useEntityRecords( 'postType', 'wp_font_family', {
-			refreshKey,
-			_embed: true,
-		} );
-
-	const libraryFonts =
-		( 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(
-		'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 );
-
-	// 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 customFonts = fontFamilies?.custom
-		? fontFamilies.custom
-				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
-				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
-		: [];
-
-	const baseCustomFonts = libraryFonts
-		? libraryFonts
-				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
-				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
-		: [];
-
-	useEffect( () => {
-		if ( ! modalTabOpen ) {
-			setLibraryFontSelected( null );
-		}
-	}, [ modalTabOpen ] );
-
-	const handleSetLibraryFontSelected = ( font ) => {
-		// If font is null, reset the selected font
-		if ( ! font ) {
-			setLibraryFontSelected( null );
-			return;
-		}
-
-		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 );
-		// If the font is not found (it is only defined in custom styles), use the font from custom styles
-		setLibraryFontSelected( {
-			...( fontSelected || font ),
-			source: font.source,
-		} );
-	};
-
-	// Demo
-	const [ loadedFontUrls ] = useState( new Set() );
-
-	const getAvailableFontsOutline = ( availableFontFamilies ) => {
-		const outline = availableFontFamilies.reduce( ( acc, font ) => {
-			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;
-		}, {} );
-		return outline;
-	};
-
-	const getActivatedFontsOutline = ( source ) => {
-		switch ( source ) {
-			case 'theme':
-				return getAvailableFontsOutline( themeFonts );
-			case 'custom':
-			default:
-				return getAvailableFontsOutline( customFonts );
-		}
-	};
-
-	const isFontActivated = ( slug, style, weight, source ) => {
-		if ( ! style && ! weight ) {
-			return !! getActivatedFontsOutline( source )[ slug ];
-		}
-		return !! getActivatedFontsOutline( source )[ slug ]?.includes(
-			style + weight
-		);
-	};
-
-	const getFontFacesActivated = ( slug, source ) => {
-		return getActivatedFontsOutline( source )[ slug ] || [];
-	};
-
-	async function installFonts( fontFamiliesToInstall ) {
-		setIsInstalling( true );
-		try {
-			const fontFamiliesToActivate = [];
-			let installationErrors = [];
-
-			for ( const fontFamilyToInstall of fontFamiliesToInstall ) {
-				let isANewFontFamily = false;
-
-				// Get the font family if it already exists.
-				let installedFontFamily = await fetchGetFontFamilyBySlug(
-					fontFamilyToInstall.slug
-				);
-
-				// Otherwise create it.
-				if ( ! installedFontFamily ) {
-					isANewFontFamily = true;
-					// 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).
-				let successfullyInstalledFontFaces = [];
-				let unsuccessfullyInstalledFontFaces = [];
-				if ( fontFamilyToInstall?.fontFace?.length > 0 ) {
-					const response = await batchInstallFontFaces(
-						installedFontFamily.id,
-						makeFontFacesFormData( fontFamilyToInstall )
-					);
-					successfullyInstalledFontFaces = response?.successes;
-					unsuccessfullyInstalledFontFaces = response?.errors;
-				}
-
-				// Use the successfully installed font faces
-				// As well as any font faces that were already installed (those will be activated)
-				if (
-					successfullyInstalledFontFaces?.length > 0 ||
-					alreadyInstalledFontFaces?.length > 0
-				) {
-					// Use font data from REST API not from client to ensure
-					// correct font information is used.
-					installedFontFamily.fontFace = [
-						...successfullyInstalledFontFaces,
-					];
-
-					fontFamiliesToActivate.push( installedFontFamily );
-				}
-
-				// If it's a system font but was installed successfully, activate it.
-				if (
-					installedFontFamily &&
-					! fontFamilyToInstall?.fontFace?.length
-				) {
-					fontFamiliesToActivate.push( installedFontFamily );
-				}
-
-				// If the font family is new and is not a system font, delete it to avoid having font families without font faces.
-				if (
-					isANewFontFamily &&
-					fontFamilyToInstall?.fontFace?.length > 0 &&
-					successfullyInstalledFontFaces?.length === 0
-				) {
-					await fetchUninstallFontFamily( installedFontFamily.id );
-				}
-
-				installationErrors = installationErrors.concat(
-					unsuccessfullyInstalledFontFaces
-				);
-			}
-
-			installationErrors = installationErrors.reduce(
-				( unique, item ) =>
-					unique.includes( item.message )
-						? unique
-						: [ ...unique, item.message ],
-				[]
-			);
-
-			if ( fontFamiliesToActivate.length > 0 ) {
-				// Activate the font family (add the font family to the global styles).
-				const activeFonts = activateCustomFontFamilies(
-					fontFamiliesToActivate
-				);
-				// Save the global styles to the database.
-				await saveFontFamilies( activeFonts );
-
-				refreshLibrary();
-			}
-
-			if ( installationErrors.length > 0 ) {
-				const installError = new Error(
-					__( 'There was an error installing fonts.' )
-				);
-
-				installError.installationErrors = installationErrors;
-
-				throw installError;
-			}
-		} finally {
-			setIsInstalling( false );
-		}
-	}
-
-	async function uninstallFontFamily( fontFamilyToUninstall ) {
-		try {
-			// 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 ) {
-				const activeFonts = deactivateFontFamily(
-					fontFamilyToUninstall
-				);
-				// Save the global styles to the database.
-				await saveFontFamilies( activeFonts );
-			}
-
-			// Refresh the library (the library font families from database).
-			refreshLibrary();
-
-			return uninstalledFontFamily;
-		} catch ( error ) {
-			// eslint-disable-next-line no-console
-			console.error(
-				`There was an error uninstalling the font family:`,
-				error
-			);
-			throw error;
-		}
-	}
-
-	const deactivateFontFamily = ( font ) => {
-		// If the user doesn't have custom fonts defined, include as custom fonts all the theme fonts
-		// We want to save as active all the theme fonts at the beginning
-		const initialCustomFonts = fontFamilies?.[ font.source ] ?? [];
-		const newCustomFonts = initialCustomFonts.filter(
-			( f ) => f.slug !== font.slug
-		);
-		const activeFonts = {
-			...fontFamilies,
-			[ font.source ]: newCustomFonts,
-		};
-		setFontFamilies( activeFonts );
-
-		if ( font.fontFace ) {
-			font.fontFace.forEach( ( face ) => {
-				unloadFontFaceInBrowser( face, 'all' );
-			} );
-		}
-		return activeFonts;
-	};
-
-	const activateCustomFontFamilies = ( fontsToAdd ) => {
-		const fontsToActivate = cleanFontsForSave( fontsToAdd );
-
-		const activeFonts = {
-			...fontFamilies,
-			// 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.
-		fonts.forEach( ( font ) => {
-			if ( font.fontFace ) {
-				font.fontFace.forEach( ( face ) => {
-					// Load font faces just in the iframe because they already are in the document.
-					loadFontFaceInBrowser(
-						face,
-						getDisplaySrcFromFontFace( face.src ),
-						'all'
-					);
-				} );
-			}
-		} );
-	};
-
-	const toggleActivateFont = ( font, face ) => {
-		// If the user doesn't have custom fonts defined, include as custom fonts all the theme fonts
-		// We want to save as active all the theme fonts at the beginning
-		const initialFonts = fontFamilies?.[ font.source ] ?? [];
-		// Toggles the received font family or font face
-		const newFonts = toggleFont( font, face, initialFonts );
-		// Updates the font families activated in global settings:
-		setFontFamilies( {
-			...fontFamilies,
-			[ font.source ]: newFonts,
-		} );
-
-		const isFaceActivated = isFontActivated(
-			font.slug,
-			face?.fontStyle,
-			face?.fontWeight,
-			font.source
-		);
-
-		if ( isFaceActivated ) {
-			unloadFontFaceInBrowser( face, 'all' );
-		} else {
-			loadFontFaceInBrowser(
-				face,
-				getDisplaySrcFromFontFace( face?.src ),
-				'all'
-			);
-		}
-	};
-
-	const loadFontFaceAsset = async ( fontFace ) => {
-		// If the font doesn't have a src, don't load it.
-		if ( ! fontFace.src ) {
-			return;
-		}
-		// Get the src of the font.
-		const src = getDisplaySrcFromFontFace( fontFace.src );
-		// If the font is already loaded, don't load it again.
-		if ( ! src || loadedFontUrls.has( src ) ) {
-			return;
-		}
-		// Load the font in the browser.
-		loadFontFaceInBrowser( fontFace, src, 'document' );
-		// Add the font to the loaded fonts list.
-		loadedFontUrls.add( src );
-	};
-
-	// Font Collections
-	const [ collections, setFontCollections ] = useState( [] );
-	const getFontCollections = async () => {
-		const response = await fetchFontCollections();
-		setFontCollections( response );
-	};
-	const getFontCollection = async ( slug ) => {
-		try {
-			const hasData = !! collections.find(
-				( collection ) => collection.slug === slug
-			)?.font_families;
-			if ( hasData ) {
-				return;
-			}
-			const response = await fetchFontCollection( slug );
-			const updatedCollections = collections.map( ( collection ) =>
-				collection.slug === slug
-					? { ...collection, ...response }
-					: collection
-			);
-			setFontCollections( updatedCollections );
-		} catch ( e ) {
-			// eslint-disable-next-line no-console
-			console.error( e );
-			throw e;
-		}
-	};
-
-	useEffect( () => {
-		getFontCollections();
-	}, [] );
-
-	return (
-		<FontLibraryContext.Provider
-			value={ {
-				libraryFontSelected,
-				handleSetLibraryFontSelected,
-				fontFamilies,
-				baseCustomFonts,
-				isFontActivated,
-				getFontFacesActivated,
-				loadFontFaceAsset,
-				installFonts,
-				uninstallFontFamily,
-				toggleActivateFont,
-				getAvailableFontsOutline,
-				modalTabOpen,
-				setModalTabOpen,
-				refreshLibrary,
-				saveFontFamilies,
-				isResolvingLibrary,
-				isInstalling,
-				collections,
-				getFontCollection,
-			} }
-		>
-			{ children }
-		</FontLibraryContext.Provider>
-	);
-}
-
-export default FontLibraryProvider;

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

@@ -1,67 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { _n, sprintf, isRTL } from '@wordpress/i18n';
-import {
-	useNavigator,
-	__experimentalText as Text,
-	Button,
-	Flex,
-	FlexItem,
-	Icon,
-} from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import FontDemo from './font-demo';
-import { chevronLeft, chevronRight } from '@wordpress/icons';
-
-function FontCard( { font, onClick, variantsText, navigatorPath } ) {
-	const variantsCount = font.fontFace?.length || 1;
-
-	const style = {
-		cursor: !! onClick ? 'pointer' : 'default',
-	};
-
-	const navigator = useNavigator();
-
-	return (
-		<Button
-			__next40pxDefaultSize
-			onClick={ () => {
-				onClick();
-				if ( navigatorPath ) {
-					navigator.goTo( navigatorPath );
-				}
-			} }
-			style={ style }
-			className="font-library-modal__font-card"
-		>
-			<Flex justify="space-between" wrap={ false }>
-				<FontDemo font={ font } />
-				<Flex justify="flex-end">
-					<FlexItem>
-						<Text className="font-library-modal__font-card__count">
-							{ variantsText ||
-								sprintf(
-									/* translators: %d: Number of font variants. */
-									_n(
-										'%d variant',
-										'%d variants',
-										variantsCount
-									),
-									variantsCount
-								) }
-						</Text>
-					</FlexItem>
-					<FlexItem>
-						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
-					</FlexItem>
-				</Flex>
-			</Flex>
-		</Button>
-	);
-}
-
-export default FontCard;