@wordpress/edit-site 5.18.0 → 5.19.0

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

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+import { useContext, useEffect, useState, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './context';
+
+function FontFaceDemo( { fontFace, text, style = {} } ) {
+	const ref = useRef( null );
+	const [ isIntersecting, setIsIntersecting ] = useState( false );
+	const [ isAssetLoaded, setIsAssetLoaded ] = useState( false );
+	const { loadFontFaceAsset } = useContext( FontLibraryContext );
+	const { fontFamily, fontStyle, fontWeight } = fontFace;
+
+	const demoStyle = {
+		fontWeight,
+		fontStyle,
+		fontFamily,
+		flexShrink: 0,
+		fontSize: '18px',
+		opacity: isAssetLoaded ? '1' : '0',
+		transition: 'opacity 0.3s ease-in-out',
+		...style,
+	};
+
+	useEffect( () => {
+		const observer = new window.IntersectionObserver( ( [ entry ] ) => {
+			setIsIntersecting( entry.isIntersecting );
+		}, {} );
+		observer.observe( ref.current );
+		return () => observer.disconnect();
+	}, [ ref ] );
+
+	useEffect( () => {
+		const loadAsset = async () => {
+			if ( isIntersecting ) {
+				if ( fontFace.src ) {
+					await loadFontFaceAsset( fontFace );
+				}
+				setIsAssetLoaded( true );
+			}
+		};
+		loadAsset();
+	}, [ fontFace, isIntersecting, loadFontFaceAsset ] );
+
+	return (
+		<Text style={ demoStyle } ref={ ref }>
+			{ text }
+		</Text>
+	);
+}
+
+export default FontFaceDemo;

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

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	CheckboxControl,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import FontFaceDemo from './font-demo';
+
+function FontVariant( {
+	fontFace,
+	variantName,
+	checked,
+	onClick,
+	text,
+	actionHandler,
+} ) {
+	const { fontStyle, fontWeight } = fontFace;
+	const displayVariantName = variantName || `${ fontWeight } ${ fontStyle }`;
+
+	return (
+		<div className="font-library-modal__font-variant">
+			<VStack spacing={ 1 }>
+				<HStack justify="flex-start" alignment="top">
+					{ !! actionHandler ? (
+						actionHandler
+					) : (
+						<CheckboxControl
+							checked={ checked }
+							onChange={ onClick }
+						/>
+					) }
+					{ typeof displayVariantName === 'string' ? (
+						<Text>{ displayVariantName }</Text>
+					) : (
+						displayVariantName
+					) }
+				</HStack>
+				<div className="font-library-modal__font-variant_demo-wrapper">
+					<FontFaceDemo fontFace={ fontFace } text={ text } />
+				</div>
+			</VStack>
+		</div>
+	);
+}
+
+export default FontVariant;

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

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalText as Text,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+
+function FontsGrid( { title, children, pageSize = 32 } ) {
+	const [ lastItem, setLastItem ] = useState( null );
+	const [ page, setPage ] = useState( 1 );
+	const itemsLimit = page * pageSize;
+	const items = children.slice( 0, itemsLimit );
+
+	useEffect( () => {
+		if ( lastItem ) {
+			const observer = new window.IntersectionObserver( ( [ entry ] ) => {
+				if ( entry.isIntersecting ) {
+					setPage( ( prevPage ) => prevPage + 1 );
+				}
+			} );
+
+			observer.observe( lastItem );
+
+			return () => observer.disconnect();
+		}
+	}, [ lastItem ] );
+
+	return (
+		<div className="font-library-modal__fonts-grid">
+			<VStack spacing={ 0 }>
+				{ title && (
+					<>
+						<Text className="font-library-modal__subtitle">
+							{ title }
+						</Text>
+						<Spacer margin={ 2 } />
+					</>
+				) }
+				<div className="font-library-modal__fonts-grid__main">
+					{ items.map( ( child, i ) => {
+						if ( i === itemsLimit - 1 ) {
+							return <div ref={ setLastItem }>{ child }</div>;
+						}
+						return child;
+					} ) }
+				</div>
+			</VStack>
+		</div>
+	);
+}
+
+export default FontsGrid;

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

@@ -0,0 +1,42 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Modal, TabPanel } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import InstalledFonts from './installed-fonts';
+import { MODAL_TABS } from './utils/constants';
+
+function FontLibraryModal( {
+	onRequestClose,
+	initialTabName = 'installed-fonts',
+} ) {
+	return (
+		<Modal
+			title={ __( 'Fonts' ) }
+			onRequestClose={ onRequestClose }
+			isFullScreen={ true }
+			className="font-library-modal"
+			style={ { width: '65vw' } }
+		>
+			<TabPanel
+				className="font-library-modal__tab-panel"
+				initialTabName={ initialTabName }
+				tabs={ MODAL_TABS }
+			>
+				{ ( tab ) => {
+					switch ( tab.name ) {
+						case 'installed-fonts':
+						default:
+							return <InstalledFonts />;
+					}
+				} }
+			</TabPanel>
+		</Modal>
+	);
+}
+
+export default FontLibraryModal;

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

