Skip to content

Commit

Permalink
Font Library: Replace infinite scroll by pagination (#58794)
Browse files Browse the repository at this point in the history
* Eliminate  and render fonts with pagination instead of as a large list

Co-authored-by: pbking <pbking@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: okmttdhr <okat@git.wordpress.org>
  • Loading branch information
9 people authored and youknowriad committed Feb 20, 2024
1 parent 730beb7 commit 7420c2e
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 101 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ function CollectionFontDetails( {
/>
) ) }
</VStack>
<Spacer margin={ 8 } />
<Spacer margin={ 16 } />
</>
);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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';
Expand All @@ -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()
Expand Down Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -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={
Expand All @@ -198,12 +235,7 @@ function FontCollection( { slug } ) {
}
notice={ notice }
handleBack={ !! selectedFont && handleUnselectFont }
footer={
<Footer
handleInstall={ handleInstall }
isDisabled={ fontsToInstall.length === 0 }
/>
}
footer={ footerComponent }
>
{ renderConfirmDialog && (
<>
Expand Down Expand Up @@ -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 }
Expand All @@ -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 (
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
privateApis as componentsPrivateApis,
__experimentalHStack as HStack,
__experimentalSpacer as Spacer,
__experimentalText as Text,
Button,
Spinner,
FlexItem,
Expand All @@ -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';
Expand Down Expand Up @@ -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 } />
</>
) }

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit 7420c2e

Please sign in to comment.