Improvements to dataviews infinite scroll#74378
Merged
tellthemachines merged 62 commits intotrunkfrom Mar 19, 2026
Merged
Conversation
tellthemachines
added
[Type] Enhancement
github-actions
bot
added
[Package] Media Utils
|
Size Change: +5.23 kB (+0.06%) Total Size: 8.76 MB
ℹ️ View Unchanged
|
tellthemachines
force-pushed
the
try/new-infinite-scroll-branch
branch
from
ca78674 to
6eb050a
Compare
|
Flaky tests detected in 4c0a653. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/23273449067
|
tellthemachines
commented
Jan 8, 2026
| /> | ||
| <> | ||
| { | ||
| // Render infinite scroll layout (no rows, feed semantics) |
Contributor
Author
There was a problem hiding this comment.
I had to remove the rows/grid semantic markup because they were interfering with the infinite scroll load/unload logic, which doesn't know (and shouldn't have to know) how many items are needed to fill a row.
tellthemachines
commented
Jan 8, 2026
| { !! activeLayout?.viewConfigOptions && ( | ||
| <activeLayout.viewConfigOptions /> | ||
| ) } | ||
| <InfiniteScrollToggle /> |
Contributor
Author
There was a problem hiding this comment.
I'm temporarily removing this until we have infinite scroll working well across all layouts, because otherwise it'll appear as an option all the time even where it doesn't work (see file below: previously we were using the presence of the infinite scroll handler as a check to enable the toggle, but removing the handler impedes this.
Member
There was a problem hiding this comment.
I see that we displayed this control if the user provided an infiniteScrollHandler via DataViews' paginationInfo prop. Some thoughts:
- It's okay to remove it and revisit it later, IMO
- We may need layouts to declare if they support infinite scroll. We have now ways for layouts to add additional controls (previewSize or density as examples), but we may want to introduce the concept of "supports", as in,
supports: [ 'infinite-scroll' ].
tellthemachines
commented
Jan 8, 2026
| empty, | ||
| }: DataViewsProps< Item > ) { | ||
| const { infiniteScrollHandler } = paginationInfo; | ||
| // Use infinite scroll hook internally when enabled |
Contributor
Author
There was a problem hiding this comment.
there's a lot of repetition between these changes and the picker ones which is probably ok for now?
tellthemachines
commented
Jan 8, 2026
| overflow: hidden; // Prevent cells with white backgrounds overflowing the card | ||
| } | ||
|
|
||
| .dataviews__view-actions--infinite-scroll { |
Contributor
Author
There was a problem hiding this comment.
this should probably be sticky all the time, not just when infinite scrolling
Contributor
There was a problem hiding this comment.
Oh, I'm glad you mentioned this — I noticed the other day that it felt a bit odd that these scroll out of view, so +1 from me to the idea of making the actions sticky all the time 👍
I'm not sure if the z-index needs to be higher, though? I think the checkbox is also z-index of 1 so it seems to poke through while scrolling:
tellthemachines
commented
Jan 8, 2026
| const end = view.endPosition; | ||
| filteredData = filteredData?.slice( start, end ); | ||
| } else if ( view.page !== undefined && view.perPage !== undefined ) { | ||
| // Use traditional page-based pagination |
Contributor
Author
There was a problem hiding this comment.
I added this change essentially for the benefit of the storybook instances because filterSortAndPaginate fully determines what data is shown there. I'm not sure if it'll ever be needed for actual DataViews instances unless it's a similar scenario where the full data is loaded upfront and we're relying on filterSortAndPaginate to do all the pagination work. Might there be a better way of doing this?
tellthemachines
commented
Jan 8, 2026
| page: 1, | ||
| perPage: 20, | ||
| filters: [], | ||
| infiniteScrollEnabled: true, |
Contributor
Author
There was a problem hiding this comment.
Currently this is enabling infinite scroll for both grid and table layouts, though only grid supports it so far. It might be a good idea to add support to the table layout before shipping this PR. Now added to table too.
The absence of the toggle in the view config still means users can't disable it if they need to, which might be a major accessibility issue, and that should be tackled before the media modal is moved out from behind the experiment flag.
Contributor
Author
|
Update: this is fixed now, needed to wrap ViewGrid in forwardRef. |
tellthemachines
force-pushed
the
try/new-infinite-scroll-branch
branch
from
64eabae to
4033979
Compare
Contributor
Author
|
Marking this ready for review as I think the code is now in a good place to be looked at! And the feature can really use some testing. |
tellthemachines
requested review from
gigitux,
ntsekouras and
oandregal
as code owners
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Contributor
Yeah, I could reproduce some glitchiness with the scroll bar jumping up and down. It could be the modal. Or another random hunch - I think ariakit has some logic within it that scrolls to the focused element, so I wonder if that might be interfering with the scroll position and causing elements to load in and out. 🤔 |
Contributor
Author
|
Thanks for testing @talldan!
A quick check of |
Member
Same. This is a wild guess: could it be anything to do with the network requests? Or do you pre-load them? I noticed with dataviews in general, where there is a network request, e.g., when sorting a column or anything, the entire view reloads and flashes and the scroll position is reset (brought back to top). |
Contributor
There's something surrounding the scroll behaviour that's also a bit glitchy on |
tellthemachines
force-pushed
the
try/new-infinite-scroll-branch
branch
from
ea0f582 to
3f7f747
Compare
Contributor
Author
|
Thanks for the reviews everyone! Especially @oandregal for all the testing and good advice! |
adamsilverstein
pushed a commit
that referenced
this pull request
Mar 31, 2026
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org>
adamsilverstein
pushed a commit
that referenced
this pull request
Apr 7, 2026
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
The merge conflicts in #71477 were too painful to rebase and it was easier to start fresh 😅
This PR simplifies the steps needed to enable infinite scroll in a DataViews or DataViewsPicker instance to 2 view properties:
infiniteScrollEnabled: truestartPosition(which should be the first item to load, usually 1 if starting from the top)plus some adjustment to data fetching when dealing with the REST API; essentially setting
in the query.
Code changes
useDatasets and keeps track of item positions and merges old data with new. It also returnssetVisibleEntries, which will be passed to an intersection observer to check which entries are visible at any given timeuseDatawhether infinite scroll is enabled or not.useInfiniteScrollhook, which creates and returns anintersectionObserverthat is passed to context in order to be used in the layouts that support infinite scroll. This hook also sets up and handles the scroll event listener that determines whether new data should be loaded on scroll.useIntersectionObserverhook to attach an observer to each rendered item.usePlaceholdersNeededhook that calculates if any placeholder items need to be added at the top of the grid so visible items keep their place when items are unloaded.Next steps
Currently only picker-grid, picker-table and grid layouts support infinite scroll, but it should be fairly easy to add to the other layouts as well.
As a follow up, we should also re-introduce the toggle to enable/disable infinite scroll in view config.
Testing Instructions
npm run storybook:devand check DataViewsPicker with infinite scroll toggled on: both grid and table layouts. Also check the DataViews infinite scroll story.To test infinite scroll in the new media upload modal: