Font Library: Remove infinite scrolling behavior from the Fonts modal dialog

[afercia]

Description

See all the relevant discussion about the removal of infinite scrolling from the Core media grid at https://core.trac.wordpress.org/ticket/50105

Infinite scrolling behavior is not accessible for keybaord users. Over time, infinite scrolling proved to not be a good experience for all users at the point many 'big' sites either remove any infinit scrolling behavior or implemented a 'mixed' approach where infinite scrolling works only for the first 2-3 scrolls of a page and then a 'Load more' button is used insteead.

I'm surprised the Font Library user interface adopted infinite scrolling thus ignoring best practices adopted and decisions already made in WordPress Core.

A few options for remediation:

• Entirely remove infinite scrolling and provide a 'Load more' button.
• Entirely remove infinite scrolling and provide standard pagination.
• Implement a 'mixed' behavior where infinite scrolling is in place only the 2-3 first times users scroll and then replace it with a 'Load more' button.

Step-by-step reproduction instructions

• Go to Site editor > Styles > Typography > click on any font title to open the Fonts modal dialog
• Click the 'Google fonts' tab within the modal dialog.
• Observe the list of Google fonts uses infinite scrolling behaviior.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[matiasbenedetto]

@jasmussen could we have some mockups featuring pagination for font collections?

[jasmussen]

I believe there is a pagination component already that you should be able to use. I wasn't able to directly find it, but the revisions panel is using it, I believe, you can see it here: #57294 — let me know if that works for you.

[afercia]

Worth reminding the WordPress Accessibility best practices documented in the Make Accessibility Handbook do have a section about infinte scroll a https://make.wordpress.org/accessibility/handbook/markup/infinite-scroll/
TL:DR
Use pagination instead.