@wordpress/edit-site 5.28.2 → 5.28.4

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

@@ -1,59 +1,87 @@
 /**
  * WordPress dependencies
  */
-import { useContext, useEffect, useState, useMemo } from '@wordpress/element';
+import {
+	useContext,
+	useEffect,
+	useState,
+	useMemo,
+	createInterpolateElement,
+} from '@wordpress/element';
 import {
 	__experimentalSpacer as Spacer,
 	__experimentalInputControl as InputControl,
 	__experimentalText as Text,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalHeading as Heading,
+	Notice,
 	SelectControl,
 	Spinner,
 	Icon,
 	FlexItem,
 	Flex,
 	Button,
+	DropdownMenu,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
-import { __, _x } from '@wordpress/i18n';
-import { search, closeSmall } from '@wordpress/icons';
+import { sprintf, __, _x } from '@wordpress/i18n';
+import {
+	search,
+	closeSmall,
+	moreVertical,
+	chevronLeft,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import TabPanelLayout from './tab-panel-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 {
+	getFontsOutline,
+	isFontFontFaceInOutline,
+} from './utils/fonts-outline';
 import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
 import { downloadFontFaceAssets } from './utils';
+import { sortFontFaces } from './utils/sort-font-faces';
+import CollectionFontVariant from './collection-font-variant';
 
 const DEFAULT_CATEGORY = {
 	slug: 'all',
 	name: _x( 'All', 'font categories' ),
 };
+
+const LOCAL_STORAGE_ITEM = 'wp-font-library-google-fonts-permission';
+const MIN_WINDOW_HEIGHT = 500;
+
 function FontCollection( { slug } ) {
 	const requiresPermission = slug === 'google-fonts';
 
 	const getGoogleFontsPermissionFromStorage = () => {
-		return (
-			window.localStorage.getItem(
-				'wp-font-library-google-fonts-permission'
-			) === 'true'
-		);
+		return window.localStorage.getItem( LOCAL_STORAGE_ITEM ) === 'true';
 	};
 
 	const [ selectedFont, setSelectedFont ] = useState( null );
 	const [ fontsToInstall, setFontsToInstall ] = useState( [] );
+	const [ page, setPage ] = useState( 1 );
 	const [ filters, setFilters ] = useState( {} );
 	const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
 		requiresPermission && ! getGoogleFontsPermissionFromStorage()
 	);
-	const { collections, getFontCollection, installFont, notice, setNotice } =
-		useContext( FontLibraryContext );
+	const {
+		collections,
+		getFontCollection,
+		installFont,
+		isInstalling,
+		notice,
+		setNotice,
+	} = useContext( FontLibraryContext );
 	const selectedCollection = collections.find(
 		( collection ) => collection.slug === slug
 	);
@@ -69,6 +97,11 @@ function FontCollection( { slug } ) {
 		return () => window.removeEventListener( 'storage', handleStorage );
 	}, [ slug, requiresPermission ] );
 
