Font Library Pagination Footer JavaScript error: Uncaught RangeError: Invalid array length

[carolinan]

Description

I've been trying to find the best way to reproduce this issue for the past two days, and it doesn't always show up. I have not been able to pin point what exact conditions triggers the error.

When I open the Font Library and click on the tab panel "Install fonts", I see "The editor has encountered an unexpected error".
It happens both with and without fonts installed.

Here is the content from the "Copy Error" button:

RangeError: Invalid array length
    at PaginationFooter (http://localhost:8889/wp-includes/js/dist/edit-site.js?ver=9f909713a1d0e8a21a08:7452:20)
    at renderWithHooks (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:16315:20)
    at updateFunctionComponent (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:19598:22)
    at beginWork (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:21611:18)
    at beginWork$1 (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:27436:16)
    at performUnitOfWork (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:26567:14)
    at workLoopSync (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:26476:7)
    at renderRootSync (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:26444:9)
    at recoverFromConcurrentError (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:25860:22)
    at performSyncWorkOnRoot (http://localhost:8889/wp-includes/js/dist/vendor/react-dom.js?ver=18.2.0:26106:22)

And here is the log.
localhost-1708514725259.log

Step-by-step reproduction instructions

In the Site Editor, open the Font Library from the Styles > Typopgraphy panel and click on the tab panel "Install fonts"

Screenshots, screen recording, code snippet

No response

Environment info

6.5-beta2-57673 on Local , using the beta tester nightly
6.5-beta2-57671-src which is my current copy of wordpress-develop.
With and without Gutenberg trunk.
Tested on Twenty Twenty-Four and on a custom block theme that does not add any font families.

-Untested on 6.4.3.

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

Yes

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

No

[carolinan]

The pagination footer select list uses an array created from totalPages. But if I use console.log to print totalPages, I get Infinity.

See https://github.com/WordPress/gutenberg/blob/trunk/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js#L356

[t-hamano]

I was also able to reproduce this problem. In the case I encountered, I got the exact same error when I narrowed down the height of the browser.

63d343e1c02606df2f18a7330214f07b.mp4

@pbking @matiasbenedetto, There may be a problem with the calculation of total pages.

gutenberg/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js

Lines 121 to 122 in 1eadcb9

	const pageSize = Math.floor( ( window.innerHeight - 417 ) / 61 );
	const totalPages = Math.ceil( fonts.length / pageSize );

[carolinan]

Thank you for confirming.

[matiasbenedetto]

A potential fix for this is ready to review: #59241