Font Library: Replace infinite scroll by pagination

packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js

@@ -48,7 +48,7 @@ function CollectionFontDetails( {
 					/>
 				) ) }
 			</VStack>
-			<Spacer margin={ 8 } />
+			<Spacer margin={ 16 } />
 		</>
 	);
 }

packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js

@@ -1,11 +1,18 @@
 /**
  * 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,
 	SelectControl,
 	Spinner,
 	Icon,
@@ -14,15 +21,14 @@ import {
 	Button,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
-import { __, _x } from '@wordpress/i18n';
+import { sprintf, __, _x } from '@wordpress/i18n';
 import { search, closeSmall } 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';
@@ -48,6 +54,7 @@ function FontCollection( { slug } ) {
 
 	const [ selectedFont, setSelectedFont ] = useState( null );
 	const [ fontsToInstall, setFontsToInstall ] = useState( [] );
+	const [ page, setPage ] = useState( 1 );
 	const [ filters, setFilters ] = useState( {} );
 	const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
 		requiresPermission && ! getGoogleFontsPermissionFromStorage()
@@ -109,22 +116,34 @@ 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 pageSize = Math.floor( ( window.innerHeight - 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: '' } );
+		setPage( 1 );
 	};
 
 	const handleUnselectFont = () => {
@@ -186,6 +205,24 @@ function FontCollection( { slug } ) {
 		resetFontsToInstall();
 	};
 
+	let footerComponent = null;
+	if ( selectedFont ) {
+		footerComponent = (
+			<InstallFooter
+				handleInstall={ handleInstall }
+				isDisabled={ fontsToInstall.length === 0 }
+			/>
+		);
+	} else if ( ! renderConfirmDialog && totalPages > 1 ) {
+		footerComponent = (
+			<PaginationFooter
+				page={ page }
+				totalPages={ totalPages }
+				setPage={ setPage }
+			/>
+		);
+	}
+
 	return (
 		<TabPanelLayout
 			title={
@@ -198,12 +235,7 @@ function FontCollection( { slug } ) {
 			}
 			notice={ notice }
 			handleBack={ !! selectedFont && handleUnselectFont }
-			footer={
-				<Footer
-					handleInstall={ handleInstall }
-					isDisabled={ fontsToInstall.length === 0 }
-				/>
-			}
+			footer={ footerComponent }
 		>
 			{ renderConfirmDialog && (
 				<>
@@ -275,8 +307,8 @@ function FontCollection( { slug } ) {
 			) }
 
 			{ ! renderConfirmDialog && ! selectedFont && (
-				<FontsGrid>
-					{ fonts.map( ( font ) => (
+				<div className="font-library-modal__fonts-grid__main">
+					{ items.map( ( font ) => (
 						<FontCard
 							key={ font.font_family_settings.slug }
 							font={ font.font_family_settings }
@@ -285,13 +317,86 @@ function FontCollection( { slug } ) {
 							} }
 						/>
 					) ) }
-				</FontsGrid>
+				</div>
 			) }
 		</TabPanelLayout>
 	);
 }
 
-function Footer( { handleInstall, isDisabled } ) {
+function PaginationFooter( { page, totalPages, setPage } ) {
+	return (
+		<Flex justify="center">
+			<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>
+	);
+}
+
+function InstallFooter( { handleInstall, isDisabled } ) {
 	const { isInstalling } = useContext( FontLibraryContext );
 
 	return (

packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -7,6 +7,7 @@ import {
 	privateApis as componentsPrivateApis,
 	__experimentalHStack as HStack,
 	__experimentalSpacer as Spacer,
+	__experimentalText as Text,
 	Button,
 	Spinner,
 	FlexItem,
@@ -17,7 +18,6 @@ import {
  */
 import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
-import FontsGrid from './fonts-grid';
 import LibraryFontDetails from './library-font-details';
 import LibraryFontCard from './library-font-card';
 import ConfirmDeleteDialog from './confirm-delete-dialog';
@@ -123,36 +123,38 @@ function InstalledFonts() {
 					) }
 					{ baseCustomFonts.length > 0 && (
 						<>
-							<FontsGrid>
-								{ baseCustomFonts.map( ( font ) => (
-									<LibraryFontCard
-										font={ font }
-										key={ font.slug }
-										onClick={ () => {
-											handleSelectFont( font );
-										} }
-									/>
-								) ) }
-							</FontsGrid>
+							{ baseCustomFonts.map( ( font ) => (
+								<LibraryFontCard
+									font={ font }
+									key={ font.slug }
+									onClick={ () => {
+										handleSelectFont( font );
+									} }
+								/>
+							) ) }
 							<Spacer margin={ 8 } />
 						</>
 					) }
 
 					{ baseThemeFonts.length > 0 && (
 						<>
-							<FontsGrid title={ __( 'Theme Fonts' ) }>
-								{ baseThemeFonts.map( ( font ) => (
-									<LibraryFontCard
-										font={ font }
-										key={ font.slug }
-										onClick={ () => {
-											handleSelectFont( font );
-										} }
-									/>
-								) ) }
-							</FontsGrid>
+							<Text className="font-library-modal__subtitle">
+								{ __( 'Theme Fonts' ) }
+							</Text>
+
+							<Spacer margin={ 2 } />
+							{ baseThemeFonts.map( ( font ) => (
+								<LibraryFontCard
+									font={ font }
+									key={ font.slug }
+									onClick={ () => {
+										handleSelectFont( font );
+									} }
+								/>
+							) ) }
 						</>
 					) }
+					<Spacer margin={ 16 } />
 				</>
 			) }
 

packages/edit-site/src/components/global-styles/font-library-modal/style.scss

@@ -36,11 +36,8 @@
 	}
 }
 
-.font-library-modal__fonts-grid {
-	.font-library-modal__fonts-grid__main {
-		display: flex;
-		flex-direction: column;
-	}
+.font-library-modal__tabpanel-layout .components-base-control__field {
+	margin-bottom: 0;
 }
 
 .font-library-modal__font-card {