DataViews: `perPageSizes` tweaks #71004

oandregal · 2025-07-31T15:58:09Z

Follow-up to #70604.

What?

Consider the empty case: if an empty array is passed, the page size control is not rendered.
Do not limit page sizes to 4 exact values.
Storybook: remove the CustomPerPageSizes story and add an argument to the Default story

Screen.Recording.2025-07-31.at.17.58.49.mov

Testing Instructions

Open the storybook and verify you can modify the sizes and the control respond to the changes. Check the empty case works.

npm install && npm storybook:dev

github-actions · 2025-07-31T15:58:18Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: arthur791004 <arthur791004@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

oandregal · 2025-07-31T16:02:27Z

packages/dataviews/src/components/dataviews-view-config/index.tsx

 function ItemsPerPageControl() {
 	const { view, perPageSizes, onChangeView } = useContext( DataViewsContext );
-	const pageSizeValues = perPageSizes ?? PAGE_SIZE_VALUES;
+	if ( perPageSizes.length === 0 ) {


This covers the empty case. Otherwise, we'd have something like this when you pass an empty array:

I think it could even be if ( perPageSizes.length < 2 ) { . If there's only one option it should already be set and the user wouldn't be able to change it. Offering a toggle button like that might be confusing.

oandregal · 2025-07-31T16:02:46Z

packages/dataviews/src/components/dataviews-context/index.ts

@@ -54,7 +54,7 @@ type DataViewsContextType< Item > = {
 	filters: NormalizedFilter[];
 	isShowingFilter: boolean;
 	setIsShowingFilter: ( value: boolean ) => void;
-	perPageSizes?: [ number, number, number, number ];
+	perPageSizes: number[];


Why did we limit the page sizes to 4 in #70604? Can't it be 3 or 5? This change moves that decision to the consumer level.

The component might get a bit crammed with a lot of options, but 3 or 5 seems alright. The component could also adapt to a dropdown when there are lots of options.

A min/max might make more sense.

BTW, there's also some docs here to update - https://github.com/WordPress/gutenberg/tree/trunk/packages/dataviews#perpagesizes--number-number-number-number-

My thought was to align with the existing design. I don't think a randomly generated number set would fit well with the current design. That said, I do agree with using min/max values

I tested adding lots of options in the storybook:

That's definitely a bit of a stretch and I'm not sure many people would actually add that many options. 6 items feels like a good max, you can easily fit three digit numbers without it looking too busy:

I've capped it to 2-6, otherwise the control is not displayed 👍

talldan

Left a couple of very minor comments, but change generally looks good. Changelog entry also needed.

Tests might also be good, but could have been part of the initial PR.

talldan · 2025-08-01T04:20:49Z

packages/dataviews/src/components/dataviews-context/index.ts

@@ -54,7 +54,7 @@ type DataViewsContextType< Item > = {
 	filters: NormalizedFilter[];
 	isShowingFilter: boolean;
 	setIsShowingFilter: ( value: boolean ) => void;
-	perPageSizes?: [ number, number, number, number ];
+	perPageSizes: number[];


The component might get a bit crammed with a lot of options, but 3 or 5 seems alright. The component could also adapt to a dropdown when there are lots of options.

A min/max might make more sense.

BTW, there's also some docs here to update - https://github.com/WordPress/gutenberg/tree/trunk/packages/dataviews#perpagesizes--number-number-number-number-

talldan · 2025-08-01T04:22:16Z

packages/dataviews/src/components/dataviews-view-config/index.tsx

 function ItemsPerPageControl() {
 	const { view, perPageSizes, onChangeView } = useContext( DataViewsContext );
-	const pageSizeValues = perPageSizes ?? PAGE_SIZE_VALUES;
+	if ( perPageSizes.length === 0 ) {


I think it could even be if ( perPageSizes.length < 2 ) { . If there's only one option it should already be set and the user wouldn't be able to change it. Offering a toggle button like that might be confusing.

oandregal added 3 commits July 31, 2025 17:44

Update perPageSizes type to be an number[]

baab631

Remove custom story and add argument to the Default

e18be08

Consider the empty case

86ed8f7

oandregal commented Jul 31, 2025

View reviewed changes

oandregal self-assigned this Jul 31, 2025

oandregal added [Type] Enhancement A suggestion for improvement. [Feature] DataViews Work surrounding upgrading and evolving views in the site editor and beyond labels Jul 31, 2025

oandregal requested review from arthur791004 and youknowriad July 31, 2025 16:03

oandregal mentioned this pull request Jul 31, 2025

DataViews: Introduce perPageSizes to control the available sizes of the items per page #70604

Merged

talldan approved these changes Aug 1, 2025

View reviewed changes

oandregal added 3 commits August 1, 2025 10:09

Do not display the toggle if there are less than 2 options

b5d785e

Cap to 6 numbers max

f0c3ab4

Changelog

c215591

oandregal merged commit 3c59022 into trunk Aug 1, 2025
59 checks passed

oandregal deleted the update/per-page-sizes branch August 1, 2025 09:26

github-actions bot added this to the Gutenberg 21.4 milestone Aug 1, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

DataViews: `perPageSizes` tweaks #71004

DataViews: `perPageSizes` tweaks #71004

oandregal commented Jul 31, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jul 31, 2025 •

edited

Loading

Uh oh!

oandregal Jul 31, 2025

Uh oh!

talldan Aug 1, 2025

Uh oh!

oandregal Jul 31, 2025 •

edited

Loading

Uh oh!

talldan Aug 1, 2025

Uh oh!

arthur791004 Aug 1, 2025

Uh oh!

talldan Aug 1, 2025

Uh oh!

oandregal Aug 1, 2025

Uh oh!

talldan left a comment

Uh oh!

talldan Aug 1, 2025

Uh oh!

talldan Aug 1, 2025

Uh oh!

Uh oh!

Uh oh!

DataViews: perPageSizes tweaks #71004

DataViews: perPageSizes tweaks #71004

Conversation

oandregal commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Testing Instructions

Uh oh!

github-actions bot commented Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oandregal Jul 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

talldan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

DataViews: `perPageSizes` tweaks #71004

DataViews: `perPageSizes` tweaks #71004

oandregal commented Jul 31, 2025 •

edited

Loading

github-actions bot commented Jul 31, 2025 •

edited

Loading

oandregal Jul 31, 2025 •

edited

Loading