Font manager #46332
Font manager #46332
Conversation
matiasbenedetto
requested review from
TimothyBJacobs and
spacedmonkey
as code owners
|
Took this for a quick spin, here's a GIF showing the Global Styles > Typography flow:
Very cool, lots to like here, thank you for the effort! #45271 goes a bit further in terms of creating "font sets" to help define what's hiding behind the "Primary" item in the dropdown, mainly so that you won't have to manually go into every single block and change its font, but can simply change out a set instead. It seems okay to explore this separately, with the bulk of the actual management work being the first focus. But one challenge we have is that we probably can't add Google Fonts to the core offering. I believe there are some GDPR issues that block this. So it would be good to consider whether that can be a point of extensibility instead. Perhaps the "Create Block Theme" plugin, or other plugins, can hook into this slot and offer Google Fonts or otherwise. What do you think? As far as uploading fonts, this is definitely the main offering, and #45271 puts that in a modal. Doesn't have to be, we can start in the inspector as you have here, but if we're able to get a bit closer in terms of the design, that'd be nice. Let me know if this was helpful, and thanks for the work! |
|
Thanks for the review @jasmussen !
I think the approach we use in this PR and in the Create Block Theme plugin is GDPR-compliant. The list of fonts is a static JSON file stored in the repo. It is a subset of the data obtained from Google Fonts API. We are not fetching this data from Google fonts API dynamically from WordPress. It is requested one time and added to the repo. For example, in Create Block Theme plugin, we automatically and periodically check and update this file using a github action. In this PR I added a smaller chunk of fonts because is a proof of concept. This file contains a list of font families and the links to the font asset files in These URLs are used to download the font assets to generate the previews in the editor panel while browsing the "Google Fonts" section. When the user adds a font face and saves, the PHP downloads the font assets to What do you think? |
What I think entirely personally, is that Google Fonts is one of the best resources for web-design to arrive, and I would love access to it in my design tool. I mention this mainly because my assumption is that it's a complete non-starter to have this be part of the core offering, as I recall Google Fonts specifically having been problematic in the past, with GDPR just being one aspect. I would be delighted to be wrong, but before we assume that we are able to, it might be useful to get a wider look at the feasibility. @aristath or perhaps @Mamaduka do you recall core conversations around Google Fonts as a resource? Would you know anyone else to inquire? I understand the font files are copied over, not linked, but nevertheless. Thanks! |
|
@jasmussen, Ari will probably have more details on this one. This is the only thing that comes to my mind (also authored by @aristath) https://make.wordpress.org/themes/2020/09/25/new-package-to-allow-locally-hosting-webfonts/. @hellofromtonya might know the general status of Webfonts API. |
|
Size Change: +24.4 kB (+2%) Total Size: 1.39 MB
ℹ️ View Unchanged
|
|
Just to follow up here, I had an informal chat with a couple of others, and especially since there hasn't been any further feedback on this particular thread, let's move forward in this manner:
How does that sound? |
|
Please add php unit tests and phpdocs. Any change to the REST API will not be merged without these in place 😄 |
|
This may be too early feedback, in which case feel free to disregard :) But I wonder if we should be storing the downloaded font files on a site-wide basis keyed by a hash of the download URL, instead of per-theme. I'm thinking it would be unfortunate if a user ends up with 10 different copies of the same highly popular Google Font from trying out different themes or even in a multisite setup where many themes may be active across the network. |
|
I'm aware you're not looking for feedback quite yet, but just randomly tried the branch and got htis error:
|
|
Continuing with the implementation: I added the modal and removal of the fonts assets. 2022-12-28.12-34-49.mp4 |
|
Added a transition to make the removing and restoring available fonts clearer for the user: 2022-12-28.16-08-55.mp4 |
|
Nice to see this progress! Thank you for the energy here, this is going to be a big one. Many of the existing mockups circle around the concept of font pairings, that is, being able to create a preset pairing of two fonts denoted primary and secondary, to replace headings and body text respectively. At the moment we have only a single default, this one:
The change to primary and secondary, I picture, would replace that option and add another, so in just a few clicks you can customize headings and everything else across your site:
At this state of the branch, it seems like the above might be something we need to follow up on separately, what do you think? One other aspect this branch has made clear, is the intricacies of how to add fonts. Until variable fonts are more common, you don't just add a single font, it's always a matter of adding font variants. In doing so, the sequential waterfall flow of the styles sidebar does offer a relatively clear stepped mapping: Fonts → Pick family → Pick weights. In order to land this feature, I think we can lean into that, and I created some fresh mockups to embrace that. Basic font management
This would be a replacement for the following 3 steps:
Upload fonts
Add from Google Fonts
To hopefully make it easier to land this branch, this mockup keeps the Google font flow inside the style inspector. Pick font, check the box next to the font weights, save. Notice how the whole card becomes a single clickable button, though, making it more ergonomic to drill-down. I do think there's room for exploring this management happening in a stepped modal at some point in the future, but it's clear from testing this branch that it's not a 1:1 translation and it needs careful thought. But just to illustrate why it could make sense, it simply offers more room to browse available fonts:
It might be especially important once we're able to tackle variable width fonts, where the configuration of each is likely going to add some challenges on its own. So something to keep in mind, but probably to follow up on. Nice work! Let me know if these notes resonate 🙏 A few smaller notes Button and modal titles should use sentence-case, with capital first letters only for proper nouns. So although these mockups eliminate some of the following examples, just to highlight them as important details, it would be "Upload local font" instead of "Upload Local Font", and "6 font families" instead of "6 Font Families", etc.
When using icons, they should always be 24x24, never smaller. The chevron here is 15x15:
The tooltip here is a bit hard to grok, by the way, which is one of the reasons I think a checkbox could work better. |
|
Hi, @jasmussen thanks again for your great feedback! Sorry for not getting back to you sooner, but the new year holidays and some personal issues got me off for a few days. I would like to share a few comments and questions about the mockups. About the installed font list:
About the modal for Google fonts: I think we lack a way to move back from the variants list to the families list. Could add to the mockup a UI element to navigate back? About the list of fonts with the checkbox: A workaround for this could be to persist the list of fonts differently, but that would add a new layer of complexity to the current global styles/settings architecture, and It doesn't seem to be clear when a font face should be completely removed from the list. Another related issue is when all the font faces are unselected. Currently, the font family definition is removed when all font variants are removed. What would happen with the font family using the checkboxes as in the mockup? when should the font family be removed from the list? To avoid these problems, I implemented the remove button, which deletes the variants from the list, so the list looks equal before and after saving the changes. About the save button in the modal:
Maybe we can remove this button and apply the changes when the user toggles the selection of the variant. For saving the changes we can continue using the header "Save" button as with the rest of the global styles.
|
Chiming in here - I don't think the list could be too long. We could perhaps consider following up with a UI notice if there are a lot of font families loaded, to help guide users away from having too many.
I'd say when there are no active (checked) font variations loading from that particular font family. We could update the "12 styles" label to reflect the number of active/total styles We could also consider a control to remove all variants from a font family (instead of having to check all {x} variants, to remove a font family.
Are there any other modal dialogs that don't have a save button, requiring the "Save" primary button up top? The editor preferences modal does not have a save button, although those settings are established as soon as you toggle. It's logical we should tie into the existing Global Styles saving, although confirming the modal settings is important. I'd appreciate @jameskoster's point of view. |
|
To avoid any confusion with actual saving we've used "Apply" as a button label in other areas like the Lock Status modal for blocks, and the Push-to-global-styles flow. That could work here? "Done" is another option. |
Potentially, but this seems a bridge to cross when we get to it, especially since it should show family names, not individual weights here. We are already in some places warning that too many fonts can have a performance impact, perhaps that can be expanded if need be.
It sounds like you're referring to this part of the mockup:
We could maybe do something like this?
I'm waffling on the modal. Also per the feedback by Rich and Jay, it's a tricky needle to thread, even if I agree that "Apply" can work. I do appreciate that the modal offers more overview for previewing. Since the branch is already managing a lot of this in-sidebar, perhaps we can start there, and keep a PR putting it into a modal as a separate exploration? |
priethor
added
[Type] Feature
|
@matiasbenedetto is this still an active PR? Asking in light of checking in on Phase 2 items and trying to get a sense of where work is being done, especially with these very recently refreshed designs. |
|
👋 just for awareness, I updated mockups in #45271, which I hope should be easier to implement, and be close to what's here. Let me know how I can help! |
I haven't been working on the UI for the last couple of months. I will try to take a look at the data work to know if I can contribute to that. |
|
Flaky tests detected in 292eecd. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4812077445
|
|
This was an experiment used to kickstart the development of Font Library. Closing it now. |
What?
Gutenberg font manager.
⚠️ this is a draft
Why?
Refer to this issue: #45271
How?
The font manager shows the fonts bundled in the theme and lists fonts that can be added to the global settings.
The fonts are downloaded to the upload (
/wp-content/uploads/fonts/<active-theme-slug>/) folder when the user saves the global settings changes.To-do list:
useSetting( 'typography.fontFamilies' ). Duplicated font families in global settings #46376useSetting( 'typography.fontFamilies' ).Potential fix: WP Webfonts: avoid duplicated font families if the font family name was defined using fallback values. #46378
Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast
2022-12-06.11-25-43.mp4