@wordpress/edit-site 5.18.1-next.5a1d1283.0 → 5.19.1

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

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import CollectionFontVariant from './collection-font-variant';
+import { isFontFontFaceInOutline } from './utils/fonts-outline';
+import { sortFontFaces } from './utils/sort-font-faces';
+
+function CollectionFontDetails( {
+	font,
+	handleToggleVariant,
+	fontToInstallOutline,
+} ) {
+	const fontFaces =
+		font.fontFace && font.fontFace.length
+			? sortFontFaces( font.fontFace )
+			: [
+					{
+						fontFamily: font.fontFamily,
+						fontStyle: 'normal',
+						fontWeight: '400',
+					},
+			  ];
+
+	return (
+		<>
+			<Spacer margin={ 4 } />
+			<VStack spacing={ 0 }>
+				<Spacer margin={ 8 } />
+				{ fontFaces.map( ( face, i ) => (
+					<CollectionFontVariant
+						font={ font }
+						face={ face }
+						key={ `face${ i }` }
+						handleToggleVariant={ handleToggleVariant }
+						selected={ isFontFontFaceInOutline(
+							font.slug,
+							face,
+							fontToInstallOutline
+						) }
+					/>
+				) ) }
+			</VStack>
+			<Spacer margin={ 8 } />
+		</>
+	);
+}
+
+export default CollectionFontDetails;

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

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { CheckboxControl, Flex } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import { getFontFaceVariantName } from './utils';
+
+/**
+ * Internal dependencies
+ */
+import FontFaceDemo from './font-demo';
+
+function CollectionFontVariant( {
+	face,
+	font,
+	handleToggleVariant,
+	selected,
+} ) {
+	const handleToggleActivation = () => {
+		if ( font?.fontFace ) {
+			handleToggleVariant( font, face );
+			return;
+		}
+		handleToggleVariant( font );
+	};
+
+	const displayName = font.name + ' ' + getFontFaceVariantName( face );
+
+	return (
+		<div className="font-library-modal__library-font-variant">
+			<Flex justify="space-between" align="center" gap="1rem">
+				<FontFaceDemo fontFace={ face } text={ displayName } />
+				<CheckboxControl
+					checked={ selected }
+					onChange={ handleToggleActivation }
+					__nextHasNoMarginBottom={ true }
+				/>
+			</Flex>
+		</div>
+	);
+}
+
+export default CollectionFontVariant;

package/src/components/global-styles/font-library-modal/confirm-delete-dialog.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+
+function ConfirmDeleteDialog( {
+	font,
+	isConfirmDeleteOpen,
+	handleConfirmUninstall,
+	handleCancelUninstall,
+} ) {
+	return (
+		<ConfirmDialog
+			isOpen={ isConfirmDeleteOpen }
+			cancelButtonText={ __( 'No, keep the font' ) }
+			confirmButtonText={ __( 'Yes, uninstall' ) }
+			onCancel={ handleCancelUninstall }
+			onConfirm={ handleConfirmUninstall }
+		>
+			{ font &&
+				sprintf(
+					/* translators: %s: Name of the font. */
+					__(
+						'Would you like to remove %s and all its variants and assets?'
+					),
+					font.name
+				) }
+		</ConfirmDialog>
+	);
+}
+
+export default ConfirmDeleteDialog;

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

