From 6186e979236f7de152bad41329c3b49edb537cfb Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Tue, 26 Sep 2023 11:59:10 +0800
Subject: [PATCH 1/3] Always show the total number of patterns even with only
 one page

---
 .../components/block-patterns-list/index.js   |   4 +-
 .../components/block-patterns-paging/index.js | 111 +++++++++---------
 2 files changed, 58 insertions(+), 57 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
index 9ab7bbaf0bb44..bebeb1f44184c 100644
--- a/packages/block-editor/src/components/block-patterns-list/index.js
+++ b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -180,9 +180,7 @@ function BlockPatternList(
 					<BlockPatternPlaceholder key={ pattern.name } />
 				);
 			} ) }
-			{ pagingProps && pagingProps.numPages > 1 && (
-				<BlockPatternsPaging { ...pagingProps } />
-			) }
+			{ pagingProps && <BlockPatternsPaging { ...pagingProps } /> }
 		</Composite>
 	);
 }
diff --git a/packages/block-editor/src/components/block-patterns-paging/index.js b/packages/block-editor/src/components/block-patterns-paging/index.js
index 8900ac3808262..76f99e24bf244 100644
--- a/packages/block-editor/src/components/block-patterns-paging/index.js
+++ b/packages/block-editor/src/components/block-patterns-paging/index.js
@@ -27,66 +27,69 @@ export default function Pagination( {
 					)
 				}
 			</Text>
-			<HStack
-				expanded={ false }
-				spacing={ 3 }
-				justify="flex-start"
-				className="block-editor-patterns__grid-pagination"
-			>
-				<HStack
-					expanded={ false }
-					spacing={ 1 }
-					className="block-editor-patterns__grid-pagination-previous"
-				>
-					<Button
-						variant="tertiary"
-						onClick={ () => changePage( 1 ) }
-						disabled={ currentPage === 1 }
-						aria-label={ __( 'First page' ) }
-					>
-						<span>«</span>
-					</Button>
-					<Button
-						variant="tertiary"
-						onClick={ () => changePage( currentPage - 1 ) }
-						disabled={ currentPage === 1 }
-						aria-label={ __( 'Previous page' ) }
-					>
-						<span>‹</span>
-					</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>
+
+			{ numPages > 1 && (
 				<HStack
 					expanded={ false }
-					spacing={ 1 }
-					className="block-editor-patterns__grid-pagination-next"
+					spacing={ 3 }
+					justify="flex-start"
+					className="block-editor-patterns__grid-pagination"
 				>
-					<Button
-						variant="tertiary"
-						onClick={ () => changePage( currentPage + 1 ) }
-						disabled={ currentPage === numPages }
-						aria-label={ __( 'Next page' ) }
+					<HStack
+						expanded={ false }
+						spacing={ 1 }
+						className="block-editor-patterns__grid-pagination-previous"
 					>
-						<span>›</span>
-					</Button>
-					<Button
-						variant="tertiary"
-						onClick={ () => changePage( numPages ) }
-						disabled={ currentPage === numPages }
-						aria-label={ __( 'Last page' ) }
-						size="default"
+						<Button
+							variant="tertiary"
+							onClick={ () => changePage( 1 ) }
+							disabled={ currentPage === 1 }
+							aria-label={ __( 'First page' ) }
+						>
+							<span>«</span>
+						</Button>
+						<Button
+							variant="tertiary"
+							onClick={ () => changePage( currentPage - 1 ) }
+							disabled={ currentPage === 1 }
+							aria-label={ __( 'Previous page' ) }
+						>
+							<span>‹</span>
+						</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 }
+						className="block-editor-patterns__grid-pagination-next"
 					>
-						<span>»</span>
-					</Button>
+						<Button
+							variant="tertiary"
+							onClick={ () => changePage( currentPage + 1 ) }
+							disabled={ currentPage === numPages }
+							aria-label={ __( 'Next page' ) }
+						>
+							<span>›</span>
+						</Button>
+						<Button
+							variant="tertiary"
+							onClick={ () => changePage( numPages ) }
+							disabled={ currentPage === numPages }
+							aria-label={ __( 'Last page' ) }
+							size="default"
+						>
+							<span>»</span>
+						</Button>
+					</HStack>
 				</HStack>
-			</HStack>
+			) }
 		</VStack>
 	);
 }

From 4fd92beb7f4b7b2763a2a259f4beafa94ff7bb3d Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Tue, 26 Sep 2023 12:04:58 +0800
Subject: [PATCH 2/3] Add to explorer too

---
 .../inserter/block-patterns-explorer/patterns-list.js         | 4 +---
 packages/block-editor/src/components/inserter/style.scss      | 1 +
 2 files changed, 2 insertions(+), 3 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
index fcb9a1980db99..8ae62ee7b976b 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
@@ -142,9 +142,7 @@ function PatternList( { searchValue, selectedCategory, patternCategories } ) {
 						isDraggable={ false }
 					/>
 				) }
-				{ pagingProps.numPages > 1 && (
-					<BlockPatternsPaging { ...pagingProps } />
-				) }
+				<BlockPatternsPaging { ...pagingProps } />
 			</InserterListbox>
 		</div>
 	);
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 2528139e8f30f..418990bfaf671 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -480,6 +480,7 @@ $block-inserter-tabs-height: 44px;
 		display: grid;
 		grid-gap: $grid-unit-40;
 		grid-template-columns: repeat(1, 1fr);
+		margin-bottom: $grid-unit-20;
 
 		@include break-xlarge() {
 			grid-template-columns: repeat(2, 1fr);

From 7e6e0b2f19ecc09fccaa5ff0dec95565184089c6 Mon Sep 17 00:00:00 2001
From: Kai Hao <kai@kaihao.dev>
Date: Tue, 26 Sep 2023 12:14:51 +0800
Subject: [PATCH 3/3] Hide total number of 0

---
 .../block-patterns-explorer/patterns-list.js   | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 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
index 8ae62ee7b976b..e34816393c8d3 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
@@ -135,14 +135,18 @@ function PatternList( { searchValue, selectedCategory, patternCategories } ) {
 
 			<InserterListbox>
 				{ hasItems && (
-					<BlockPatternsList
-						shownPatterns={ pagingProps.categoryPatternsAsyncList }
-						blockPatterns={ pagingProps.categoryPatterns }
-						onClickPattern={ onClickPattern }
-						isDraggable={ false }
-					/>
+					<>
+						<BlockPatternsList
+							shownPatterns={
+								pagingProps.categoryPatternsAsyncList
+							}
+							blockPatterns={ pagingProps.categoryPatterns }
+							onClickPattern={ onClickPattern }
+							isDraggable={ false }
+						/>
+						<BlockPatternsPaging { ...pagingProps } />
+					</>
 				) }
-				<BlockPatternsPaging { ...pagingProps } />
 			</InserterListbox>
 		</div>
 	);