From e520e9e308adcc95ec3bbcc8d6d3a713b7ee42db Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Mon, 17 Jul 2023 01:27:07 +0900 Subject: [PATCH 1/6] Try: Sticky header on Patterns page --- packages/base-styles/_z-index.scss | 1 + .../components/page-patterns/patterns-list.js | 157 +++++++++--------- .../src/components/page-patterns/style.scss | 21 +++ 3 files changed, 103 insertions(+), 76 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index cc4a42df98f0a..3713162033827 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -186,6 +186,7 @@ $z-layers: ( ".edit-site-layout__hub": 3, ".edit-site-layout__header": 2, ".edit-site-page-header": 2, + ".edit-site-patterns__header": 2, ".edit-site-layout__canvas-container": 2, ".edit-site-layout__sidebar": 1, ".edit-site-layout__canvas-container.is-resizing::after": 100, 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 f4fefed4a2d3e..ba558ab104bdd 100644 --- a/packages/edit-site/src/components/page-patterns/patterns-list.js +++ b/packages/edit-site/src/components/page-patterns/patterns-list.js @@ -72,84 +72,89 @@ export default function PatternsList( { categoryId, type } ) { const description = SYNC_DESCRIPTIONS[ syncFilter ]; return ( - - - - - { isMobileViewport && ( - { - // Go back in history if we came from the Patterns page. - // Otherwise push a stack onto the history. - if ( location.state?.backPath === '/patterns' ) { - history.back(); - } else { - history.push( { path: '/patterns' } ); - } - } } - /> + <> + + + + { isMobileViewport && ( + { + // Go back in history if we came from the Patterns page. + // Otherwise push a stack onto the history. + if ( + location.state?.backPath === '/patterns' + ) { + history.back(); + } else { + history.push( { path: '/patterns' } ); + } + } } + /> + ) } + + setFilterValue( value ) } + placeholder={ __( 'Search patterns' ) } + label={ __( 'Search patterns' ) } + value={ filterValue } + __nextHasNoMarginBottom + /> + + { categoryId === USER_PATTERN_CATEGORY && ( + setSyncFilter( value ) } + __nextHasNoMarginBottom + > + { Object.entries( SYNC_FILTERS ).map( + ( [ key, label ] ) => ( + + ) + ) } + + ) } + + + + { syncFilter !== 'all' && ( + + + { title } + + { description ? ( + + { description } + + ) : null } + ) } - - setFilterValue( value ) } - placeholder={ __( 'Search patterns' ) } - label={ __( 'Search patterns' ) } - value={ filterValue } - __nextHasNoMarginBottom + { hasPatterns && ( + - - { categoryId === USER_PATTERN_CATEGORY && ( - setSyncFilter( value ) } - __nextHasNoMarginBottom - > - { Object.entries( SYNC_FILTERS ).map( - ( [ key, label ] ) => ( - - ) - ) } - ) } - - { syncFilter !== 'all' && ( - - - { title } - - { description ? ( - - { description } - - ) : null } - - ) } - { hasPatterns && ( - - ) } - { ! isResolving && ! hasPatterns && } - + { ! isResolving && ! hasPatterns && } + + ); } diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index d1fbedb141f70..90591b7fc54de 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -3,6 +3,15 @@ background: none; margin: $header-height 0 0; border-radius: 0; + padding: 0; + overflow-x: auto; + + .edit-site-page-content { + height: 100%; + position: relative; + padding: 0 0 $grid-unit-40; + } + .components-base-control { width: 100%; @include break-medium { @@ -80,6 +89,18 @@ } } +.edit-site-patterns__header { + position: sticky; + top: 0; + background: $gray-900; + padding: $grid-unit-40 $grid-unit-40 $grid-unit-20; + z-index: z-index(".edit-site-patterns__header"); +} + +.edit-site-patterns__section { + padding: $grid-unit-20 $grid-unit-40 0; +} + .edit-site-patterns__section-header { .screen-reader-shortcut:focus { top: 0; From 02979ca14b5bb1fafcb32a5cc40c84560da2ed11 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Mon, 17 Jul 2023 22:10:12 +0900 Subject: [PATCH 2/6] Sticky pagination --- packages/base-styles/_z-index.scss | 1 + .../src/components/page-patterns/grid.js | 133 ++---------------- .../components/page-patterns/pagination.js | 80 +++++++++++ .../components/page-patterns/patterns-list.js | 47 ++++++- .../src/components/page-patterns/style.scss | 22 ++- 5 files changed, 148 insertions(+), 135 deletions(-) create mode 100644 packages/edit-site/src/components/page-patterns/pagination.js diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 3713162033827..ca0b536760b17 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -187,6 +187,7 @@ $z-layers: ( ".edit-site-layout__header": 2, ".edit-site-page-header": 2, ".edit-site-patterns__header": 2, + ".edit-site-patterns__grid-pagination": 2, ".edit-site-layout__canvas-container": 2, ".edit-site-layout__sidebar": 1, ".edit-site-layout__canvas-container.is-resizing::after": 100, diff --git a/packages/edit-site/src/components/page-patterns/grid.js b/packages/edit-site/src/components/page-patterns/grid.js index 47bcdc8a1f768..32fa6ebe55b39 100644 --- a/packages/edit-site/src/components/page-patterns/grid.js +++ b/packages/edit-site/src/components/page-patterns/grid.js @@ -1,137 +1,22 @@ -/** - * WordPress dependencies - */ -import { - __experimentalHStack as HStack, - __experimentalText as Text, - Button, -} from '@wordpress/components'; -import { useRef, useState, useMemo } from '@wordpress/element'; -import { __, _x, _n, sprintf } from '@wordpress/i18n'; -import { useAsyncList } from '@wordpress/compose'; - /** * Internal dependencies */ import GridItem from './grid-item'; -const PAGE_SIZE = 20; - -function Pagination( { currentPage, numPages, changePage, totalItems } ) { - return ( - - - { - // translators: %s: Total number of patterns. - sprintf( - // translators: %s: Total number of patterns. - _n( '%s item', '%s items', totalItems ), - totalItems - ) - } - - - - - - - { sprintf( - // translators: %1$s: Current page number, %2$s: Total number of pages. - _x( '%1$s of %2$s', 'paging' ), - currentPage, - numPages - ) } - - - - - - - ); -} - export default function Grid( { categoryId, items, ...props } ) { - const [ currentPage, setCurrentPage ] = useState( 1 ); - const gridRef = useRef(); - const totalItems = items.length; - const pageIndex = currentPage - 1; - - const list = useMemo( - () => - items.slice( - pageIndex * PAGE_SIZE, - pageIndex * PAGE_SIZE + PAGE_SIZE - ), - [ pageIndex, items ] - ); - - const asyncList = useAsyncList( list, { step: 10 } ); - - if ( ! list?.length ) { + if ( ! items?.length ) { return null; } - const numPages = Math.ceil( items.length / PAGE_SIZE ); - const changePage = ( page ) => { - const scrollContainer = document.querySelector( '.edit-site-patterns' ); - scrollContainer?.scrollTo( 0, 0 ); - - setCurrentPage( page ); - }; - return ( - <> -
    - { asyncList.map( ( item ) => ( - - ) ) } -
- { numPages > 1 && ( - + { items.map( ( item ) => ( + - ) } - + ) ) } + ); } diff --git a/packages/edit-site/src/components/page-patterns/pagination.js b/packages/edit-site/src/components/page-patterns/pagination.js new file mode 100644 index 0000000000000..b2b25bb066ffa --- /dev/null +++ b/packages/edit-site/src/components/page-patterns/pagination.js @@ -0,0 +1,80 @@ +/** + * WordPress dependencies + */ +import { + __experimentalHStack as HStack, + __experimentalText as Text, + Button, +} from '@wordpress/components'; +import { __, _x, _n, sprintf } from '@wordpress/i18n'; + +export default function Pagination( { + currentPage, + numPages = 1, + changePage, + totalItems = 10, +} ) { + return ( + + + { + // translators: %s: Total number of patterns. + sprintf( + // translators: %s: Total number of patterns. + _n( '%s item', '%s items', totalItems ), + totalItems + ) + } + + + + + + + { sprintf( + // translators: %1$s: Current page number, %2$s: Total number of pages. + _x( '%1$s of %2$s', 'paging' ), + currentPage, + numPages + ) } + + + + + + + ); +} 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 ba558ab104bdd..17202cc1fce30 100644 --- a/packages/edit-site/src/components/page-patterns/patterns-list.js +++ b/packages/edit-site/src/components/page-patterns/patterns-list.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useState, useDeferredValue, useId } from '@wordpress/element'; +import { useState, useDeferredValue, useId, useMemo } from '@wordpress/element'; import { SearchControl, __experimentalVStack as VStack, @@ -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 } from '@wordpress/compose'; +import { useAsyncList, useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -28,6 +28,7 @@ import SidebarButton from '../sidebar-button'; import useDebouncedInput from '../../utils/use-debounced-input'; import { unlock } from '../../lock-unlock'; import { SYNC_TYPES, USER_PATTERN_CATEGORY } from './utils'; +import Pagination from './pagination'; const { useLocation, useHistory } = unlock( routerPrivateApis ); @@ -47,6 +48,8 @@ const SYNC_DESCRIPTIONS = { ), }; +const PAGE_SIZE = 20; + export default function PatternsList( { categoryId, type } ) { const location = useLocation(); const history = useHistory(); @@ -56,6 +59,8 @@ export default function PatternsList( { categoryId, type } ) { const deferredFilterValue = useDeferredValue( delayedFilterValue ); const [ syncFilter, setSyncFilter ] = useState( 'all' ); + const [ currentPage, setCurrentPage ] = useState( 1 ); + const deferredSyncedFilter = useDeferredValue( syncFilter ); const { patterns, isResolving } = usePatterns( type, categoryId, { search: deferredFilterValue, @@ -71,6 +76,28 @@ export default function PatternsList( { categoryId, type } ) { const title = SYNC_FILTERS[ syncFilter ]; const description = SYNC_DESCRIPTIONS[ syncFilter ]; + const totalItems = patterns.length; + const pageIndex = currentPage - 1; + const numPages = Math.ceil( patterns.length / PAGE_SIZE ); + + const list = useMemo( + () => + patterns.slice( + pageIndex * PAGE_SIZE, + pageIndex * PAGE_SIZE + PAGE_SIZE + ), + [ pageIndex, patterns ] + ); + + const asyncList = useAsyncList( list, { step: 10 } ); + + const changePage = ( page ) => { + const scrollContainer = document.querySelector( '.edit-site-patterns' ); + scrollContainer?.scrollTo( 0, 0 ); + + setCurrentPage( page ); + }; + return ( <> @@ -132,7 +159,11 @@ export default function PatternsList( { categoryId, type } ) { ) } - + { syncFilter !== 'all' && ( @@ -148,13 +179,21 @@ export default function PatternsList( { categoryId, type } ) { { hasPatterns && ( ) } { ! isResolving && ! hasPatterns && } + { numPages > 1 && ( + + ) } ); } diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index 90591b7fc54de..4edd2ab0603aa 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -9,7 +9,9 @@ .edit-site-page-content { height: 100%; position: relative; - padding: 0 0 $grid-unit-40; + padding: 0; + display: flex; + flex-flow: column; } .components-base-control { @@ -72,16 +74,24 @@ } .edit-site-patterns__grid-pagination { - width: fit-content; + background: $gray-900; + padding: $grid-unit-20 $grid-unit-40 $grid-unit-40; + position: sticky; + bottom: 0; + z-index: z-index(".edit-site-patterns__grid-pagination"); + .components-button.is-tertiary { width: $button-size-compact; height: $button-size-compact; color: $gray-100; background-color: $gray-800; + justify-content: center; + &:disabled { color: $gray-600; background: none; } + &:hover:not(:disabled) { background-color: $gray-700; } @@ -98,7 +108,8 @@ } .edit-site-patterns__section { - padding: $grid-unit-20 $grid-unit-40 0; + padding: $grid-unit-20 $grid-unit-40; + flex: 1; } .edit-site-patterns__section-header { @@ -111,11 +122,8 @@ display: grid; grid-template-columns: 1fr; gap: $grid-unit-40; - // 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; + margin-bottom: 0; @include break-large { grid-template-columns: 1fr 1fr; } From d0314ac6c56f7ce265d2cdd7b1edb06aa6b278d1 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 18 Jul 2023 00:54:27 +0900 Subject: [PATCH 3/6] Match the pagination height to the save button --- .../edit-site/src/components/page-patterns/style.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index 4edd2ab0603aa..ac7bc6074a92c 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -1,5 +1,5 @@ .edit-site-patterns { - border: 1px solid $gray-800; + border-left: 1px solid $gray-800; background: none; margin: $header-height 0 0; border-radius: 0; @@ -74,16 +74,16 @@ } .edit-site-patterns__grid-pagination { + border-top: 1px solid $gray-800; background: $gray-900; - padding: $grid-unit-20 $grid-unit-40 $grid-unit-40; + padding: $grid-unit-30 $grid-unit-40 $grid-unit-30; position: sticky; bottom: 0; z-index: z-index(".edit-site-patterns__grid-pagination"); .components-button.is-tertiary { - width: $button-size-compact; - height: $button-size-compact; color: $gray-100; + width: $button-size; background-color: $gray-800; justify-content: center; @@ -108,7 +108,7 @@ } .edit-site-patterns__section { - padding: $grid-unit-20 $grid-unit-40; + padding: $grid-unit-30 $grid-unit-40; flex: 1; } From 40fa2db7bb1c163d6819b258b5fc0563a62cbde9 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 18 Jul 2023 21:02:11 +0900 Subject: [PATCH 4/6] Revert pagination buttons size --- packages/edit-site/src/components/page-patterns/style.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index ac7bc6074a92c..178fc239fa06b 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -76,14 +76,15 @@ .edit-site-patterns__grid-pagination { border-top: 1px solid $gray-800; background: $gray-900; - padding: $grid-unit-30 $grid-unit-40 $grid-unit-30; + padding: $grid-unit-30 + math.div($grid-unit-05, 2) $grid-unit-40; // 22px 32px position: sticky; bottom: 0; z-index: z-index(".edit-site-patterns__grid-pagination"); .components-button.is-tertiary { + width: $button-size-compact; + height: $button-size-compact; color: $gray-100; - width: $button-size; background-color: $gray-800; justify-content: center; From fa20e89a8b0776f15948cb2f3477f252e97b9ffc Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 18 Jul 2023 23:49:31 +0900 Subject: [PATCH 5/6] Use strict grid size --- packages/edit-site/src/components/page-patterns/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index 178fc239fa06b..ae35bcb86137b 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -76,7 +76,7 @@ .edit-site-patterns__grid-pagination { border-top: 1px solid $gray-800; background: $gray-900; - padding: $grid-unit-30 + math.div($grid-unit-05, 2) $grid-unit-40; // 22px 32px + padding: $grid-unit-30 $grid-unit-40; position: sticky; bottom: 0; z-index: z-index(".edit-site-patterns__grid-pagination"); From 66d03bc881bd97d7719d749730dc90cbc05788c4 Mon Sep 17 00:00:00 2001 From: Tetsuaki Hamano Date: Tue, 18 Jul 2023 23:55:11 +0900 Subject: [PATCH 6/6] Remove default values that were set by mistake --- packages/edit-site/src/components/page-patterns/pagination.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/page-patterns/pagination.js b/packages/edit-site/src/components/page-patterns/pagination.js index b2b25bb066ffa..702e24cd31b7f 100644 --- a/packages/edit-site/src/components/page-patterns/pagination.js +++ b/packages/edit-site/src/components/page-patterns/pagination.js @@ -10,9 +10,9 @@ import { __, _x, _n, sprintf } from '@wordpress/i18n'; export default function Pagination( { currentPage, - numPages = 1, + numPages, changePage, - totalItems = 10, + totalItems, } ) { return (