+	const revokeAccess = () => {
+		window.localStorage.setItem( LOCAL_STORAGE_ITEM, 'false' );
+		window.dispatchEvent( new Event( 'storage' ) );
+	};
+
 	useEffect( () => {
 		const fetchFontCollection = async () => {
 			try {
@@ -109,26 +142,35 @@ function FontCollection( { slug } ) {
 		[ collectionFonts, filters ]
 	);
 
+	// NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px
+	// The height of each font family item is 61px.
+	const windowHeight = Math.max( window.innerHeight, MIN_WINDOW_HEIGHT );
+	const pageSize = Math.floor( ( windowHeight - 417 ) / 61 );
+	const totalPages = Math.ceil( fonts.length / pageSize );
+	const itemsStart = ( page - 1 ) * pageSize;
+	const itemsLimit = page * pageSize;
+	const items = fonts.slice( itemsStart, itemsLimit );
+
 	const handleCategoryFilter = ( category ) => {
 		setFilters( { ...filters, category } );
+		setPage( 1 );
 	};
 
 	const handleUpdateSearchInput = ( value ) => {
 		setFilters( { ...filters, search: value } );
+		setPage( 1 );
 	};
 
 	const debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );
 
 	const resetFilters = () => {
 		setFilters( {} );
+		setPage( 1 );
 	};
 
 	const resetSearch = () => {
 		setFilters( { ...filters, search: '' } );
-	};
-
-	const handleUnselectFont = () => {
-		setSelectedFont( null );
+		setPage( 1 );
 	};
 
 	const handleToggleVariant = ( font, face ) => {
@@ -186,126 +228,283 @@ function FontCollection( { slug } ) {
 		resetFontsToInstall();
 	};
 
-	return (
-		<TabPanelLayout
-			title={
-				! selectedFont ? selectedCollection.name : selectedFont.name
-			}
-			description={
-				! selectedFont
-					? selectedCollection.description
-					: __( 'Select font variants to install.' )
-			}
-			notice={ notice }
-			handleBack={ !! selectedFont && handleUnselectFont }
-			footer={
-				<Footer
-					handleInstall={ handleInstall }
-					isDisabled={ fontsToInstall.length === 0 }
-				/>
-			}
-		>
-			{ renderConfirmDialog && (
-				<>
-					<Spacer margin={ 8 } />
-					<GoogleFontsConfirmDialog />
-				</>
-			) }
+	const getSortedFontFaces = ( fontFamily ) => {
+		if ( ! fontFamily ) {
+			return [];
+		}
+		if ( ! fontFamily.fontFace || ! fontFamily.fontFace.length ) {
+			return [
+				{
+					fontFamily: fontFamily.fontFamily,
+					fontStyle: 'normal',
+					fontWeight: '400',
+				},
+			];
+		}
+		return sortFontFaces( fontFamily.fontFace );
+	};
 
-			{ ! 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.slug }
-										key={ category.slug }
-									>
-										{ category.name }
-									</option>
-								) ) }
-						</SelectControl>
-					</FlexItem>
-				</Flex>
-			) }
+	if ( renderConfirmDialog ) {
+		return <GoogleFontsConfirmDialog />;
+	}
+
+	const ActionsComponent = () => {
+		if ( slug !== 'google-fonts' || renderConfirmDialog || selectedFont ) {
+			return null;
+		}
+		return (
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'Actions' ) }
+				popoverProps={ {
+					position: 'bottom left',
+				} }
+				controls={ [
+					{
+						title: __( 'Revoke access to Google Fonts' ),
+						onClick: revokeAccess,
+					},
+				] }
+			/>
+		);
+	};
 
-			<Spacer margin={ 4 } />
-			{ ! renderConfirmDialog &&
-				! selectedCollection?.font_families &&
-				! notice && <Spinner /> }
-
-			{ ! renderConfirmDialog &&
-				!! selectedCollection?.font_families?.length &&
-				! fonts.length && (
-					<Text>
-						{ __(
-							'No fonts found. Try with a different search term'
+	return (
+		<div className="font-library-modal__tabpanel-layout">
+			<NavigatorProvider
+				initialPath="/"
+				className="font-library-modal__tabpanel-layout"
+			>
+				<NavigatorScreen path="/">
+					<HStack justify="space-between">
+						<Heading level={ 2 } size={ 13 }>
+							{ selectedCollection.name }
+						</Heading>
+						<ActionsComponent />
+					</HStack>
+					<Text>{ selectedCollection.description }</Text>
+					<Spacer margin={ 4 } />
+					<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.slug }
+											key={ category.slug }
+										>
+											{ category.name }
+										</option>
+									) ) }
+							</SelectControl>
+						</FlexItem>
+					</Flex>
+
+					<Spacer margin={ 4 } />
+
+					{ ! selectedCollection?.font_families && ! notice && (
+						<Spinner />
+					) }
+
+					{ !! selectedCollection?.font_families?.length &&
+						! fonts.length && (
+							<Text>
+								{ __(
+									'No fonts found. Try with a different search term'
+								) }
+							</Text>
 						) }
-					</Text>
-				) }
-
-			{ ! renderConfirmDialog && selectedFont && (
-				<CollectionFontDetails
-					font={ selectedFont }
-					handleToggleVariant={ handleToggleVariant }
-					fontToInstallOutline={ fontToInstallOutline }
-				/>
-			) }
 
