Font Picker: Refine, show font preview, and load only active fonts from library

[jasmussen]

Extracted from #45271.

The font picker will show fonts that are registered in theme.json. As detailed in #45271, that means fonts added to your library which are active. The font picker can look like this:

The above design is an enhancement that focuses on showing a preview of the font itself, inline in the picker. But this design should not block either the webfonts API from landing, nor the font manager. The existing picker can work fine in the same system:

[mtias]

Is this being handled as part of the Fonts UI work?

[jasmussen]

Initially that was my instinct, but in order to separate concerns I split it out. Happy to consolidate again, though?

[mtias]

It's ok to have it split as long as we don't lose track of it!

[jasmussen]

Right! @mikachan is #52698 a good tracking issue to include this one on? Or is there a better one?

[mikachan]

Yeah, I think #52698 would be a good fit for this. I think it fits into the scope of that issue and I don't think there are any other, better tracking issues 😄

[annezazu]

I just ran into this while working on a site for someone and found the lack of previews to be so frustrating. I couldn't remember exactly what each font looked like after installing a few and it resulted in a lot of unnecessary back and forth. In handing off the site to the person, it made me wish there was a preview to save them time too when they take it over.

This is a long winded way of saying consider it a plus 1 to see this iterated on.

[matiasbenedetto]

I implemented a potential fix #67118 using styling and on the native HTML select component rendered by the FontFamilyControl.

It works as expected on chromium-derived browsers (Chrome, Edge, Brave, etc). There's a known bug in Firefox that makes the browser ignore the style properties in <option> tags. I haven't tried it on Safari.

As alternative to the native solution a custom select component that emulates the native select control could be implemented but I think that's much more complex and could impact accesibility .

@WordPress/gutenberg-components input is appreciated.

[mirka]

@matiasbenedetto Have you considered using CustomSelectControl? Those can be styled, and is already being used in similar things like the Appearance select in the Typography controls.

[matiasbenedetto]

@matiasbenedetto Have you considered using CustomSelectControl? Those can be styled, and is already being used in similar things like the Appearance select in the Typography controls.

Ohh I didn't know about that component. I will update the PR using it. Thanks for the input @mirka !

[annezazu]

So excited to see this!

[mtias]

Cool to see progress here!