@wordpress/edit-site 5.19.0 → 5.19.2

package/src/components/global-styles/font-families.js

@@ -64,8 +64,12 @@ function FontFamilies() {
 	);
 }
 
-export default ( { ...props } ) => (
+const FontFamiliesComponent = ( { ...props } ) => (
 	<FontLibraryProvider>
 		<FontFamilies { ...props } />
 	</FontLibraryProvider>
 );
+
+export default process.env.IS_GUTENBERG_PLUGIN
+	? FontFamiliesComponent
+	: undefined;

package/src/components/global-styles/font-family-item.js

@@ -13,7 +13,7 @@ import { useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import { FontLibraryContext } from './font-library-modal/context';
-import { getPreviewStyle } from './font-library-modal/utils';
+import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
 
 function FontFamilyItem( { font } ) {
 	const { handleSetLibraryFontSelected, toggleModal } =
@@ -26,7 +26,7 @@ function FontFamilyItem( { font } ) {
 		toggleModal( 'installed-fonts' );
 	};
 
-	const previewStyle = getPreviewStyle( font );
+	const previewStyle = getFamilyPreviewStyle( font );
 
 	return (
 		<Item onClick={ handleClick }>

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/context.js

@@ -15,7 +15,12 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { fetchInstallFonts, fetchUninstallFonts } from './resolvers';
+import {
+	fetchInstallFonts,
+	fetchUninstallFonts,
+	fetchFontCollections,
+	fetchFontCollection,
+} from './resolvers';
 import { unlock } from '../../../lock-unlock';
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 import {
@@ -52,7 +57,7 @@ function FontLibraryProvider( { children } ) {
 	const [ refreshKey, setRefreshKey ] = useState( 0 );
 
 	const refreshLibrary = () => {
-		setRefreshKey( ( prevKey ) => prevKey + 1 );
+		setRefreshKey( Date.now() );
 	};
 
 	const {
@@ -313,6 +318,30 @@ function FontLibraryProvider( { children } ) {
 		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={ {
@@ -337,6 +366,8 @@ function FontLibraryProvider( { children } ) {
 				isResolvingLibrary,
 				hasResolvedLibrary,
 				isInstalling,
+				collections,
+				getFontCollection,
 			} }
 		>
 			{ children }

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

@@ -7,15 +7,17 @@ import {
 	Button,
 	Flex,
 	FlexItem,
+	Icon,
 } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import FontDemo from './font-demo';
-import { getPreviewStyle } from './utils';
+import { getFamilyPreviewStyle } from './utils/preview-styles';
+import { chevronRight } from '@wordpress/icons';
 
-function FontCard( { font, onClick, actionHandler, variantsText } ) {
+function FontCard( { font, onClick, variantsText } ) {
 	const fakeFontFace = {
 		fontStyle: 'normal',
 		fontWeight: '400',
@@ -31,7 +33,7 @@ function FontCard( { font, onClick, actionHandler, variantsText } ) {
 			  ) || font.fontFace[ 0 ]
 			: fakeFontFace;
 
-	const demoStyle = getPreviewStyle( font );
+	const demoStyle = getFamilyPreviewStyle( font );
 
 	const variantsCount = font.fontFace?.length || 1;
 
@@ -47,6 +49,7 @@ function FontCard( { font, onClick, actionHandler, variantsText } ) {
 		>
 			<Flex justify="space-between" wrap={ false }>
 				<FontDemo
+					customPreviewUrl={ font.preview }
 					fontFace={ displayFontFace }
 					text={ font.name }
 					style={ demoStyle }
@@ -60,7 +63,9 @@ function FontCard( { font, onClick, actionHandler, variantsText } ) {
 									_n( 'variant', 'variants', variantsCount ) }
 						</Text>
 					</FlexItem>
-					<FlexItem>{ !! actionHandler && actionHandler }</FlexItem>
+					<FlexItem>
+						<Icon icon={ chevronRight } />
+					</FlexItem>
 				</Flex>
 			</Flex>
 		</Button>

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

@@ -8,24 +8,41 @@ import { useContext, useEffect, useState, useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { FontLibraryContext } from './context';
+import { getFacePreviewStyle } from './utils/preview-styles';
 
-function FontFaceDemo( { fontFace, text, style = {} } ) {
+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 { fontFamily, fontStyle, fontWeight } = fontFace;
 
-	const demoStyle = {
-		fontWeight,
-		fontStyle,
-		fontFamily,
+	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 ] ) => {
@@ -38,7 +55,7 @@ function FontFaceDemo( { fontFace, text, style = {} } ) {
 	useEffect( () => {
 		const loadAsset = async () => {
 			if ( isIntersecting ) {
-				if ( fontFace.src ) {
+				if ( ! isPreviewImage && fontFace.src ) {
 					await loadFontFaceAsset( fontFace );
 				}
 				setIsAssetLoaded( true );
@@ -48,9 +65,18 @@ function FontFaceDemo( { fontFace, text, style = {} } ) {
 	}, [ fontFace, isIntersecting, loadFontFaceAsset ] );
 
 	return (
-		<Text style={ demoStyle } ref={ ref }>
-			{ text }
-		</Text>
+		<div ref={ ref }>
+			{ isPreviewImage ? (
+				<img
+					src={ previewUrl }
+					loading="lazy"
+					alt={ text }
+					style={ imageDemoStyle }
+				/>
+			) : (
+				<Text style={ textDemoStyle }>{ text }</Text>
+			) }
+		</div>
 	);
 }
 

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

@@ -3,35 +3,60 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Modal, TabPanel } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import InstalledFonts from './installed-fonts';
-import { MODAL_TABS } from './utils/constants';
+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={ true }
+			isFullScreen
 			className="font-library-modal"
-			style={ { width: '65vw' } }
 		>
 			<TabPanel
 				className="font-library-modal__tab-panel"
 				initialTabName={ initialTabName }
-				tabs={ MODAL_TABS }
+				tabs={ tabs }
 			>
 				{ ( tab ) => {
 					switch ( tab.name ) {
 						case 'installed-fonts':
-						default:
 							return <InstalledFonts />;
+						default:
+							return <FontCollection id={ tab.name } />;
 					}
 				} }
 			</TabPanel>