-			{ ! renderConfirmDialog && ! selectedFont && (
-				<FontsGrid>
-					{ fonts.map( ( font ) => (
-						<FontCard
-							key={ font.font_family_settings.slug }
-							font={ font.font_family_settings }
+					<div className="font-library-modal__fonts-grid__main">
+						{ items.map( ( font ) => (
+							<FontCard
+								key={ font.font_family_settings.slug }
+								font={ font.font_family_settings }
+								navigatorPath={ '/fontFamily' }
+								onClick={ () => {
+									setSelectedFont(
+										font.font_family_settings
+									);
+								} }
+							/>
+						) ) }
+					</div>
+				</NavigatorScreen>
+
+				<NavigatorScreen path="/fontFamily">
+					<Flex justify="flex-start">
+						<NavigatorToParentButton
+							icon={ chevronLeft }
+							isSmall
 							onClick={ () => {
-								setSelectedFont( font.font_family_settings );
+								setSelectedFont( null );
 							} }
+							aria-label={ __( 'Navigate to the previous view' ) }
 						/>
-					) ) }
-				</FontsGrid>
+						<Heading
+							level={ 2 }
+							size={ 13 }
+							className="edit-site-global-styles-header"
+						>
+							{ selectedFont?.name }
+						</Heading>
+					</Flex>
+					{ notice && (
+						<>
+							<Spacer margin={ 1 } />
+							<Notice
+								status={ notice.type }
+								onRemove={ () => setNotice( null ) }
+							>
+								{ notice.message }
+							</Notice>
+							<Spacer margin={ 1 } />
+						</>
+					) }
+					<Spacer margin={ 4 } />
+					<Text> { __( 'Select font variants to install.' ) } </Text>
+					<Spacer margin={ 4 } />
+					<VStack spacing={ 0 }>
+						<Spacer margin={ 8 } />
+						{ getSortedFontFaces( selectedFont ).map(
+							( face, i ) => (
+								<CollectionFontVariant
+									font={ selectedFont }
+									face={ face }
+									key={ `face${ i }` }
+									handleToggleVariant={ handleToggleVariant }
+									selected={ isFontFontFaceInOutline(
+										selectedFont.slug,
+										selectedFont.fontFace ? face : null, // If the font has no fontFace, we want to check if the font is in the outline
+										fontToInstallOutline
+									) }
+								/>
+							)
+						) }
+					</VStack>
+					<Spacer margin={ 16 } />
+				</NavigatorScreen>
+			</NavigatorProvider>
+
+			{ selectedFont && (
+				<Flex
+					justify="flex-end"
+					className="font-library-modal__tabpanel-layout__footer"
+				>
+					<Button
+						variant="primary"
+						onClick={ handleInstall }
+						isBusy={ isInstalling }
+						disabled={ fontsToInstall.length === 0 || isInstalling }
+						__experimentalIsFocusable
+					>
+						{ __( 'Install' ) }
+					</Button>
+				</Flex>
 			) }
-		</TabPanelLayout>
-	);
-}
-
-function Footer( { handleInstall, isDisabled } ) {
-	const { isInstalling } = useContext( FontLibraryContext );
 
-	return (
-		<Flex justify="flex-end">
-			<Button
-				variant="primary"
-				onClick={ handleInstall }
-				isBusy={ isInstalling }
-				disabled={ isDisabled || isInstalling }
-				__experimentalIsFocusable
-			>
-				{ __( 'Install' ) }
-			</Button>
-		</Flex>
+			{ ! selectedFont && (
+				<Flex
+					justify="center"
+					className="font-library-modal__tabpanel-layout__footer"
+				>
+					<Button
+						label={ __( 'First page' ) }
+						size="compact"
+						onClick={ () => setPage( 1 ) }
+						disabled={ page === 1 }
+						__experimentalIsFocusable
+					>
+						<span>«</span>
+					</Button>
+					<Button
+						label={ __( 'Previous page' ) }
+						size="compact"
+						onClick={ () => setPage( page - 1 ) }
+						disabled={ page === 1 }
+						__experimentalIsFocusable
+					>
+						<span>‹</span>
+					</Button>
+					<HStack
+						justify="flex-start"
+						expanded={ false }
+						spacing={ 2 }
+					>
+						{ createInterpolateElement(
+							sprintf(
+								// translators: %s: Total number of pages.
+								_x(
+									'Page <CurrenPageControl /> of %s',
+									'paging'
+								),
+								totalPages
+							),
+							{
+								CurrenPageControl: (
+									<SelectControl
+										aria-label={ __( 'Current page' ) }
+										value={ page }
+										options={ [
+											...Array( totalPages ),
+										].map( ( e, i ) => {
+											return {
+												label: i + 1,
+												value: i + 1,
+											};
+										} ) }
+										onChange={ ( newPage ) =>
+											setPage( parseInt( newPage ) )
+										}
+										size={ 'compact' }
+										__nextHasNoMarginBottom
+									/>
+								),
+							}
+						) }
+					</HStack>
+					<Button
+						label={ __( 'Next page' ) }
+						size="compact"
+						onClick={ () => setPage( page + 1 ) }
+						disabled={ page === totalPages }
+						__experimentalIsFocusable
+					>
+						<span>›</span>
+					</Button>
+					<Button
+						label={ __( 'Last page' ) }
+						size="compact"
+						onClick={ () => setPage( totalPages ) }
+						disabled={ page === totalPages }
+						__experimentalIsFocusable
+					>
+						<span>»</span>
+					</Button>
+				</Flex>
+			) }
+		</div>
 	);
 }
 

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

