Add my patterns toggle

WordPress · Sep 3, 2023 · a098a7b · a098a7b
1 parent 9be8084
commit a098a7b
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 23 deletions.
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
@@ -18,6 +18,7 @@ import InserterListbox from '../../inserter-listbox';
 import { searchItems } from '../search-items';
 import BlockPatternsPaging from '../../block-patterns-paging';
 import usePatternsPaging from '../hooks/use-patterns-paging';
+import { allPatternsCategory } from '../block-patterns-tab';
 
 function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 	if ( ! filterValue ) {
@@ -63,17 +64,20 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 
 	const filteredBlockPatterns = useMemo( () => {
 		if ( ! filterValue ) {
-			return allPatterns.filter( ( pattern ) =>
-				selectedCategory === 'uncategorized'
+			return allPatterns.filter( ( pattern ) => {
+				if ( selectedCategory === allPatternsCategory.name ) {
+					return true;
+				}
+				return selectedCategory === 'uncategorized'
 					? ! pattern.categories?.length ||
-					  pattern.categories.every(
-							( category ) =>
-								! registeredPatternCategories.includes(
-									category
-								)
-					  )
-					: pattern.categories?.includes( selectedCategory )
-			);
+							pattern.categories.every(
+								( category ) =>
+									! registeredPatternCategories.includes(
+										category
+									)
+							)
+					: pattern.categories?.includes( selectedCategory );
+			} );
 		}
 		return searchItems( allPatterns, filterValue );
 	}, [
@@ -99,7 +103,8 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 
 	const {
 		totalItems,
-		categoryPatternsList,
+		categoryPatterns,
+		categoryPatternsAsyncList,
 		numPages,
 		changePage,
 		currentPage,
@@ -121,8 +126,8 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 				{ ! hasItems && <InserterNoResults /> }
 				{ hasItems && (
 					<BlockPatternsList
-						shownPatterns={ categoryPatternsList }
-						blockPatterns={ filteredBlockPatterns }
+						shownPatterns={ categoryPatternsAsyncList }
+						blockPatterns={ categoryPatterns }
 						onClickPattern={ onClickPattern }
 						isDraggable={ false }
 					/>

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js
@@ -16,6 +16,8 @@ import {
 	__experimentalHStack as HStack,
 	FlexBlock,
 	Button,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 import { focus } from '@wordpress/dom';
@@ -45,6 +47,20 @@ const patternCategoriesOrder = [
 	'footer',
 ];
 
+export const allPatternsCategory = {
+	name: 'allPatterns',
+	label: __( 'All patterns' ),
+};
+export const SYNC_TYPES = {
+	full: 'fully',
+	unsynced: 'unsynced',
+};
+const SYNC_FILTERS = {
+	all: __( 'All' ),
+	[ SYNC_TYPES.full ]: __( 'My synced' ),
+	[ SYNC_TYPES.unsynced ]: __( 'My standard' ),
+};
+
 function usePatternsCategories( rootClientId ) {
 	const { patterns: allPatterns, allCategories } = usePatternsState(
 		undefined,
@@ -95,6 +111,12 @@ function usePatternsCategories( rootClientId ) {
 				label: _x( 'Uncategorized' ),
 			} );
 		}
+		if ( allPatterns.length > 0 ) {
+			categories.unshift( {
+				name: allPatternsCategory.name,
+				label: allPatternsCategory.label,
+			} );
+		}
 
 		return categories;
 	}, [ allCategories, allPatterns, hasRegisteredCategory ] );
@@ -146,11 +168,18 @@ export function BlockPatternsCategoryPanel( {
 		onInsert,
 		rootClientId
 	);
-
+	const [ syncFilter, setSyncFilter ] = useState( 'all' );
+	const updateSyncFilter = ( value ) => {
+		//setCurrentPage( 1 );
+		setSyncFilter( value );
+	};
 	const availableCategories = usePatternsCategories( rootClientId );
 	const currentCategoryPatterns = useMemo(
 		() =>
 			allPatterns.filter( ( pattern ) => {
+				if ( category.name === allPatternsCategory.name ) {
+					return true;
+				}
 				if ( category.name !== 'uncategorized' ) {
 					return pattern.categories?.includes( category.name );
 				}
@@ -172,7 +201,8 @@ export function BlockPatternsCategoryPanel( {
 
 	const {
 		totalItems,
-		categoryPatternsList,
+		categoryPatterns,
+		categoryPatternsAsyncList,
 		numPages,
 		changePage,
 		currentPage,
@@ -194,9 +224,31 @@ export function BlockPatternsCategoryPanel( {
 				{ category.label }
 			</div>
 			<p>{ category.description }</p>
+			{ category.name === allPatternsCategory.name && (
+				<ToggleGroupControl
+					className="edit-site-patterns__sync-status-filter"
+					hideLabelFromVision
+					label={ __( 'Filter by sync status' ) }
+					value={ syncFilter }
+					isBlock
+					onChange={ ( value ) => updateSyncFilter( value ) }
+					__nextHasNoMarginBottom
+				>
+					{ Object.entries( SYNC_FILTERS ).map(
+						( [ key, label ] ) => (
+							<ToggleGroupControlOption
+								className="edit-site-patterns__sync-status-filter-option"
+								key={ key }
+								value={ key }
+								label={ label }
+							/>
+						)
+					) }
+				</ToggleGroupControl>
+			) }
 			<BlockPatternList
-				shownPatterns={ categoryPatternsList }
-				blockPatterns={ currentCategoryPatterns }
+				shownPatterns={ categoryPatternsAsyncList }
+				blockPatterns={ categoryPatterns }
 				onClickPattern={ onClickPattern }
 				onHover={ onHover }
 				label={ category.label }

diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-paging.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-paging.js
@@ -6,12 +6,12 @@ import { useMemo, useState } from '@wordpress/element';
 import { useAsyncList } from '@wordpress/compose';
 
 const PAGE_SIZE = 20;
-const INITIAL_INSERTER_RESULTS = 2;
+const INITIAL_INSERTER_RESULTS = 5;
 
 /**
  * Supplies values needed to page the patterns list client side.
  *
- * @param {Array}  currentCategoryPatterns An array of the current categories to display.
+ * @param {Array}  currentCategoryPatterns An array of the current patterns to display.
  * @param {string} scrollContainerClass    Class of container to scroll when moving between pages.
  *
  * @return {Object} Returns the relevant paging values. (totalItems, categoryPatternsList, numPages, changePage, currentPage)
@@ -23,13 +23,13 @@ export default function usePatternsPaging(
 	const [ currentPage, setCurrentPage ] = useState( 1 );
 	const totalItems = currentCategoryPatterns.length;
 	const pageIndex = currentPage - 1;
-	const list = useMemo( () => {
+	const categoryPatterns = useMemo( () => {
 		return currentCategoryPatterns.slice(
 			pageIndex * PAGE_SIZE,
 			pageIndex * PAGE_SIZE + PAGE_SIZE
 		);
 	}, [ pageIndex, currentCategoryPatterns ] );
-	const categoryPatternsList = useAsyncList( list, {
+	const categoryPatternsAsyncList = useAsyncList( categoryPatterns, {
 		step: INITIAL_INSERTER_RESULTS,
 	} );
 	const numPages = Math.ceil( currentCategoryPatterns.length / PAGE_SIZE );
@@ -41,7 +41,8 @@ export default function usePatternsPaging(
 	};
 	return {
 		totalItems,
-		categoryPatternsList,
+		categoryPatterns,
+		categoryPatternsAsyncList,
 		numPages,
 		changePage,
 		currentPage,

diff --git a/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js b/packages/block-editor/src/components/inserter/hooks/use-patterns-state.js
@@ -58,7 +58,7 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 	const onClickPattern = useCallback(
 		( pattern, blocks ) => {
 			const patternBlocks =
-				pattern.syncStatus !== 'unsynced'
+				pattern.id && pattern.syncStatus !== 'unsynced'
 					? [ createBlock( 'core/block', { ref: pattern.id } ) ]
 					: blocks;
 			onInsert(