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

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

@@ -0,0 +1,257 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext, useEffect, useState, useMemo } from '@wordpress/element';
+import {
+	__experimentalSpacer as Spacer,
+	__experimentalInputControl as InputControl,
+	__experimentalText as Text,
+	SelectControl,
+	Spinner,
+	Icon,
+	FlexItem,
+	Flex,
+	Button,
+} from '@wordpress/components';
+import { debounce } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+import { search, closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import TabLayout from './tab-layout';
+import { FontLibraryContext } from './context';
+import FontsGrid from './fonts-grid';
+import FontCard from './font-card';
+import filterFonts from './utils/filter-fonts';
+import CollectionFontDetails from './collection-font-details';
+import { toggleFont } from './utils/toggleFont';
+import { getFontsOutline } from './utils/fonts-outline';
+import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
+
+const DEFAULT_CATEGORY = {
+	id: 'all',
+	name: __( 'All' ),
+};
+function FontCollection( { id } ) {
+	const requiresPermission = id === 'default-font-collection';
+
+	const getGoogleFontsPermissionFromStorage = () => {
+		return (
+			window.localStorage.getItem(
+				'wp-font-library-default-font-collection-permission'
+			) === 'true'
+		);
+	};
+
+	const [ selectedFont, setSelectedFont ] = useState( null );
+	const [ fontsToInstall, setFontsToInstall ] = useState( [] );
+	const [ filters, setFilters ] = useState( {} );
+	const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
+		requiresPermission && ! getGoogleFontsPermissionFromStorage()
+	);
+	const { collections, getFontCollection } = useContext( FontLibraryContext );
+	const selectedCollection = collections.find(
+		( collection ) => collection.id === id
+	);
+
+	useEffect( () => {
+		const handleStorage = () => {
+			setRenderConfirmDialog(
+				requiresPermission && ! getGoogleFontsPermissionFromStorage()
+			);
+		};
+		handleStorage();
+		window.addEventListener( 'storage', handleStorage );
+		return () => window.removeEventListener( 'storage', handleStorage );
+	}, [ id, requiresPermission ] );
+
+	useEffect( () => {
+		getFontCollection( id );
+		resetFilters();
+	}, [ id, getFontCollection ] );
+
+	useEffect( () => {
+		setSelectedFont( null );
+	}, [ id ] );
+
+	const collectionFonts = useMemo(
+		() => selectedCollection?.data?.fontFamilies ?? [],
+		[ selectedCollection ]
+	);
+	const collectionCategories = selectedCollection?.data?.categories ?? [];
+
+	const categories = [ DEFAULT_CATEGORY, ...collectionCategories ];
+
+	const fonts = useMemo(
+		() => filterFonts( collectionFonts, filters ),
+		[ collectionFonts, filters ]
+	);
+
+	const handleCategoryFilter = ( category ) => {
+		setFilters( { ...filters, category } );
+	};
+
+	const handleUpdateSearchInput = ( value ) => {
+		setFilters( { ...filters, search: value } );
+	};
+
+	const debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );
+
+	const resetFilters = () => {
+		setFilters( {} );
+	};
+
+	const resetSearch = () => {
+		setFilters( { ...filters, search: '' } );
+	};
+
+	const handleUnselectFont = () => {
+		setSelectedFont( null );
+	};
+
+	const handleToggleVariant = ( font, face ) => {
+		const newFontsToInstall = toggleFont( font, face, fontsToInstall );
+		setFontsToInstall( newFontsToInstall );
+	};
+
+	const fontToInstallOutline = getFontsOutline( fontsToInstall );
+
+	const resetFontsToInstall = () => {
+		setFontsToInstall( [] );
+	};
+
+	return (
+		<TabLayout
+			title={
+				! selectedFont ? selectedCollection.name : selectedFont.name
+			}
+			description={
+				! selectedFont
+					? selectedCollection.description
+					: __( 'Select font variants to install.' )
+			}
+			handleBack={ !! selectedFont && handleUnselectFont }
+			footer={
+				fontsToInstall.length > 0 && (
+					<Footer
+						fontsToInstall={ fontsToInstall }
+						resetFontsToInstall={ resetFontsToInstall }
+					/>
+				)
+			}
+		>
+			{ renderConfirmDialog && (
+				<>
+					<Spacer margin={ 8 } />
+					<GoogleFontsConfirmDialog />
+				</>
+			) }
+
+			{ ! renderConfirmDialog && ! selectedCollection.data && (
+				<Spinner />
+			) }
+
+			{ ! renderConfirmDialog && ! selectedFont && (
+				<Flex>
+					<FlexItem>
+						<InputControl
+							value={ filters.search }
+							placeholder={ __( 'Font name…' ) }
+							label={ __( 'Search' ) }
+							onChange={ debouncedUpdateSearchInput }
+							prefix={ <Icon icon={ search } /> }
+							suffix={
+								filters?.search ? (
+									<Icon
+										icon={ closeSmall }
+										onClick={ resetSearch }
+									/>
+								) : null
+							}
+						/>
+					</FlexItem>
+					<FlexItem>
+						<SelectControl
+							label={ __( 'Category' ) }
+							value={ filters.category }
+							onChange={ handleCategoryFilter }
+						>
+							{ categories &&
+								categories.map( ( category ) => (
+									<option
+										value={ category.id }
+										key={ category.id }
+									>
+										{ category.name }
+									</option>
+								) ) }
+						</SelectControl>
+					</FlexItem>
+				</Flex>
+			) }
+
+			<Spacer margin={ 4 } />
+
+			{ ! renderConfirmDialog &&
+				! selectedCollection?.data?.fontFamilies && <Spinner /> }
+
+			{ ! renderConfirmDialog &&
+				!! selectedCollection?.data?.fontFamilies?.length &&
+				! fonts.length && (
+					<Text>
+						{ __(
+							'No fonts found. Try with a different seach term'
+						) }
+					</Text>
+				) }
+
+			{ ! renderConfirmDialog && selectedFont && (
+				<CollectionFontDetails
+					font={ selectedFont }
+					handleToggleVariant={ handleToggleVariant }
+					fontToInstallOutline={ fontToInstallOutline }
+				/>
+			) }
+
+			{ ! renderConfirmDialog && ! selectedFont && (
+				<FontsGrid>
+					{ fonts.map( ( font ) => (
+						<FontCard
+							key={ font.slug }
+							font={ font }
+							onClick={ () => {
+								setSelectedFont( font );
+							} }
+						/>
+					) ) }
+				</FontsGrid>
+			) }
+		</TabLayout>
+	);
+}
+
+function Footer( { fontsToInstall, resetFontsToInstall } ) {
+	const { installFonts, isInstalling } = useContext( FontLibraryContext );
+
+	const handleInstall = async () => {
+		await installFonts( fontsToInstall );
+		resetFontsToInstall();
+	};
+
+	return (
+		<Flex justify="flex-end">
+			<Button
+				variant="primary"
+				onClick={ handleInstall }
+				isBusy={ isInstalling }
+				disabled={ isInstalling }
+			>
+				{ __( 'Install' ) }
+			</Button>
+		</Flex>
+	);
+}
+
+export default FontCollection;

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

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalText as Text } from '@wordpress/components';
+import { useContext, useEffect, useState, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './context';
+import { getFacePreviewStyle } from './utils/preview-styles';
+
+function getPreviewUrl( fontFace ) {
+	if ( fontFace.preview ) {
+		return fontFace.preview;
+	}
+	if ( fontFace.src ) {
+		return Array.isArray( fontFace.src ) ? fontFace.src[ 0 ] : fontFace.src;
+	}
+}
+
+function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
+	const ref = useRef( null );
+	const [ isIntersecting, setIsIntersecting ] = useState( false );
+	const [ isAssetLoaded, setIsAssetLoaded ] = useState( false );
+	const { loadFontFaceAsset } = useContext( FontLibraryContext );
+
+	const previewUrl = customPreviewUrl ?? getPreviewUrl( fontFace );
+	const isPreviewImage =
+		previewUrl && previewUrl.match( /\.(png|jpg|jpeg|gif|svg)$/i );
+
+	const faceStyles = getFacePreviewStyle( fontFace );
+	const textDemoStyle = {
+		whiteSpace: 'nowrap',
+		flexShrink: 0,
+		fontSize: '18px',
+		opacity: isAssetLoaded ? '1' : '0',
+		transition: 'opacity 0.3s ease-in-out',
+		...faceStyles,
+		...style,
+	};
+	const imageDemoStyle = {
+		height: '23px',
+		width: 'auto',
+	};
+
+	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 ( ! isPreviewImage && fontFace.src ) {
+					await loadFontFaceAsset( fontFace );
+				}
+				setIsAssetLoaded( true );
+			}
+		};
+		loadAsset();
+	}, [ fontFace, isIntersecting, loadFontFaceAsset ] );
+
+	return (
+		<div ref={ ref }>
+			{ isPreviewImage ? (
+				<img
+					src={ previewUrl }
+					loading="lazy"
+					alt={ text }
+					style={ imageDemoStyle }
+				/>
+			) : (
+				<Text style={ textDemoStyle }>{ text }</Text>
+			) }
+		</div>
+	);
+}
+
+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/google-fonts-confirm-dialog.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	Card,
+	CardBody,
+	__experimentalText as Text,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+function GoogleFontsConfirmDialog() {
+	const handleConfirm = () => {
+		// eslint-disable-next-line no-undef
+		window.localStorage.setItem(
+			'wp-font-library-default-font-collection-permission',
+			'true'
+		);
+		window.dispatchEvent( new Event( 'storage' ) );
+	};
+
+	return (
+		<div className="font-library__google-fonts-confirm">
+			<Card>
+				<CardBody>
+					<Text as="h3">Connect to Google Fonts</Text>
+					<Spacer margin={ 6 } />
+					<Text as="p">
+						{ __(
+							'To install fonts from Google you must give permission to connect directly to Google servers. The fonts you install will be downloaded from Google and stored on your site. Your site will then use these locally-hosted fonts.'
+						) }
+					</Text>
+					<Spacer margin={ 3 } />
+					<Text as="p">
+						{ __(
+							'You can alternatively upload files directly on the Library tab.'
+						) }
+					</Text>
+					<Spacer margin={ 6 } />
+					<Button variant="primary" onClick={ handleConfirm }>
+						{ __( 'Allow access to Google Fonts' ) }
+					</Button>
+				</CardBody>
+			</Card>
+		</div>
+	);
+}
+
+export default GoogleFontsConfirmDialog;

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

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Modal, TabPanel } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InstalledFonts from './installed-fonts';
+import FontCollection from './font-collection';
+import { FontLibraryContext } from './context';
+
+const INSTALLED_FONTS_TAB = {
+	name: 'installed-fonts',
+	title: __( 'Library' ),
+	className: 'installed-fonts',
+};
+
+const tabsFromCollections = ( collections ) =>
+	collections.map( ( { id, name } ) => ( {
+		name: id,
+		title:
+			collections.length === 1 && id === 'default-font-collection'
+				? __( 'Install Fonts' )
+				: name,
+		className: 'collection',
+	} ) );
+
+function FontLibraryModal( {
+	onRequestClose,
+	initialTabName = 'installed-fonts',
+} ) {
+	const { collections } = useContext( FontLibraryContext );
+
+	const tabs = [
+		INSTALLED_FONTS_TAB,
+		...tabsFromCollections( collections || [] ),
+	];
+
+	return (
+		<Modal
+			title={ __( 'Fonts' ) }
+			onRequestClose={ onRequestClose }
+			isFullScreen
+			className="font-library-modal"
+		>
+			<TabPanel
+				className="font-library-modal__tab-panel"
+				initialTabName={ initialTabName }
+				tabs={ tabs }
+			>
+				{ ( tab ) => {
+					switch ( tab.name ) {
+						case 'installed-fonts':
+							return <InstalledFonts />;
+						default:
+							return <FontCollection id={ tab.name } />;
+					}
+				} }
+			</TabPanel>
+		</Modal>
+	);
+}
+
+export default FontLibraryModal;