Fonts Library: collection ID is undefined

[afercia]

Description

This appeaers to be a regression in trunk after #57735

#57735 changed the font collection id to slug, the changes were made mainly on the PHP side. However, it appears a few parts in the JavaScript side sill expect a colelction id that it may be now undefined.

Cc @matiasbenedetto

For example:

In the odal dialog markup the ID is still used for the google fonts tab and tabpanel, but it is now undefined:

The id to be used in these components is expected to be default-font-collection.

More importantly:
I couldn't get the prompt to allow to install Google fonts to shohw. Only after reverting #57735 I was finally able to see the prompt. There is code in the JS implementation that still expects the default-font-collection ID while now it receives undefined.

Screenshot of the prompt to allow to install fonts from Google:

Step-by-step reproduction instructions

• Clear your browser local storage.
• Go to Site editor > Styles > Typography
• Open the fonts modal dialog by clicking the 'Aa' (sigh) icon button.
• Observe the title of the third tab within the modal dialog is 'Google fonts'. Expected: to be 'Install fonts' and change to 'Google fonts' only after permission to install has been given by the user.
• Observe the content of the third tab is the list of Google fonts: Expected: to be the prompt to allow installation.

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

[afercia]

I think this also breaks the modal dialog tabs when additional collections are added.

@matiasbenedetto I was trying to test additional collections by installing your Modern Fonts Stacks for WordPress Font Library plugin mentioned on #54713 and I was getting an error Plugin could not be activated because it triggered a fatal error.

After changing id to slug here
https://github.com/matiasbenedetto/modern-fonts-stacks-for-wp-font-library/blob/c770b588221e52b70046e30139d3db27220a9121/index.php#L14

the plugin activates correctly and a fourth tab is shown in the modal dialog:

but the Google fonts and the Modern Fonts Stacks tab / tabpanel use the same id tabs-0-undefined so that the UI is broken.

I also suspect the fatal error comes from the fact the expected array key slug isn't set. That likely highlights on the PHP side there should be some better check when the array key is not set to prevent errors.

[afercia]

i'm also getting a JS Warning: Each child in a list should have a unique "key" prop.
Suspect it's the undefined id for the Google fonts tab.

[matiasbenedetto]

Hi @afercia 👋 thanks for reporting this. It seems like this should be fixed with this PR #57884. It was already merged to a feature branch with a larger set of changes #57688 intended to be merge soon. After merging the feature branch in trunk this problem should be fixed.

After that, I'll update this little example plugin to match the new expected shape of data introduced with #57884, #57736 and #57616

[afercia]

Thanks for your feedback @matiasbenedetto I see in #57884 many references to id are udpated to slug so yes that will probably fix it. Glad to close this issue after the feature branch is merged.

[mikachan]

I'm going to close this as #57688 has now been merged, but please re-open if the issue happens again.