[WIP] Patterns: merge the inserter synced patterns tab into the patterns tab

packages/block-editor/src/components/block-patterns-list/index.js

@@ -11,6 +11,7 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { Icon, symbolFilled } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -101,6 +102,21 @@ function BlockPattern( {
 									{ pattern.description }
 								</VisuallyHidden>
 							) }
+							{ pattern.id && ! pattern.syncStatus && (
+								<Tooltip
+									position="top center"
+									text={ __(
+										'Editing this pattern will also update anywhere it is used'
+									) }
+								>
+									<span>
+										<Icon
+											className="block-editor-patterns__pattern-icon"
+											icon={ symbolFilled }
+										/>
+									</span>
+								</Tooltip>
+							) }
 						</CompositeItem>
 					</WithToolTip>
 				</div>

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;
+	}
 }

packages/block-editor/src/components/block-patterns-paging/index.js

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__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 (
+		<VStack>
+			<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={ 3 }
+				justify="flex-start"
+				className="block-editor-patterns__grid-pagination"
+			>
+				<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>
+		</VStack>
+	);
+}

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;
+		}
+	}
+}

packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js

@@ -3,7 +3,7 @@
  */
 import { useMemo, useEffect } from '@wordpress/element';
 import { _n, sprintf } from '@wordpress/i18n';
-import { useDebounce, useAsyncList } from '@wordpress/compose';
+import { useDebounce } from '@wordpress/compose';
 import { __experimentalHeading as Heading } from '@wordpress/components';
 import { speak } from '@wordpress/a11y';
 
@@ -16,8 +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';
-
-const INITIAL_INSERTER_RESULTS = 2;
+import BlockPatternsPaging from '../../block-patterns-paging';
+import usePatternsPaging from '../hooks/use-patterns-paging';
 
 function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 	if ( ! filterValue ) {
@@ -97,9 +97,16 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 		debouncedSpeak( resultsFoundMessage );
 	}, [ filterValue, debouncedSpeak, filteredBlockPatterns.length ] );
 
-	const currentShownPatterns = useAsyncList( filteredBlockPatterns, {
-		step: INITIAL_INSERTER_RESULTS,
-	} );
+	const {
+		totalItems,
+		categoryPatternsList,
+		numPages,
+		changePage,
+		currentPage,
+	} = usePatternsPaging(
+		filteredBlockPatterns,
+		'.components-modal__content.is-scrollable'
+	);
 
 	const hasItems = !! filteredBlockPatterns?.length;
 	return (
@@ -114,12 +121,20 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 				{ ! hasItems && <InserterNoResults /> }
 				{ hasItems && (
 					<BlockPatternsList
-						shownPatterns={ currentShownPatterns }
+						shownPatterns={ categoryPatternsList }
 						blockPatterns={ filteredBlockPatterns }
 						onClickPattern={ onSelectBlockPattern }
 						isDraggable={ false }
 					/>
 				) }
+				{ numPages > 1 && (
+					<BlockPatternsPaging
+						currentPage={ currentPage }
+						numPages={ numPages }
+						changePage={ changePage }
+						totalItems={ totalItems }
+					/>
+				) }
 			</InserterListbox>
 		</div>
 	);

packages/block-editor/src/components/inserter/block-patterns-tab.js

@@ -9,7 +9,7 @@ import {
 	useEffect,
 } from '@wordpress/element';
 import { _x, __, isRTL } from '@wordpress/i18n';
-import { useAsyncList, useViewportMatch } from '@wordpress/compose';
+import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
@@ -27,6 +27,8 @@ 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';
+import usePatternsPaging from './hooks/use-patterns-paging';
 
 const noop = () => {};
 
