Get paging working

WordPress · Aug 29, 2023 · dda18af · dda18af
1 parent 99ab8d2
commit dda18af
Show file tree

Hide file tree

Showing 7 changed files with 146 additions and 138 deletions.
diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -18,7 +18,6 @@ import { Icon, symbolFilled } from '@wordpress/icons';
  */
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
-import BlockPatternsSyncFilter from '../block-patterns-sync-filter';
 
 const WithToolTip = ( { showTooltip, title, children } ) => {
 	if ( showTooltip ) {
@@ -141,23 +140,15 @@ function BlockPatternList( {
 	orientation,
 	label = __( 'Block Patterns' ),
 	showTitlesAsTooltip,
-	category,
 } ) {
 	const composite = useCompositeState( { orientation } );
-	const [ syncFilter, setSyncFilter ] = useState( 'all' );
 	return (
 		<Composite
 			{ ...composite }
 			role="listbox"
 			className="block-editor-block-patterns-list"
 			aria-label={ label }
 		>
-			{ category === 'custom' && (
-				<BlockPatternsSyncFilter
-					syncFilter={ syncFilter }
-					setSyncFilter={ setSyncFilter }
-				/>
-			) }
 			{ blockPatterns.map( ( pattern ) => {
 				const isShown = shownPatterns.includes( pattern );
 				return isShown ? (

diff --git a/packages/block-editor/src/components/block-patterns-paging/index.js b/packages/block-editor/src/components/block-patterns-paging/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import {
+	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 	__experimentalText as Text,
 	Button,
@@ -15,12 +16,7 @@ export default function Pagination( {
 	totalItems,
 } ) {
 	return (
-		<HStack
-			expanded={ false }
-			spacing={ 3 }
-			justify="flex-start"
-			className="block-editor-patterns__grid-pagination"
-		>
+		<VStack>
 			<Text variant="muted">
 				{
 					// translators: %s: Total number of patterns.
@@ -31,50 +27,57 @@ export default function Pagination( {
 					)
 				}
 			</Text>
-			<HStack expanded={ false } spacing={ 1 }>
-				<Button
-					variant="tertiary"
-					onClick={ () => changePage( 1 ) }
-					disabled={ currentPage === 1 }
-					aria-label={ __( 'First page' ) }
-				>
-					«
-				</Button>
-				<Button
-					variant="tertiary"
-					onClick={ () => changePage( currentPage - 1 ) }
-					disabled={ currentPage === 1 }
-					aria-label={ __( 'Previous page' ) }
-				>
-					‹
-				</Button>
+			<HStack
+				expanded={ false }
+				spacing={ 3 }
+				justify="flex-start"
+				className="block-editor-patterns__grid-pagination"
+			>
+				<HStack expanded={ false } spacing={ 1 }>
+					<Button
+						variant="tertiary"
+						onClick={ () => changePage( 1 ) }
+						disabled={ currentPage === 1 }
+						aria-label={ __( 'First page' ) }
+					>
+						«
+					</Button>
+					<Button
+						variant="tertiary"
+						onClick={ () => changePage( currentPage - 1 ) }
+						disabled={ currentPage === 1 }
+						aria-label={ __( 'Previous page' ) }
+					>
+						‹
+					</Button>
+				</HStack>
+				<Text variant="muted">
+					{ sprintf(
+						// translators: %1$s: Current page number, %2$s: Total number of pages.
+						_x( '%1$s of %2$s', 'paging' ),
+						currentPage,
+						numPages
+					) }
+				</Text>
+				<HStack expanded={ false } spacing={ 1 }>
+					<Button
+						variant="tertiary"
+						onClick={ () => changePage( currentPage + 1 ) }
+						disabled={ currentPage === numPages }
+						aria-label={ __( 'Next page' ) }
+					>
+						›
+					</Button>
+					<Button
+						variant="tertiary"
+						onClick={ () => changePage( numPages ) }
+						disabled={ currentPage === numPages }
+						aria-label={ __( 'Last page' ) }
+					>
+						»
+					</Button>
+				</HStack>
 			</HStack>
-			<Text variant="muted">
-				{ sprintf(
-					// translators: %1$s: Current page number, %2$s: Total number of pages.
-					_x( '%1$s of %2$s', 'paging' ),
-					currentPage,
-					numPages
-				) }
-			</Text>
-			<HStack expanded={ false } spacing={ 1 }>
-				<Button
-					variant="tertiary"
-					onClick={ () => changePage( currentPage + 1 ) }
-					disabled={ currentPage === numPages }
-					aria-label={ __( 'Next page' ) }
-				>
-					›
-				</Button>
-				<Button
-					variant="tertiary"
-					onClick={ () => changePage( numPages ) }
-					disabled={ currentPage === numPages }
-					aria-label={ __( 'Last page' ) }
-				>
-					»
-				</Button>
-			</HStack>
-		</HStack>
+		</VStack>
 	);
 }
diff --git a/packages/block-editor/src/components/block-patterns-sync-filter/index.js b/packages/block-editor/src/components/block-patterns-sync-filter/index.js
diff --git a/packages/block-editor/src/components/block-patterns-sync-filter/style.scss b/packages/block-editor/src/components/block-patterns-sync-filter/style.scss
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js
@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useEffect, useState } from '@wordpress/element';
+import { useMemo, useEffect } from '@wordpress/element';
 import { _n, sprintf } from '@wordpress/i18n';
-import { useDebounce, useAsyncList } from '@wordpress/compose';
+import { useDebounce } from '@wordpress/compose';
 import { __experimentalHeading as Heading } from '@wordpress/components';
 import { speak } from '@wordpress/a11y';
 
@@ -16,10 +16,8 @@ import useInsertionPoint from '../hooks/use-insertion-point';
 import usePatternsState from '../hooks/use-patterns-state';
 import InserterListbox from '../../inserter-listbox';
 import { searchItems } from '../search-items';
-import BlockPatternsSyncFilter from '../../block-patterns-sync-filter';
 import BlockPatternsPaging from '../../block-patterns-paging';
-
-const INITIAL_INSERTER_RESULTS = 2;
+import usePatternsPaging from '../hooks/use-patterns-paging';
 
 function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 	if ( ! filterValue ) {
@@ -46,7 +44,6 @@ function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 }
 
 function PatternList( { filterValue, selectedCategory, patternCategories } ) {
-	const [ syncFilter, setSyncFilter ] = useState( 'all' );
 	const debouncedSpeak = useDebounce( speak, 500 );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
 		shouldFocusBlock: true,
@@ -100,9 +97,16 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 		debouncedSpeak( resultsFoundMessage );
 	}, [ filterValue, debouncedSpeak, filteredBlockPatterns.length ] );
 
-	const currentShownPatterns = useAsyncList( filteredBlockPatterns, {
-		step: INITIAL_INSERTER_RESULTS,
-	} );
+	const {
+		totalItems,
+		categoryPatternsList,
+		numPages,
+		changePage,
+		currentPage,
+	} = usePatternsPaging(
+		filteredBlockPatterns,
+		'.components-modal__content.is-scrollable'
+	);
 
 	const hasItems = !! filteredBlockPatterns?.length;
 	return (
@@ -115,26 +119,22 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 			) }
 			<InserterListbox>
 				{ ! hasItems && <InserterNoResults /> }
-				{ selectedCategory === 'custom' && (
-					<BlockPatternsSyncFilter
-						syncFilter={ syncFilter }
-						setSyncFilter={ setSyncFilter }
-					/>
-				) }
 				{ hasItems && (
 					<BlockPatternsList
-						shownPatterns={ currentShownPatterns }
+						shownPatterns={ categoryPatternsList }
 						blockPatterns={ filteredBlockPatterns }
 						onClickPattern={ onSelectBlockPattern }
 						isDraggable={ false }
 					/>
 				) }
-				<BlockPatternsPaging
-					currentPage={ 1 }
-					numPages={ 2 }
-					changePage={ () => {} }
-					totalItems={ 40 }
-				/>
+				{ numPages > 1 && (
+					<BlockPatternsPaging
+						currentPage={ currentPage }
+						numPages={ numPages }
+						changePage={ changePage }
+						totalItems={ totalItems }
+					/>
+				) }
 			</InserterListbox>
 		</div>
 	);

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js
@@ -9,7 +9,7 @@ import {
 	useEffect,
 } from '@wordpress/element';
 import { _x, __, isRTL } from '@wordpress/i18n';
-import { useAsyncList, useViewportMatch } from '@wordpress/compose';
+import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
@@ -28,6 +28,7 @@ import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
 import MobileTabNavigation from './mobile-tab-navigation';
 import BlockPatternsPaging from '../block-patterns-paging';
+import usePatternsPaging from './hooks/use-patterns-paging';
 
 const noop = () => {};
 
@@ -169,11 +170,21 @@ export function BlockPatternsCategoryPanel( {
 		[ allPatterns, availableCategories, category.name ]
 	);
 
-	const categoryPatternsList = useAsyncList( currentCategoryPatterns );
-
 	// Hide block pattern preview on unmount.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => () => onHover( null ), [] );
 
+	const {
+		totalItems,
+		categoryPatternsList,
+		numPages,
+		changePage,
+		currentPage,
+	} = usePatternsPaging(
+		currentCategoryPatterns,
+		'.block-editor-inserter__patterns-category-dialog'
+	);
+
 	if ( ! currentCategoryPatterns.length ) {
 		return null;
 	}
@@ -195,12 +206,14 @@ export function BlockPatternsCategoryPanel( {
 				isDraggable
 				showTitlesAsTooltip={ showTitlesAsTooltip }
 			/>
-			<BlockPatternsPaging
-				currentPage={ 1 }
-				numPages={ 2 }
-				changePage={ () => {} }
-				totalItems={ 40 }
-			/>
+			{ numPages > 1 && (
+				<BlockPatternsPaging
+					currentPage={ currentPage }
+					numPages={ numPages }
+					changePage={ changePage }
+					totalItems={ totalItems }
+				/>
+			) }
 		</div>
 	);
 }