From b2bb6e10c0f9a0255c3ebd41d11bd7be72bc3462 Mon Sep 17 00:00:00 2001 From: Jason Crist Date: Wed, 7 Feb 2024 15:38:58 -0500 Subject: [PATCH 01/16] Eliminate and render fonts with pagination instead of as a large list --- .../font-library-modal/font-collection.js | 94 +++++++++++++++---- .../font-library-modal/fonts-grid.js | 59 ------------ .../font-library-modal/installed-fonts.js | 47 +++++----- .../font-library-modal/style.scss | 7 +- 4 files changed, 103 insertions(+), 104 deletions(-) delete mode 100644 packages/edit-site/src/components/global-styles/font-library-modal/fonts-grid.js diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js index 4a14ee245694b8..743fbece44498a 100644 --- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js +++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js @@ -6,6 +6,7 @@ import { __experimentalSpacer as Spacer, __experimentalInputControl as InputControl, __experimentalText as Text, + __experimentalVStack as VStack, SelectControl, Spinner, Icon, @@ -22,7 +23,6 @@ import { search, closeSmall } from '@wordpress/icons'; */ 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 +48,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 +110,32 @@ function FontCollection( { slug } ) { [ collectionFonts, filters ] ); + 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 = () => { @@ -199,10 +210,18 @@ function FontCollection( { slug } ) { notice={ notice } handleBack={ !! selectedFont && handleUnselectFont } footer={ -