Global styles revisions: add pagination

[ramonjd]

What problem does this address?

Pagination capability was added to the Global styles revisions endpoint in #52095

At the moment the maximum amount of Global styles revisions we display in the site editor UI is 100.

It's conceivable that sites will have more than this, and therefore would find pagination helpful.

What is your proposed solution?

• Utilize pagination parameters in the global styles revisions rest endpoint to display n amount of global styles revisions in the UI.
• Add pagination controls to the UI.

[allisonplus]

It'd be great to see pagination options be fully expanded (see screenshot) to include Prev/Next as well as total number of pages included so user knows total results.

[apeatling]

Had a crack at the start of a design for this. Seems logical that this would be the general direction based on other pagination. There isn't enough space for the total number of items, this could perhaps go up in the top to the right of the "Revisions" title.

[ramonjd]

Thanks for the help on direction folks. The first task I believe is to ensure that the core data store can handle and manage the incoming revision entities and related pagination queries. I'm going to take a look at this.

[jasmussen]

A couple of more options:

Notably I think we can be a bit more compact with the use of space, by using borderless buttons, by skipping the first-page/last-page buttons, and by disabling the left button on the first page, etc.

I'd also start simple, I'm not quite sure how many pages of revisions we can expect here, but if we end up with hundreds of pages we should probably still skip the first-page/last-page buttons in favor of the ... system. What do you think?

[ramonjd]

we should probably still skip the first-page/last-page buttons in favor of the ... system. What do you think?

Sounds good to me. We could have a threshold, e.g., when the pages hit n we switch to ... 👍🏻

[jasmussen]

Yep, it can be tweaked to what fits. E.g. at most 5 items between the ellipses:

• 1 2 3 ... 49
• 1 ... 47 48 49
• 32 33 ... 48 49

[apeatling]

Looks good, and makes sense to start simple with it. 👍

[ramonjd]

Conversation about state and how to fetch post type revisions going on over in:

• Revisions: add new selectors to fetch entity revisions #54046

[ramonjd]

Update

Getting closer to finalizing the core data API in #54046, which will enable this feature.

I might build the UI on top of that PR to demonstrate the designs. Cheers!

[ramonjd]

The underlying API works fine 👍🏻

2023-10-11.17.28.35.mp4

Slight speed bump: we're adding 2 x extra revision items on the frontend: an "unsaved" state at the start of the revisions array, and a "default theme" state at the end. This means we'll have to take these into account when building pages from the API response, and recalculate the offsets 🤔

[apeatling]

@pablohoneyhoney @mtias You'd talked about now wanting to use numbers in the pagination for style revisions. Should we move forward with a "Load More" style pagination for this?

[ramonjd]

I know it's not all about me 🤣 but the "Load more" approach would effectively side-step the pagination recalculation mania I came up against in testing.

[ramonjd]

You'd talked about now wanting to use numbers in the pagination for style revisions. Should we move forward with a "Load More" style pagination for this?

One argument for pagination is if users want to go to the start of history, and they have many revisions, they can immediately. Users may need to click multiple times to get to older content with a "Load more" button.

We "could" offer both, i.e., a component that lets the user choose between "Load more" and "Pagination" and "X" view/filter. Maybe I'm saying this because I've just been playing with dataviews. 😄

Or, if we go with pagination initially, a dropdown menu to choose the number of items to display per page.

[ramonjd]

Have a WIP idea going on in:

• Global styles revisions: add pagination  #56799

2023-12-07.19.02.33.mp4

[ramonjd]

Latest from #56799

2023-12-14.19.22.51.mp4

[ramonjd]

Another version

@apeatling with the Apply button inline now:

2023-12-15.11.30.33.mp4