@@ -8,7 +8,10 @@ import { useContext, useEffect, useState, useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { FontLibraryContext } from './context';
-import { getFacePreviewStyle } from './utils/preview-styles';
+import {
+	getFacePreviewStyle,
+	getFamilyPreviewStyle,
+} from './utils/preview-styles';
 
 function getPreviewUrl( fontFace ) {
 	if ( fontFace.preview ) {
@@ -19,8 +22,39 @@ function getPreviewUrl( fontFace ) {
 	}
 }
 
-function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
+function getDisplayFontFace( font ) {
+	// if this IS a font face return it
+	if ( font.fontStyle || font.fontWeight ) {
+		return font;
+	}
+	// if this is a font family with a collection of font faces
+	// return the first one that is normal and 400 OR just the first one
+	if ( font.fontFace && font.fontFace.length ) {
+		return (
+			font.fontFace.find(
+				( face ) =>
+					face.fontStyle === 'normal' && face.fontWeight === '400'
+			) || font.fontFace[ 0 ]
+		);
+	}
+	// This must be a font family with no font faces
+	// return a fake font face
+	return {
+		fontStyle: 'normal',
+		fontWeight: '400',
+		fontFamily: font.fontFamily,
+		fake: true,
+	};
+}
+
+function FontDemo( { font, text } ) {
 	const ref = useRef( null );
+
+	const fontFace = getDisplayFontFace( font );
+	const style = getFamilyPreviewStyle( font );
+	text = text || font.name;
+	const customPreviewUrl = font.preview;
+
 	const [ isIntersecting, setIsIntersecting ] = useState( false );
 	const [ isAssetLoaded, setIsAssetLoaded ] = useState( false );
 	const { loadFontFaceAsset } = useContext( FontLibraryContext );
@@ -34,8 +68,8 @@ function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
 		fontSize: '18px',
 		lineHeight: 1,
 		opacity: isAssetLoaded ? '1' : '0',
-		...faceStyles,
 		...style,
+		...faceStyles,
 	};
 
 	useEffect( () => {
@@ -79,4 +113,4 @@ function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
 	);
 }
 
-export default FontFaceDemo;
+export default FontDemo;

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

@@ -24,7 +24,7 @@ function GoogleFontsConfirmDialog() {
 		<div className="font-library__google-fonts-confirm">
 			<Card>
 				<CardBody>
-					<Text as="h3">Connect to Google Fonts</Text>
+					<Text as="h3">{ __( 'Connect to Google Fonts' ) }</Text>
 					<Spacer margin={ 6 } />
 					<Text as="p">
 						{ __(