@@ -0,0 +1,378 @@
+/**
+ * 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 { store as noticesStore } from '@wordpress/notices';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	fetchInstallFonts,
+	fetchUninstallFonts,
+	fetchFontCollections,
+	fetchFontCollection,
+} from './resolvers';
+import { unlock } from '../../../lock-unlock';
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+import {
+	setUIValuesNeeded,
+	mergeFontFamilies,
+	loadFontFaceInBrowser,
+	getDisplaySrcFromFontFace,
+	makeFormDataFromFontFamilies,
+} from './utils';
+import { toggleFont } from './utils/toggleFont';
+import getIntersectingFontFaces from './utils/get-intersecting-font-faces';
+
+export const FontLibraryContext = createContext( {} );
+
+function FontLibraryProvider( { children } ) {
+	const { __experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits } =
+		useDispatch( coreStore );
+	const { globalStylesId } = useSelect( ( select ) => {
+		const { __experimentalGetCurrentGlobalStylesId } = select( coreStore );
+		return { globalStylesId: __experimentalGetCurrentGlobalStylesId() };
+	} );
+
+	const globalStyles = useEntityRecord(
+		'root',
+		'globalStyles',
+		globalStylesId
+	);
+	const fontFamiliesHasChanges =
+		!! globalStyles?.edits?.settings?.typography?.fontFamilies;
+
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const [ isInstalling, setIsInstalling ] = useState( false );
+	const [ refreshKey, setRefreshKey ] = useState( 0 );
+
+	const refreshLibrary = () => {
+		setRefreshKey( Date.now() );
+	};
+
+	const {
+		records: libraryPosts = [],
+		isResolving: isResolvingLibrary,
+		hasResolved: hasResolvedLibrary,
+	} = useEntityRecords( 'postType', 'wp_font_family', { refreshKey } );
+
+	const libraryFonts =
+		( libraryPosts || [] ).map( ( post ) =>
+			JSON.parse( post.content.raw )
+		) || [];
+
+	// Global Styles (settings) font families
+	const [ fontFamilies, setFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies'
+	);
+	// theme.json file font families
+	const [ baseFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies',
+		undefined,
+		'base'
+	);
+
+	// Save font families to the global styles post in the database.
+	const saveFontFamilies = () => {
+		saveSpecifiedEntityEdits( 'root', 'globalStyles', globalStylesId, [
+			'settings.typography.fontFamilies',
+		] );
+	};
+
+	// 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 ) )
+		: [];
+
+	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' ? baseThemeFonts : 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,
+		} );
+	};
+
+	const toggleModal = ( tabName ) => {
+		setModalTabOpen( tabName || null );
+	};
+
+	// Demo
+	const [ loadedFontUrls ] = useState( new Set() );
+
+	// Theme data
+	const { site, currentTheme } = useSelect( ( select ) => {
+		return {
+			site: select( coreStore ).getSite(),
+			currentTheme: select( coreStore ).getCurrentTheme(),
+		};
+	} );
+	const themeUrl =
+		site?.url + '/wp-content/themes/' + currentTheme?.stylesheet;
+
+	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
+
+			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( fonts ) {
+		setIsInstalling( true );
+		try {
+			// Prepare formData to install.
+			const formData = makeFormDataFromFontFamilies( fonts );
+			// Install the fonts (upload the font files to the server and create the post in the database).
+			const fontsInstalled = await fetchInstallFonts( formData );
+			// 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,
+				fonts
+			);
+			// Activate the font families (add the font families to the global styles).
+			activateCustomFontFamilies( fontToBeActivated );
+			// Save the global styles to the database.
+			saveSpecifiedEntityEdits( 'root', 'globalStyles', globalStylesId, [
+				'settings.typography.fontFamilies',
+			] );
+			refreshLibrary();
+			setIsInstalling( false );
+			return true;
+		} catch ( e ) {
+			// eslint-disable-next-line no-console
+			console.error( e );
+			createErrorNotice( __( 'Error installing fonts.' ), {
+				type: 'snackbar',
+			} );
+			setIsInstalling( false );
+			return false;
+		}
+	}
+
+	async function uninstallFont( font ) {
+		try {
+			// Uninstall the font (remove the font files from the server and the post from the database).
+			await fetchUninstallFonts( [ font ] );
+			// Deactivate the font family (remove the font family from the global styles).
+			deactivateFontFamily( font );
+			// Save the global styles to the database.
+			await saveSpecifiedEntityEdits(
+				'root',
+				'globalStyles',
+				globalStylesId,
+				[ 'settings.typography.fontFamilies' ]
+			);
+			// Refresh the library (the the library font families from database).
+			refreshLibrary();
+			return true;
+		} catch ( e ) {
+			// eslint-disable-next-line no-console
+			console.error( e );
+			createErrorNotice( __( 'Error uninstalling fonts.' ), {
+				type: 'snackbar',
+			} );
+			return false;
+		}
+	}
+
+	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
+		);
+		setFontFamilies( {
+			...fontFamilies,
+			[ font.source ]: newCustomFonts,
+		} );
+	};
+
+	const activateCustomFontFamilies = ( fontsToAdd ) => {
+		// Merge the existing custom fonts with the new fonts.
+		const newCustomFonts = mergeFontFamilies(
+			fontFamilies?.custom,
+			fontsToAdd
+		);
+		// Activate the fonts by set the new custom fonts array.
+		setFontFamilies( {
+			...fontFamilies,
+			custom: newCustomFonts,
+		} );
+		// Add custom fonts to the browser.
+		fontsToAdd.forEach( ( font ) => {
+			font.fontFace.forEach( ( face ) => {
+				// Load font faces just in the iframe because they already are in the document.
+				loadFontFaceInBrowser(
+					face,
+					getDisplaySrcFromFontFace( face.src ),
+					'iframe'
+				);
+			} );
+		} );
+	};
+
+	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 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, themeUrl );
+		// If the font is already loaded, don't load it again.
+		if ( 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 ( id ) => {
+		const hasData = !! collections.find(
+			( collection ) => collection.id === id
+		)?.data;
+		if ( hasData ) return;
+		const response = await fetchFontCollection( id );
+		const updatedCollections = collections.map( ( collection ) =>
+			collection.id === id
+				? { ...collection, data: { ...response?.data } }
+				: collection
+		);
+		setFontCollections( updatedCollections );
+	};
+
+	useEffect( () => {
+		getFontCollections();
+	}, [] );
+
+	return (
+		<FontLibraryContext.Provider
+			value={ {
+				libraryFontSelected,
+				handleSetLibraryFontSelected,
+				themeFonts,
+				baseThemeFonts,
+				customFonts,
+				baseCustomFonts,
+				isFontActivated,
+				getFontFacesActivated,
+				loadFontFaceAsset,
+				installFonts,
+				uninstallFont,
+				toggleActivateFont,
+				getAvailableFontsOutline,
+				modalTabOpen,
+				toggleModal,
+				refreshLibrary,
+				saveFontFamilies,
+				fontFamiliesHasChanges,
+				isResolvingLibrary,
+				hasResolvedLibrary,
+				isInstalling,
+				collections,
+				getFontCollection,
+			} }
+		>
+			{ children }
+		</FontLibraryContext.Provider>
+	);
+}
+
+export default FontLibraryProvider;

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

@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { _n } from '@wordpress/i18n';
+import {
+	__experimentalText as Text,
+	Button,
+	Flex,
+	FlexItem,
+	Icon,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FontDemo from './font-demo';
+import { getFamilyPreviewStyle } from './utils/preview-styles';
+import { chevronRight } from '@wordpress/icons';
+
+function FontCard( { font, onClick, variantsText } ) {
+	const fakeFontFace = {
+		fontStyle: 'normal',
+		fontWeight: '400',
+		fontFamily: font.fontFamily,
+		fake: true,
+	};
+
+	const displayFontFace =
+		font.fontFace && font.fontFace.length
+			? font?.fontFace?.find(
+					( face ) =>
+						face.fontStyle === 'normal' && face.fontWeight === '400'
+			  ) || font.fontFace[ 0 ]
+			: fakeFontFace;
+
+	const demoStyle = getFamilyPreviewStyle( font );
+
+	const variantsCount = font.fontFace?.length || 1;
+
+	const style = {
+		cursor: !! onClick ? 'pointer' : 'default',
+	};
+
+	return (
+		<Button
+			onClick={ onClick }
+			style={ style }
+			className="font-library-modal__font-card"
+		>
+			<Flex justify="space-between" wrap={ false }>
+				<FontDemo
+					customPreviewUrl={ font.preview }
+					fontFace={ displayFontFace }
+					text={ font.name }
+					style={ demoStyle }
+				/>
+				<Flex justify="flex-end">
+					<FlexItem>
+						<Text className="font-library-modal__font-card__count">
+							{ variantsText ||
+								variantsCount +
+									' ' +
+									_n( 'variant', 'variants', variantsCount ) }
+						</Text>
+					</FlexItem>
+					<FlexItem>
+						<Icon icon={ chevronRight } />
+					</FlexItem>
+				</Flex>
+			</Flex>
+		</Button>
+	);
+}
+
+export default FontCard;