@@ -0,0 +1,174 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useContext, useEffect, useState } from '@wordpress/element';
+import {
+	privateApis as componentsPrivateApis,
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+	Button,
+	Spinner,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import TabLayout from './tab-layout';
+import { FontLibraryContext } from './context';
+import FontsGrid from './fonts-grid';
+import LibraryFontDetails from './library-font-details';
+import LibraryFontCard from './library-font-card';
+import LocalFonts from './local-fonts';
+import ConfirmDeleteDialog from './confirm-delete-dialog';
+import { unlock } from '../../../lock-unlock';
+const { ProgressBar } = unlock( componentsPrivateApis );
+
+function InstalledFonts() {
+	const {
+		baseCustomFonts,
+		libraryFontSelected,
+		baseThemeFonts,
+		handleSetLibraryFontSelected,
+		refreshLibrary,
+		uninstallFont,
+		isResolvingLibrary,
+	} = useContext( FontLibraryContext );
+	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
+
+	const handleUnselectFont = () => {
+		handleSetLibraryFontSelected( null );
+	};
+
+	const handleSelectFont = ( font ) => {
+		handleSetLibraryFontSelected( font );
+	};
+
+	const handleConfirmUninstall = async () => {
+		const result = await uninstallFont( libraryFontSelected );
+		// If the font was succesfully uninstalled it is unselected
+		if ( result ) {
+			handleUnselectFont();
+		}
+		setIsConfirmDeleteOpen( false );
+	};
+
+	const handleUninstallClick = async () => {
+		setIsConfirmDeleteOpen( true );
+	};
+
+	const handleCancelUninstall = () => {
+		setIsConfirmDeleteOpen( false );
+	};
+
+	const tabDescription = !! libraryFontSelected
+		? __(
+				'Choose font variants. Keep in mind that too many variants could make your site slower.'
+		  )
+		: null;
+
+	const shouldDisplayDeleteButton =
+		!! libraryFontSelected && libraryFontSelected?.source !== 'theme';
+
+	useEffect( () => {
+		refreshLibrary();
+	}, [] );
+
+	return (
+		<TabLayout
+			title={ libraryFontSelected?.name || '' }
+			description={ tabDescription }
+			handleBack={ !! libraryFontSelected && handleUnselectFont }
+			footer={
+				<Footer
+					shouldDisplayDeleteButton={ shouldDisplayDeleteButton }
+					handleUninstallClick={ handleUninstallClick }
+				/>
+			}
+		>
+			<ConfirmDeleteDialog
+				font={ libraryFontSelected }
+				isConfirmDeleteOpen={ isConfirmDeleteOpen }
+				handleConfirmUninstall={ handleConfirmUninstall }
+				handleCancelUninstall={ handleCancelUninstall }
+			/>
+
+			{ ! libraryFontSelected && (
+				<>
+					{ isResolvingLibrary && <Spinner /> }
+					{ baseCustomFonts.length > 0 && (
+						<>
+							<Spacer margin={ 2 } />
+							<FontsGrid>
+								{ baseCustomFonts.map( ( font ) => (
+									<LibraryFontCard
+										font={ font }
+										key={ font.slug }
+										onClick={ () => {
+											handleSelectFont( font );
+										} }
+									/>
+								) ) }
+							</FontsGrid>
+						</>
+					) }
+
+					{ baseThemeFonts.length > 0 && (
+						<>
+							<Spacer margin={ 8 } />
+							<FontsGrid title={ __( 'Theme Fonts' ) }>
+								{ baseThemeFonts.map( ( font ) => (
+									<LibraryFontCard
+										font={ font }
+										key={ font.slug }
+										onClick={ () => {
+											handleSelectFont( font );
+										} }
+									/>
+								) ) }
+							</FontsGrid>
+						</>
+					) }
+
+					<Spacer margin={ 8 } />
+					<LocalFonts />
+				</>
+			) }
+
+			{ libraryFontSelected && (
+				<LibraryFontDetails
+					font={ libraryFontSelected }
+					isConfirmDeleteOpen={ isConfirmDeleteOpen }
+					handleConfirmUninstall={ handleConfirmUninstall }
+					handleCancelUninstall={ handleCancelUninstall }
+				/>
+			) }
+		</TabLayout>
+	);
+}
+
+function Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {
+	const { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =
+		useContext( FontLibraryContext );
+	return (
+		<HStack justify="space-between">
+			{ isInstalling && <ProgressBar /> }
+			<div>
+				{ shouldDisplayDeleteButton && (
+					<Button variant="tertiary" onClick={ handleUninstallClick }>
+						{ __( 'Delete' ) }
+					</Button>
+				) }
+			</div>
+			<Button
+				disabled={ ! fontFamiliesHasChanges }
+				variant="primary"
+				onClick={ saveFontFamilies }
+			>
+				{ __( 'Update' ) }
+			</Button>
+		</HStack>
+	);
+}
+
+export default InstalledFonts;

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

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+import { Icon } from '@wordpress/components';
+import { chevronRight } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import FontCard from './font-card';
+import { FontLibraryContext } from './context';
+
+function LibraryFontCard( { font, ...props } ) {
+	const { getFontFacesActivated } = useContext( FontLibraryContext );
+
+	const variantsInstalled = font.fontFace?.length || 1;
+	const variantsActive = getFontFacesActivated(
+		font.slug,
+		font.source
+	).length;
+	const variantsText = sprintf(
+		/* translators: %1$d: Active font variants, %2$d: Total font variants */
+		__( '%1$s/%2$s variants active' ),
+		variantsActive,
+		variantsInstalled
+	);
+
+	return (
+		<FontCard
+			font={ font }
+			variantsText={ variantsText }
+			actionHandler={ <Icon icon={ chevronRight } /> }
+			{ ...props }
+		/>
+	);
+}
+
+export default LibraryFontCard;

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

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import LibraryFontVariant from './library-font-variant';
+
+function LibraryFontDetails( { font } ) {
+	const fontFaces =
+		font.fontFace && font.fontFace.length
+			? font.fontFace.sort( ( a, b ) =>
+					a.fontWeight > b.fontWeight ? 1 : -1
+			  )
+			: [
+					{
+						fontFamily: font.fontFamily,
+						fontStyle: 'normal',
+						fontWeight: '400',
+					},
+			  ];
+
+	return (
+		<>
+			<Spacer margin={ 4 } />
+			<VStack spacing={ 0 }>
+				<Spacer margin={ 8 } />
+				{ fontFaces.map( ( face, i ) => (
+					<LibraryFontVariant
+						font={ font }
+						face={ face }
+						key={ `face${ i }` }
+					/>
+				) ) }
+			</VStack>
+			<Spacer margin={ 8 } />
+		</>
+	);
+}
+
+export default LibraryFontDetails;

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

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import { CheckboxControl, Flex } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import { getFontFaceVariantName } from './utils';
+
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './context';
+import FontFaceDemo from './font-demo';
+
+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 handleToggleActivation = () => {
+		if ( font?.fontFace ) {
+			toggleActivateFont( font, face );
+			return;
+		}
+		toggleActivateFont( 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={ isIstalled }
+					onChange={ handleToggleActivation }
+					__nextHasNoMarginBottom={ true }
+				/>
+			</Flex>
+		</div>
+	);
+}
+
+export default LibraryFontVariant;

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

@@ -0,0 +1,160 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	DropZone,
+	__experimentalSpacer as Spacer,
+	__experimentalText as Text,
+	FormFileUpload,
+} from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ALLOWED_FILE_EXTENSIONS } from './utils/constants';
+import { FontLibraryContext } from './context';
+import { Font } from '../../../../lib/lib-font.browser';
+import makeFamiliesFromFaces from './utils/make-families-from-faces';
+import { loadFontFaceInBrowser } from './utils';
+
+function LocalFonts() {
+	const { installFonts } = useContext( FontLibraryContext );
+
+	const handleDropZone = ( files ) => {
+		handleFilesUpload( files );
+	};
+	const onFilesUpload = ( event ) => {
+		handleFilesUpload( event.target.files );
+	};
+
+	/**
+	 * Filters the selected files to only allow the ones with the allowed extensions
+	 *
+	 * @param {Array} files The files to be filtered
+	 * @return {void}
+	 */
+	const handleFilesUpload = ( files ) => {
+		const uniqueFilenames = new Set();
+		const selectedFiles = [ ...files ];
+		const allowedFiles = selectedFiles.filter( ( file ) => {
+			if ( uniqueFilenames.has( file.name ) ) {
+				return false; // Discard duplicates
+			}
+			// Eliminates files that are not allowed
+			const fileExtension = file.name.split( '.' ).pop().toLowerCase();
+			if ( ALLOWED_FILE_EXTENSIONS.includes( fileExtension ) ) {
+				uniqueFilenames.add( file.name );
+				return true; // Keep file if the extension is allowed
+			}
+			return false; // Discard file extension not allowed
+		} );
+		if ( allowedFiles.length > 0 ) {
+			loadFiles( allowedFiles );
+		}
+	};
+
+	/**
+	 * Loads the selected files and reads the font metadata
+	 *
+	 * @param {Array} files The files to be loaded
+	 * @return {void}
+	 */
+	const loadFiles = async ( files ) => {
+		const fontFacesLoaded = await Promise.all(
+			files.map( async ( fontFile ) => {
+				const fontFaceData = await getFontFaceMetadata( fontFile );
+				await loadFontFaceInBrowser(
+					fontFaceData,
+					fontFaceData.file,
+					'all'
+				);
+				return fontFaceData;
+			} )
+		);
+		await handleInstall( fontFacesLoaded );
+	};
+
+	// Create a function to read the file as array buffer
+	async function readFileAsArrayBuffer( file ) {
+		return new Promise( ( resolve, reject ) => {
+			const reader = new window.FileReader();
+			reader.readAsArrayBuffer( file );
+			reader.onload = () => resolve( reader.result );
+			reader.onerror = reject;
+		} );
+	}
+
+	const getFontFaceMetadata = async ( fontFile ) => {
+		const buffer = await readFileAsArrayBuffer( fontFile );
+		const fontObj = new Font( 'Uploaded Font' );
+		fontObj.fromDataBuffer( buffer, fontFile.name );
+		// Assuming that fromDataBuffer triggers onload event and returning a Promise
+		const onloadEvent = await new Promise(
+			( resolve ) => ( fontObj.onload = resolve )
+		);
+		const font = onloadEvent.detail.font;
+		const { name } = font.opentype.tables;
+		const fontName = name.get( 16 ) || name.get( 1 );
+		const isItalic = name.get( 2 ).toLowerCase().includes( 'italic' );
+		const fontWeight =
+			font.opentype.tables[ 'OS/2' ].usWeightClass || 'normal';
+		const isVariable = !! font.opentype.tables.fvar;
+		const weightAxis =
+			isVariable &&
+			font.opentype.tables.fvar.axes.find(
+				( { tag } ) => tag === 'wght'
+			);
+		const weightRange = weightAxis
+			? `${ weightAxis.minValue } ${ weightAxis.maxValue }`
+			: null;
+		return {
+			file: fontFile,
+			fontFamily: fontName,
+			fontStyle: isItalic ? 'italic' : 'normal',
+			fontWeight: weightRange || fontWeight,
+		};
+	};
+
+	/**
+	 * Creates the font family definition and sends it to the server
+	 *
+	 * @param {Array} fontFaces The font faces to be installed
+	 * @return {void}
+	 */
+	const handleInstall = async ( fontFaces ) => {
+		const fontFamilies = makeFamiliesFromFaces( fontFaces );
+		await installFonts( fontFamilies );
+	};
+
+	return (
+		<>
+			<Text className="font-library-modal__subtitle">
+				{ __( 'Upload Fonts' ) }
+			</Text>
+			<Spacer margin={ 2 } />
+			<DropZone onFilesDrop={ handleDropZone } />
+			<FormFileUpload
+				accept={ ALLOWED_FILE_EXTENSIONS.map(
+					( ext ) => `.${ ext }`
+				).join( ',' ) }
+				multiple={ true }
+				onChange={ onFilesUpload }
+				render={ ( { openFileDialog } ) => (
+					<Button
+						className="font-library-modal__upload-area"
+						onClick={ openFileDialog }
+					>
+						<span>
+							{ __( 'Drag and drop your font files here.' ) }
+						</span>
+					</Button>
+				) }
+			/>
+		</>
+	);
+}
+
+export default LocalFonts;