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 2609cc2db97a1..0ca27c839ad71 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -23,7 +23,6 @@ import { Icon, symbol } from '@wordpress/icons';
*/
import BlockPreview from '../block-preview';
import InserterDraggableBlocks from '../inserter-draggable-blocks';
-import BlockPatternsPaging from '../block-patterns-paging';
import { INSERTER_PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
const WithToolTip = ( { showTooltip, title, children } ) => {
@@ -177,17 +176,10 @@ function BlockPattern( {
);
}
-function BlockPatternPlaceholder() {
- return (
-
- );
-}
-
function BlockPatternsList(
{
isDraggable,
blockPatterns,
- shownPatterns,
onHover,
onClickPattern,
orientation,
@@ -195,7 +187,6 @@ function BlockPatternsList(
category,
showTitle = true,
showTitlesAsTooltip,
- pagingProps,
},
ref
) {
@@ -205,11 +196,9 @@ function BlockPatternsList(
// Reset the active composite item whenever the available patterns change,
// to make sure that Composite widget can receive focus correctly when its
// composite items change. The first composite item will receive focus.
- const firstCompositeItemId = blockPatterns.find( ( pattern ) =>
- shownPatterns.includes( pattern )
- )?.name;
+ const firstCompositeItemId = blockPatterns[ 0 ]?.name;
setActiveCompositeId( firstCompositeItemId );
- }, [ shownPatterns, blockPatterns ] );
+ }, [ blockPatterns ] );
return (
{ blockPatterns.map( ( pattern ) => {
- const isShown = shownPatterns.includes( pattern );
- return isShown ? (
+ return (
- ) : (
-
);
} ) }
- { pagingProps && }
);
}
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
index 709e005b587ce..296b432bd685c 100644
--- a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
+++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js
@@ -151,9 +151,6 @@ function PatternList( {
{ hasItems && (
<>
+ { pagingProps && (
+
+
+
+ ) }
>
) }
>
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
index 931796acceeb0..cdffef4a00513 100644
--- a/packages/block-editor/src/components/inserter/hooks/use-patterns-paging.js
+++ b/packages/block-editor/src/components/inserter/hooks/use-patterns-paging.js
@@ -2,11 +2,10 @@
* WordPress dependencies
*/
import { useMemo, useState, useEffect } from '@wordpress/element';
-import { useAsyncList, usePrevious } from '@wordpress/compose';
+import { usePrevious } from '@wordpress/compose';
import { getScrollContainer } from '@wordpress/dom';
const PAGE_SIZE = 20;
-const INITIAL_INSERTER_RESULTS = 5;
/**
* Supplies values needed to page the patterns list client side.
@@ -42,9 +41,6 @@ export default function usePatternsPaging(
pageIndex * PAGE_SIZE + PAGE_SIZE
);
}, [ pageIndex, currentCategoryPatterns ] );
- const categoryPatternsAsyncList = useAsyncList( categoryPatterns, {
- step: INITIAL_INSERTER_RESULTS,
- } );
const numPages = Math.ceil( currentCategoryPatterns.length / PAGE_SIZE );
const changePage = ( page ) => {
const scrollContainer = getScrollContainer(
@@ -68,7 +64,6 @@ export default function usePatternsPaging(
return {
totalItems,
categoryPatterns,
- categoryPatternsAsyncList,
numPages,
changePage,
currentPage,
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 9e727b1379524..fd9f54bad6633 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -249,7 +249,8 @@ $block-inserter-tabs-height: 44px;
}
}
-.block-editor-inserter__patterns-category-panel-header {
+.block-editor-inserter__patterns-category-panel-header,
+.block-editor-inserter__patterns-category-panel-footer {
padding: $grid-unit-10 0;
@include break-medium {
padding: $grid-unit-10 $grid-unit-30;