Skip to content

DataViews: add support for infinite scroll in table, grid, and list layouts #70955

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 25 commits into from
Aug 15, 2025
Merged

DataViews: add support for infinite scroll in table, grid, and list layouts #70955

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
b58dce5
Try adding optional infinite scroll to dataviews
tellthemachines Jul 29, 2025
a8042d9
try infinite scroll on all view types
tellthemachines Jul 30, 2025
5ef7214
make `infiniteScrollHandler` a property of `paginationInfo`
tellthemachines Jul 30, 2025
8b6f5f4
Add some more moons to storybook fixtures
tellthemachines Aug 4, 2025
61736d3
Add infinite scroll story
tellthemachines Aug 4, 2025
c8f47ab
update tests referring to data fixture
tellthemachines Aug 4, 2025
83c5644
Add aria roles for feed pattern
tellthemachines Aug 5, 2025
6269827
add feed aria roles to list and table layouts
tellthemachines Aug 5, 2025
afc4ac7
try toggle group control
tellthemachines Aug 5, 2025
c7b4fba
Changelog entry
tellthemachines Aug 5, 2025
c86bb1c
Fix storybook example
tellthemachines Aug 7, 2025
47dec0d
Fix styling issues with story
tellthemachines Aug 7, 2025
ac60b59
Hide pagination when infinite scroll is enabled
tellthemachines Aug 7, 2025
9a7d7aa
Remove memoed const
tellthemachines Aug 11, 2025
bf8010e
Make posinset optional prop and remove semantics from list layout
tellthemachines Aug 11, 2025
55302da
add aria attribs to div wrapper in list layout
tellthemachines Aug 11, 2025
fd50cfa
update changelog
tellthemachines Aug 11, 2025
be34116
Add loading more text
tellthemachines Aug 11, 2025
fd42a2c
Disable when data by group
tellthemachines Aug 11, 2025
b1ecc53
move infiniteScroll to base view
tellthemachines Aug 13, 2025
074c8ae
Try simple toggle and hiding per page values
tellthemachines Aug 13, 2025
3d54442
Center-align "loading more results"
tellthemachines Aug 13, 2025
1a9d90a
Change loading more text to spinner
tellthemachines Aug 13, 2025
07b49dc
Remove post list handler meant for testing
tellthemachines Aug 14, 2025
0cb6ad2
Update property name and clean up
tellthemachines Aug 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Try simple toggle and hiding per page values
  • Loading branch information
@tellthemachines
tellthemachines committed Aug 13, 2025
commit 074c8ae6eeedf1155a45b1db2560afc011bd4fed
7 changes: 6 additions & 1 deletion packages/dataviews/src/components/dataviews-view-config/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,12 @@ function SortDirectionControl() {

function ItemsPerPageControl() {
const { view, perPageSizes, onChangeView } = useContext( DataViewsContext );
if ( perPageSizes.length < 2 || perPageSizes.length > 6 ) {
const { infiniteScroll } = view;
if (
perPageSizes.length < 2 ||
perPageSizes.length > 6 ||
infiniteScroll
) {
return null;
}

Expand Down
32 changes: 9 additions & 23 deletions packages/dataviews/src/components/dataviews-view-config/infinite-scroll-toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
/**
* WordPress dependencies
*/
import {
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
} from '@wordpress/components';
import { ToggleControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useContext } from '@wordpress/element';

Expand All @@ -24,30 +21,19 @@ export default function InfiniteScrollToggle() {
}

return (
<ToggleGroupControl
<ToggleControl
__nextHasNoMarginBottom
__next40pxDefaultSize
isBlock
label={ __( 'Infinite scroll' ) }
value={ infiniteScrollEnabled ? 'enabled' : 'disabled' }
onChange={ ( value ) => {
const newValue = value === 'enabled';
label={ __( 'Enable infinite scroll' ) }
help={ __(
'Automatically load more content as you scroll, instead of showing pagination links.'
) }
checked={ infiniteScrollEnabled }
onChange={ ( newValue ) => {
onChangeView( {
Copy link
Member

@oandregal oandregal Aug 6, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When switching it off, we also need to set the page we are in and make sure we only list the perPage number of items (not all of them)? Otherwise, it's like nothing happened:

Screen.Recording.2025-08-06.at.13.20.52.mov

Copy link
Contributor Author

@tellthemachines tellthemachines Aug 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That was an issue with the storybook implementation, not the toggle control 😅
It should be fixed in 8804ac9.

...view,
infiniteScroll: newValue,
} );
} }
>
<ToggleGroupControlOption
key="disabled"
value="disabled"
label={ __( 'Off' ) }
/>
<ToggleGroupControlOption
key="enabled"
value="enabled"
label={ __( 'On' ) }
/>
</ToggleGroupControl>
/>
);
}
Loading