Always show the total number of patterns even with only one page (#54813

) * Always show the total number of patterns even with only one page * Add to explorer too * Hide total number of 0
WordPress · Sep 26, 2023 · 121a52b · 121a52b
1 parent 948d0fc
commit 121a52b
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 66 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
@@ -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
@@ -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>
 	);
 }
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
@@ -135,15 +135,17 @@ function PatternList( { searchValue, selectedCategory, patternCategories } ) {
 
 			<InserterListbox>
 				{ hasItems && (
-					<BlockPatternsList
-						shownPatterns={ pagingProps.categoryPatternsAsyncList }
-						blockPatterns={ pagingProps.categoryPatterns }
-						onClickPattern={ onClickPattern }
-						isDraggable={ false }
-					/>
-				) }
-				{ pagingProps.numPages > 1 && (
-					<BlockPatternsPaging { ...pagingProps } />
+					<>
+						<BlockPatternsList
+							shownPatterns={
+								pagingProps.categoryPatternsAsyncList
+							}
+							blockPatterns={ pagingProps.categoryPatterns }
+							onClickPattern={ onClickPattern }
+							isDraggable={ false }
+						/>
+						<BlockPatternsPaging { ...pagingProps } />
+					</>
 				) }
 			</InserterListbox>
 		</div>

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