very rough addition of filter and paging in order to get designs

WordPress · Aug 28, 2023 · 99ab8d2 · 99ab8d2
1 parent 30b834e
commit 99ab8d2
Show file tree

Hide file tree

Showing 9 changed files with 185 additions and 34 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
@@ -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 <Tooltip text={ title }>{ children }</Tooltip>;
@@ -121,7 +112,7 @@ function BlockPattern( {
 								>
 									<span>
 										<Icon
-											className="edit-site-patterns__pattern-icon"
+											className="block-editor-patterns__pattern-icon"
 											icon={ symbolFilled }
 										/>
 									</span>
@@ -162,26 +153,10 @@ function BlockPatternList( {
 			aria-label={ label }
 		>
 			{ category === 'custom' && (
-				<ToggleGroupControl
-					className="edit-site-patterns__sync-status-filter"
-					hideLabelFromVision
-					label={ __( 'Filter by sync status' ) }
-					value={ syncFilter }
-					isBlock
-					onChange={ ( value ) => setSyncFilter( value ) }
-					__nextHasNoMarginBottom
-				>
-					{ Object.entries( SYNC_FILTERS ).map(
-						( [ key, optionLabel ] ) => (
-							<ToggleGroupControlOption
-								className="edit-site-patterns__sync-status-filter-option"
-								key={ key }
-								value={ key }
-								label={ optionLabel }
-							/>
-						)
-					) }
-				</ToggleGroupControl>
+				<BlockPatternsSyncFilter
+					syncFilter={ syncFilter }
+					setSyncFilter={ setSyncFilter }
+				/>
 			) }
 			{ 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
@@ -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
@@ -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 (
+		<HStack
+			expanded={ false }
+			spacing={ 3 }
+			justify="flex-start"
+			className="block-editor-patterns__grid-pagination"
+		>
+			<Text variant="muted">
+				{
+					// translators: %s: Total number of patterns.
+					sprintf(
+						// translators: %s: Total number of patterns.
+						_n( '%s item', '%s items', totalItems ),
+						totalItems
+					)
+				}
+			</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>
+			<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>
+	);
+}
diff --git a/packages/block-editor/src/components/block-patterns-paging/style.scss 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
@@ -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 (
+		<ToggleGroupControl
+			className="block-editor-patterns__sync-status-filter"
+			hideLabelFromVision
+			label={ __( 'Filter by sync status' ) }
+			value={ syncFilter }
+			isBlock
+			onChange={ ( value ) => setSyncFilter( value ) }
+			__nextHasNoMarginBottom
+		>
+			{ Object.entries( SYNC_FILTERS ).map( ( [ key, optionLabel ] ) => (
+				<ToggleGroupControlOption
+					className="block-editor-patterns__sync-status-filter-option"
+					key={ key }
+					value={ key }
+					label={ optionLabel }
+				/>
+			) ) }
+		</ToggleGroupControl>
+	);
+}
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
@@ -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
@@ -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 } ) {
 			) }
 			<InserterListbox>
 				{ ! hasItems && <InserterNoResults /> }
+				{ selectedCategory === 'custom' && (
+					<BlockPatternsSyncFilter
+						syncFilter={ syncFilter }
+						setSyncFilter={ setSyncFilter }
+					/>
+				) }
 				{ hasItems && (
 					<BlockPatternsList
 						shownPatterns={ currentShownPatterns }
@@ -120,6 +129,12 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 						isDraggable={ false }
 					/>
 				) }
+				<BlockPatternsPaging
+					currentPage={ 1 }
+					numPages={ 2 }
+					changePage={ () => {} }
+					totalItems={ 40 }
+				/>
 			</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
@@ -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 }
 			/>
+			<BlockPatternsPaging
+				currentPage={ 1 }
+				numPages={ 2 }
+				changePage={ () => {} }
+				totalItems={ 40 }
+			/>
 		</div>
 	);
 }

diff --git 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";