From 99ab8d269ae39d6973e662b0dc0a1ee2de6df066 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 25 Jul 2023 16:37:43 +1200 Subject: [PATCH] very rough addition of filter and paging in order to get designs --- .../components/block-patterns-list/index.js | 39 ++------- .../components/block-patterns-list/style.scss | 7 +- .../components/block-patterns-paging/index.js | 80 +++++++++++++++++++ .../block-patterns-paging/style.scss | 19 +++++ .../block-patterns-sync-filter/index.js | 45 +++++++++++ .../block-patterns-sync-filter/style.scss | 3 + .../block-patterns-explorer/patterns-list.js | 17 +++- .../components/inserter/block-patterns-tab.js | 7 ++ packages/block-editor/src/style.scss | 2 + 9 files changed, 185 insertions(+), 34 deletions(-) create mode 100644 packages/block-editor/src/components/block-patterns-paging/index.js create mode 100644 packages/block-editor/src/components/block-patterns-paging/style.scss create mode 100644 packages/block-editor/src/components/block-patterns-sync-filter/index.js create mode 100644 packages/block-editor/src/components/block-patterns-sync-filter/style.scss diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js index dfbd9eca5c090..56b39b0171ba1 100644 --- a/packages/block-editor/src/components/block-patterns-list/index.js +++ b/packages/block-editor/src/components/block-patterns-list/index.js @@ -8,8 +8,6 @@ import { __unstableUseCompositeState as useCompositeState, __unstableCompositeItem as CompositeItem, Tooltip, - __experimentalToggleGroupControl as ToggleGroupControl, - __experimentalToggleGroupControlOption as ToggleGroupControlOption, } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; @@ -20,15 +18,8 @@ import { Icon, symbolFilled } from '@wordpress/icons'; */ import BlockPreview from '../block-preview'; import InserterDraggableBlocks from '../inserter-draggable-blocks'; -const SYNC_TYPES = { - full: 'fully', - unsynced: 'unsynced', -}; -const SYNC_FILTERS = { - all: __( 'All' ), - [ SYNC_TYPES.full ]: __( 'Synced' ), - [ SYNC_TYPES.unsynced ]: __( 'Standard' ), -}; +import BlockPatternsSyncFilter from '../block-patterns-sync-filter'; + const WithToolTip = ( { showTooltip, title, children } ) => { if ( showTooltip ) { return { children }; @@ -121,7 +112,7 @@ function BlockPattern( { > @@ -162,26 +153,10 @@ function BlockPatternList( { aria-label={ label } > { category === 'custom' && ( - setSyncFilter( value ) } - __nextHasNoMarginBottom - > - { Object.entries( SYNC_FILTERS ).map( - ( [ key, optionLabel ] ) => ( - - ) - ) } - + ) } { blockPatterns.map( ( pattern ) => { const isShown = shownPatterns.includes( pattern ); diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss index ab80fc71d36df..fbc1fddbbd1ca 100644 --- a/packages/block-editor/src/components/block-patterns-list/style.scss +++ b/packages/block-editor/src/components/block-patterns-list/style.scss @@ -40,9 +40,14 @@ @include button-style-outset__focus(var(--wp-admin-theme-color)); } - &:hover .block-editor-block-patterns-list__item-title, &:focus .block-editor-block-patterns-list__item-title { color: var(--wp-admin-theme-color); } + + .block-editor-patterns__pattern-icon { + fill: #fff; + background: var(--wp-block-synced-color); + border-radius: 4px; + } } diff --git a/packages/block-editor/src/components/block-patterns-paging/index.js b/packages/block-editor/src/components/block-patterns-paging/index.js new file mode 100644 index 0000000000000..7b09ed8b9f0a6 --- /dev/null +++ b/packages/block-editor/src/components/block-patterns-paging/index.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, + 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 + ) } + + + + + + + ); +} diff --git a/packages/block-editor/src/components/block-patterns-paging/style.scss b/packages/block-editor/src/components/block-patterns-paging/style.scss new file mode 100644 index 0000000000000..321f251597e1e --- /dev/null +++ b/packages/block-editor/src/components/block-patterns-paging/style.scss @@ -0,0 +1,19 @@ +.block-editor-patterns__grid-pagination { + border-top: 1px solid $gray-800; + padding: $grid-unit-05; + + .components-button.is-tertiary { + width: $button-size-compact; + height: $button-size-compact; + justify-content: center; + + &:disabled { + color: $gray-600; + background: none; + } + + &:hover:not(:disabled) { + background-color: $gray-700; + } + } +} 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 new file mode 100644 index 0000000000000..dfb08c0bb9fa5 --- /dev/null +++ b/packages/block-editor/src/components/block-patterns-sync-filter/index.js @@ -0,0 +1,45 @@ +/** + * WordPress dependencies + */ +import { + __experimentalToggleGroupControl as ToggleGroupControl, + __experimentalToggleGroupControlOption as ToggleGroupControlOption, +} from '@wordpress/components'; + +import { __ } from '@wordpress/i18n'; + +const SYNC_TYPES = { + full: 'fully', + unsynced: 'unsynced', +}; +const SYNC_FILTERS = { + all: __( 'All' ), + [ SYNC_TYPES.full ]: __( 'Synced' ), + [ SYNC_TYPES.unsynced ]: __( 'Standard' ), +}; + +export default function BlockPatternsSyncFilter( { + setSyncFilter, + syncFilter, +} ) { + return ( + setSyncFilter( value ) } + __nextHasNoMarginBottom + > + { Object.entries( SYNC_FILTERS ).map( ( [ key, optionLabel ] ) => ( + + ) ) } + + ); +} 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 new file mode 100644 index 0000000000000..41044dff03277 --- /dev/null +++ b/packages/block-editor/src/components/block-patterns-sync-filter/style.scss @@ -0,0 +1,3 @@ +.block-editor-patterns__sync-status-filter { + margin-bottom: $grid-unit-10; +} 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 index fda1a00c1a07d..37d17af8c12cb 100644 --- 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,7 +1,7 @@ /** * WordPress dependencies */ -import { useMemo, useEffect } from '@wordpress/element'; +import { useMemo, useEffect, useState } from '@wordpress/element'; import { _n, sprintf } from '@wordpress/i18n'; import { useDebounce, useAsyncList } from '@wordpress/compose'; import { __experimentalHeading as Heading } from '@wordpress/components'; @@ -16,6 +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; @@ -44,6 +46,7 @@ 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, @@ -112,6 +115,12 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) { ) } { ! hasItems && } + { selectedCategory === 'custom' && ( + + ) } { hasItems && ( ) } + {} } + totalItems={ 40 } + /> ); diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js index 9e38d6e95d571..5c573e7ea950f 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab.js @@ -27,6 +27,7 @@ import usePatternsState from './hooks/use-patterns-state'; 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'; const noop = () => {}; @@ -194,6 +195,12 @@ export function BlockPatternsCategoryPanel( { isDraggable showTitlesAsTooltip={ showTitlesAsTooltip } /> + {} } + totalItems={ 40 } + /> ); } diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 5eafc0766ae22..51ca87b758a1e 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -12,6 +12,8 @@ @import "./components/block-navigation/style.scss"; @import "./components/block-parent-selector/style.scss"; @import "./components/block-patterns-list/style.scss"; +@import "./components/block-patterns-paging/style.scss"; +@import "./components/block-patterns-sync-filter/style.scss"; @import "./components/block-popover/style.scss"; @import "./components/block-preview/style.scss"; @import "./components/block-settings-menu/style.scss";