From b841a5e621d3b8bcc71319b4b1ed4c11e0d5d335 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 12 Jul 2023 13:18:44 +1200 Subject: [PATCH 01/11] Try adding client side pagination to patterns list --- .../src/components/page-patterns/grid.js | 89 ++++++++++++++++--- .../components/page-patterns/patterns-list.js | 5 +- .../src/components/page-patterns/style.scss | 8 ++ 3 files changed, 85 insertions(+), 17 deletions(-) diff --git a/packages/edit-site/src/components/page-patterns/grid.js b/packages/edit-site/src/components/page-patterns/grid.js index 1902b36982c14..fa51d8cb986ea 100644 --- a/packages/edit-site/src/components/page-patterns/grid.js +++ b/packages/edit-site/src/components/page-patterns/grid.js @@ -1,8 +1,8 @@ /** * WordPress dependencies */ -import { __experimentalText as Text } from '@wordpress/components'; -import { useRef } from '@wordpress/element'; +import { __experimentalHStack as HStack } from '@wordpress/components'; +import { useRef, useState } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; /** @@ -10,20 +10,87 @@ import { __, sprintf } from '@wordpress/i18n'; */ import GridItem from './grid-item'; -const PAGE_SIZE = 100; +const PAGE_SIZE = 20; + +function Pagination( { currentPage, numPages, changePage, totalItems } ) { + return ( + +
+ { + // translators: %s: Total number of patterns. + sprintf( __( '%s items' ), totalItems ) + } +
+ + + +
+ { + // translators: %1$s: Current page number, %2$s: Total number of pages. + sprintf( __( '%1$s of %2$s' ), currentPage, numPages ) + } +
+ + + + ); +} export default function Grid( { categoryId, items, ...props } ) { + const [ currentPage, setCurrentPage ] = useState( 1 ); const gridRef = useRef(); if ( ! items?.length ) { return null; } + items.sort( ( a, b ) => + a.title.localeCompare( b.title, undefined, { + numeric: true, + sensitivity: 'base', + } ) + ); + const numPages = Math.ceil( items.length / PAGE_SIZE ); + const totalItems = items.length; + const pageIndex = currentPage - 1; + const list = items.slice( + pageIndex * PAGE_SIZE, + pageIndex * PAGE_SIZE + PAGE_SIZE + ); + + const changePage = ( page ) => { + const scrollContainer = + document.getElementsByClassName( 'edit-site-patterns' ); + + scrollContainer[ 0 ].scrollTo( 0, 0 ); - const list = items.slice( 0, PAGE_SIZE ); - const restLength = items.length - PAGE_SIZE; + setCurrentPage( page ); + }; return ( <> + - { restLength > 0 && ( - - { sprintf( - /* translators: %d: number of patterns */ - __( '+ %d more patterns discoverable by searching' ), - restLength - ) } - - ) } + ); } diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js index 7bf2a9d506584..c17cb7f600a52 100644 --- a/packages/edit-site/src/components/page-patterns/patterns-list.js +++ b/packages/edit-site/src/components/page-patterns/patterns-list.js @@ -15,7 +15,7 @@ import { import { __, isRTL } from '@wordpress/i18n'; import { chevronLeft, chevronRight } from '@wordpress/icons'; import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { useViewportMatch, useAsyncList } from '@wordpress/compose'; +import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -70,7 +70,6 @@ export default function PatternsList( { categoryId, type } ) { const hasPatterns = patterns.length; const title = SYNC_FILTERS[ syncFilter ]; const description = SYNC_DESCRIPTIONS[ syncFilter ]; - const shownPatterns = useAsyncList( patterns ); return ( @@ -145,7 +144,7 @@ export default function PatternsList( { categoryId, type } ) { { hasPatterns && ( diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index 79731999f46ef..88eb1f084ec9b 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -59,6 +59,14 @@ background: $gray-700; color: $gray-100; } + + .edit-site-patterns__grid-pagination { + width: fit-content; + + .edit-site-patterns__grid-pagination-label { + color: $white; + } + } } .edit-site-patterns__section-header { From 0e090f8c5d061d6b9a75a0f8c576357f7cb76c89 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 12 Jul 2023 13:29:47 +1200 Subject: [PATCH 02/11] Don't display pagination if only 1 page --- .../src/components/page-patterns/grid.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/page-patterns/grid.js b/packages/edit-site/src/components/page-patterns/grid.js index fa51d8cb986ea..e87e1df57de5c 100644 --- a/packages/edit-site/src/components/page-patterns/grid.js +++ b/packages/edit-site/src/components/page-patterns/grid.js @@ -88,9 +88,11 @@ export default function Grid( { categoryId, items, ...props } ) { return ( <> - + { numPages > 1 && ( + + ) }
    ) ) }
- + { numPages > 1 && ( + + ) } ); } From 24edc0808ba0417e8f6beefd2dc26c5e3fcef51b Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Thu, 13 Jul 2023 11:07:18 +1000 Subject: [PATCH 03/11] pagination style updates --- .../src/components/page-patterns/grid.js | 90 ++++++++++--------- .../components/page-patterns/patterns-list.js | 2 +- .../src/components/page-patterns/style.scss | 20 ++++- 3 files changed, 64 insertions(+), 48 deletions(-) diff --git a/packages/edit-site/src/components/page-patterns/grid.js b/packages/edit-site/src/components/page-patterns/grid.js index e87e1df57de5c..72d9f6659086d 100644 --- a/packages/edit-site/src/components/page-patterns/grid.js +++ b/packages/edit-site/src/components/page-patterns/grid.js @@ -1,7 +1,11 @@ /** * WordPress dependencies */ -import { __experimentalHStack as HStack } from '@wordpress/components'; +import { + __experimentalHStack as HStack, + __experimentalText as Text, + Button, +} from '@wordpress/components'; import { useRef, useState } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; @@ -10,48 +14,59 @@ import { __, sprintf } from '@wordpress/i18n'; */ import GridItem from './grid-item'; -const PAGE_SIZE = 20; +const PAGE_SIZE = 30; function Pagination( { currentPage, numPages, changePage, totalItems } ) { return ( - -
+ + { // translators: %s: Total number of patterns. sprintf( __( '%s items' ), totalItems ) } -
- - - -
+ + + + + + { // translators: %1$s: Current page number, %2$s: Total number of pages. sprintf( __( '%1$s of %2$s' ), currentPage, numPages ) } -
- - + + + + + ); } @@ -63,12 +78,6 @@ export default function Grid( { categoryId, items, ...props } ) { if ( ! items?.length ) { return null; } - items.sort( ( a, b ) => - a.title.localeCompare( b.title, undefined, { - numeric: true, - sensitivity: 'base', - } ) - ); const numPages = Math.ceil( items.length / PAGE_SIZE ); const totalItems = items.length; const pageIndex = currentPage - 1; @@ -88,11 +97,6 @@ export default function Grid( { categoryId, items, ...props } ) { return ( <> - { numPages > 1 && ( - - ) }
    { syncFilter !== 'all' && ( - + { title } { description ? ( diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index 88eb1f084ec9b..d1fbedb141f70 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -1,6 +1,8 @@ .edit-site-patterns { - background: rgba(0, 0, 0, 0.15); + border: 1px solid $gray-800; + background: none; margin: $header-height 0 0; + border-radius: 0; .components-base-control { width: 100%; @include break-medium { @@ -62,9 +64,18 @@ .edit-site-patterns__grid-pagination { width: fit-content; - - .edit-site-patterns__grid-pagination-label { - color: $white; + .components-button.is-tertiary { + width: $button-size-compact; + height: $button-size-compact; + color: $gray-100; + background-color: $gray-800; + &:disabled { + color: $gray-600; + background: none; + } + &:hover:not(:disabled) { + background-color: $gray-700; + } } } } @@ -82,6 +93,7 @@ // Small top padding required to avoid cutting off the visible outline // when hovering items. padding-top: $border-width-focus-fallback; + margin-top: 0; margin-bottom: $grid-unit-40; @include break-large { grid-template-columns: 1fr 1fr; From ecfc5540dc52c12aec658bc2314ff8e659ce61c9 Mon Sep 17 00:00:00 2001 From: Saxon Fletcher Date: Thu, 13 Jul 2023 11:24:30 +1000 Subject: [PATCH 04/11] 20 items per page --- packages/edit-site/src/components/page-patterns/grid.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/page-patterns/grid.js b/packages/edit-site/src/components/page-patterns/grid.js index 72d9f6659086d..6ef95bf90d2ca 100644 --- a/packages/edit-site/src/components/page-patterns/grid.js +++ b/packages/edit-site/src/components/page-patterns/grid.js @@ -14,7 +14,7 @@ import { __, sprintf } from '@wordpress/i18n'; */ import GridItem from './grid-item'; -const PAGE_SIZE = 30; +const PAGE_SIZE = 20; function Pagination( { currentPage, numPages, changePage, totalItems } ) { return ( From 23b673e5cd9014e28de3b97d3c852c7e824b3153 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 13 Jul 2023 14:38:01 +1200 Subject: [PATCH 05/11] Switch back to using async list --- .../src/components/page-patterns/grid.js | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/edit-site/src/components/page-patterns/grid.js b/packages/edit-site/src/components/page-patterns/grid.js index 6ef95bf90d2ca..5604d8f824709 100644 --- a/packages/edit-site/src/components/page-patterns/grid.js +++ b/packages/edit-site/src/components/page-patterns/grid.js @@ -6,8 +6,9 @@ import { __experimentalText as Text, Button, } from '@wordpress/components'; -import { useRef, useState } from '@wordpress/element'; +import { useRef, useState, useMemo } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; +import { useAsyncList } from '@wordpress/compose'; /** * Internal dependencies @@ -74,18 +75,25 @@ function Pagination( { currentPage, numPages, changePage, totalItems } ) { export default function Grid( { categoryId, items, ...props } ) { const [ currentPage, setCurrentPage ] = useState( 1 ); const gridRef = useRef(); - - if ( ! items?.length ) { - return null; - } - const numPages = Math.ceil( items.length / PAGE_SIZE ); const totalItems = items.length; const pageIndex = currentPage - 1; - const list = items.slice( - pageIndex * PAGE_SIZE, - pageIndex * PAGE_SIZE + PAGE_SIZE + + const list = useMemo( + () => + items.slice( + pageIndex * PAGE_SIZE, + pageIndex * PAGE_SIZE + PAGE_SIZE + ), + [ pageIndex, items ] ); + const asyncList = useAsyncList( list, { step: 10 } ); + + if ( ! list?.length ) { + return null; + } + + const numPages = Math.ceil( items.length / PAGE_SIZE ); const changePage = ( page ) => { const scrollContainer = document.getElementsByClassName( 'edit-site-patterns' ); @@ -103,7 +111,7 @@ export default function Grid( { categoryId, items, ...props } ) { { ...props } ref={ gridRef } > - { list.map( ( item ) => ( + { asyncList.map( ( item ) => ( Date: Thu, 13 Jul 2023 15:42:00 +1200 Subject: [PATCH 06/11] Add aria labels to buttons --- packages/edit-site/src/components/page-patterns/grid.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/edit-site/src/components/page-patterns/grid.js b/packages/edit-site/src/components/page-patterns/grid.js index 5604d8f824709..65bbbf1ce89b2 100644 --- a/packages/edit-site/src/components/page-patterns/grid.js +++ b/packages/edit-site/src/components/page-patterns/grid.js @@ -35,6 +35,7 @@ function Pagination( { currentPage, numPages, changePage, totalItems } ) { variant="tertiary" onClick={ () => changePage( 1 ) } disabled={ currentPage === 1 } + aria-label={ __( 'First page' ) } > « @@ -42,6 +43,7 @@ function Pagination( { currentPage, numPages, changePage, totalItems } ) { variant="tertiary" onClick={ () => changePage( currentPage - 1 ) } disabled={ currentPage === 1 } + aria-label={ __( 'Previous page' ) } > ‹ @@ -57,6 +59,7 @@ function Pagination( { currentPage, numPages, changePage, totalItems } ) { variant="tertiary" onClick={ () => changePage( currentPage + 1 ) } disabled={ currentPage === numPages } + aria-label={ __( 'Next page' ) } > › @@ -64,6 +67,7 @@ function Pagination( { currentPage, numPages, changePage, totalItems } ) { variant="tertiary" onClick={ () => changePage( numPages ) } disabled={ currentPage === numPages } + aria-label={ __( 'Last page' ) } > » From ab3f23ea555e18e0ddf8030cc17145661c323a6b Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 13 Jul 2023 16:16:41 +1200 Subject: [PATCH 07/11] Add context for number of items string --- .../edit-site/src/components/page-patterns/grid.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/page-patterns/grid.js b/packages/edit-site/src/components/page-patterns/grid.js index 65bbbf1ce89b2..18ae5f33fb3e6 100644 --- a/packages/edit-site/src/components/page-patterns/grid.js +++ b/packages/edit-site/src/components/page-patterns/grid.js @@ -7,7 +7,7 @@ import { Button, } from '@wordpress/components'; import { useRef, useState, useMemo } from '@wordpress/element'; -import { __, sprintf } from '@wordpress/i18n'; +import { __, _x, sprintf } from '@wordpress/i18n'; import { useAsyncList } from '@wordpress/compose'; /** @@ -49,10 +49,12 @@ function Pagination( { currentPage, numPages, changePage, totalItems } ) { - { + { sprintf( // translators: %1$s: Current page number, %2$s: Total number of pages. - sprintf( __( '%1$s of %2$s' ), currentPage, numPages ) - } + _x( '%1$s of %2$s', 'paging' ), + currentPage, + numPages + ) }