search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.52k stars 4.21k forks source link

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

Open jasmussen opened 1 year ago

jasmussen commented 1 year ago

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:

Selecting fonts in Post Editor

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:

existing picker
mtias commented 1 year ago

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

jasmussen commented 1 year ago

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

mtias commented 1 year ago

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

jasmussen commented 1 year ago

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

mikachan commented 1 year ago

Yeah, I think https://github.com/WordPress/gutenberg/issues/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 commented 6 days ago

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.