Load font assets dynamically in the editor's iframe when the global settings are modified

[matiasbenedetto]

Description

If you update the theme JSON data modified client side using useGlobalSettings hook in the editor's Iframe without reloading the page, the font presets are loaded on the editor's iframe correctly, but the assets linked in the font presets are not. If I reload the page, the assets added client side are loaded as expected. /

I think the font assets should be automatically loaded if you update the settings.

Step-by-step reproduction instructions

1. add font families to typography.fontFamilies global settings using the useGlobalSettings hook.
2. Observe that the new font families assets are not loaded in the editor iframe.
3. Reload the page and observe that now the font assets are loaded in the iframe.

Screenshots, screen recording, code snippet

No response

Environment info

• Gutenberg trunk
• WordPress 6.2

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

[ellatrix]

How is it done currently for other globals styles? Cc @oandregal

[ellatrix]

What exactly are these assets?

[oandregal]

@matiasbenedetto What I hear is that the font face definition provided via global styles is not updated upon client changes. This is, the wp-fonts-local stylesheet is not updated and only contains the old definitions:

Is this what you mean?

I don't have much context about how font assets are loaded in the editors, though I searched around and this is what I learned: by searching for wp-fonts-local ID I only found this PHP code. This code is responsible for creating the stylesheet with the font faces declared via theme.json. However, I could not find anything similar for the client. That's what you need: the same code, in the client, so that the font face declarations work like any other style dependent on theme.json data: they are updated upon changes in the theme.json data store in the client settings. Is this helpful?

[ellatrix]

See also #52767, and #52888 for another proposal.

[vcanales]

A work-around sort of proposal, that gets the font files loaded in the iframe at the same time that they're loaded into the parent container: #54334