@@ -145,7 +147,6 @@ export function BlockPatternsCategoryPanel( {
 		onInsert,
 		rootClientId
 	);
-
 	const availableCategories = usePatternsCategories( rootClientId );
 	const currentCategoryPatterns = useMemo(
 		() =>
@@ -169,11 +170,21 @@ export function BlockPatternsCategoryPanel( {
 		[ allPatterns, availableCategories, category.name ]
 	);
 
-	const categoryPatternsList = useAsyncList( currentCategoryPatterns );
-
 	// Hide block pattern preview on unmount.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => () => onHover( null ), [] );
 
+	const {
+		totalItems,
+		categoryPatternsList,
+		numPages,
+		changePage,
+		currentPage,
+	} = usePatternsPaging(
+		currentCategoryPatterns,
+		'.block-editor-inserter__patterns-category-dialog'
+	);
+
 	if ( ! currentCategoryPatterns.length ) {
 		return null;
 	}
@@ -191,10 +202,18 @@ export function BlockPatternsCategoryPanel( {
 				onHover={ onHover }
 				label={ category.label }
 				orientation="vertical"
-				category={ category.label }
+				category={ category.name }
 				isDraggable
 				showTitlesAsTooltip={ showTitlesAsTooltip }
 			/>
+			{ numPages > 1 && (
+				<BlockPatternsPaging
+					currentPage={ currentPage }
+					numPages={ numPages }
+					changePage={ changePage }
+					totalItems={ totalItems }
+				/>
+			) }
 		</div>
 	);
 }

packages/block-editor/src/components/inserter/hooks/use-patterns-paging.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState } from '@wordpress/element';
+
+import { useAsyncList } from '@wordpress/compose';
+
+const PAGE_SIZE = 20;
+const INITIAL_INSERTER_RESULTS = 2;
+
+/**
+ * Supplies values needed to page the patterns list client side.
+ *
+ * @param {Array}  currentCategoryPatterns An array of the current categories 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)
+ */
+export default function usePatternsPaging(
+	currentCategoryPatterns,
+	scrollContainerClass
+) {
+	const [ currentPage, setCurrentPage ] = useState( 1 );
+	const totalItems = currentCategoryPatterns.length;
+	const pageIndex = currentPage - 1;
+	const list = useMemo( () => {
+		return currentCategoryPatterns.slice(
+			pageIndex * PAGE_SIZE,
+			pageIndex * PAGE_SIZE + PAGE_SIZE
+		);
+	}, [ pageIndex, currentCategoryPatterns ] );
+	const categoryPatternsList = useAsyncList( list, {
+		step: INITIAL_INSERTER_RESULTS,
+	} );
+	const numPages = Math.ceil( currentCategoryPatterns.length / PAGE_SIZE );
+	const changePage = ( page ) => {
+		const scrollContainer = document.querySelector( scrollContainerClass );
+		scrollContainer?.scrollTo( 0, 0 );
+
+		setCurrentPage( page );
+	};
+	return {
+		totalItems,
+		categoryPatternsList,
+		numPages,
+		changePage,
+		currentPage,
+	};
+}

packages/block-editor/src/components/inserter/hooks/use-patterns-state.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useCallback, useMemo } from '@wordpress/element';
-import { cloneBlock } from '@wordpress/blocks';
+import { cloneBlock, createBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -49,8 +49,13 @@ const usePatternsState = ( onInsert, rootClientId ) => {
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const onClickPattern = useCallback(
 		( pattern, blocks ) => {
+			const patternBlocks =
+				pattern.syncStatus !== 'unsynced'
+					? [ createBlock( 'core/block', { ref: pattern.id } ) ]
+					: blocks;
+
 			onInsert(
-				( blocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
+				( patternBlocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
 				pattern.name
 			);
 			createSuccessNotice(

packages/block-editor/src/components/inserter/menu.js

@@ -27,7 +27,6 @@ import BlockTypesTab from './block-types-tab';
 import BlockPatternsTabs, {
 	BlockPatternsCategoryDialog,
 } from './block-patterns-tab';
-import ReusableBlocksTab from './reusable-blocks-tab';
 import { MediaTab, MediaCategoryDialog, useMediaCategories } from './media-tab';
 import InserterSearchResults from './search-results';
 import useDebouncedInput from './hooks/use-debounced-input';
@@ -174,17 +173,6 @@ function InserterMenu(
 		]
 	);
 
-	const reusableBlocksTab = useMemo(
-		() => (
-			<ReusableBlocksTab
-				rootClientId={ destinationRootClientId }
-				onInsert={ onInsert }
-				onHover={ onHover }
-			/>
-		),
-		[ destinationRootClientId, onInsert, onHover ]
-	);
-
 	const mediaTab = useMemo(
 		() => (
 			<MediaTab
@@ -208,13 +196,11 @@ function InserterMenu(
 				return blocksTab;
 			} else if ( tab.name === 'patterns' ) {
 				return patternsTab;
-			} else if ( tab.name === 'reusable' ) {
-				return reusableBlocksTab;
 			} else if ( tab.name === 'media' ) {
 				return mediaTab;
 			}
 		},
-		[ blocksTab, patternsTab, reusableBlocksTab, mediaTab ]
+		[ blocksTab, patternsTab, mediaTab ]
 	);
 
 	const searchRef = useRef();