Font Library: Replace manage fonts icon with button with visible text #58158
Conversation
t-hamano
added
[Type] Enhancement
|
Size Change: +40 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
t-hamano
requested review from
mtias,
jasmussen,
mikachan,
afercia and
matiasbenedetto
and removed request for
mtias
There was a problem hiding this comment.
Thank you for the PR. I don't agree with the original issue. We use icon buttons to manage prominence across the UI, and in this case, clicking any single font in the list below opens the manage dialog, so the prominence is intentional.
There's a text-labels only toggle in preferences, this can potentially be a space for text-label changes.
|
@jasmussen Thank you for your feedback. If we want to improve this font panel, what do you think is the best approach? If we want to keep the icon, I think one way is to change it to a cog icon, as mentioned in this comment. |
|
I think there's potential to refine the Aa icon itself to better represent typography, but the cog icon is already widely used. We could potentially replace it with a plus, or an ellipsis. The thing is, once you have fonts, the management stuff is secondary (or even tertiary) in importance. What we can do is add this button when there are no fonts installed, like so: 
|
|
My concern is that this icon itself does not represent an actual function, and people might not even notice that it is a button and is clickable. For example, what about
|
I don't agree with this design feedback. It's not just the icon meaning. It's the proliferation of icon buttons all overl in the user interface that doesn;t add great value and instead makes things more confusing. From an accessibility perspective, the accessibility team reported several times that icons do have ienherent problems and their usage should be limited, or accompanied with text. Keeping dismissing the feedback provided by the accessibility team and insistning on using only icons isn't hte best Lastly, users from the FSE Outreach Program are already reporting they can't find a way to open the 'Manage all fonts' modal, see #55179 To me, the changes in this PR make perfectly sense and I'm all for it. I'd also like to see ane stablished pattern for all the buttons that open a modal sialog. |
I would like to add my thoughts on this part.
Yes, but it opens the modal dialog sub-view with the fonts details. This is very confusing as the only way for users to understand they are in a 'sub view' is the small chevron left icon to go back. I'm not sure this is an ideal design in the first place.
Is the intent to make the 'manage all fonts' Aa icon less prominent and make the single font buttons more prominent so to induce users to click on the font details? Then I'd argue the 'Manage all fonts' should be last in the list. |
I agree when there's no font installed, the current UI provides very little clarity on how to add fonts. Screenshot:
Also, when opening the modal dialog the 'Library' tabpanel is of course empty. No content at all. As a user I would be confused and feel like it's a dead end. I'd have to explore the content of the other tabs to understand what I can do in this odal dialog. I'd think that either the 'Library' panel should not be rendered at all when there's no fonts installed or, better, some introductory / eplanatory short text should be added. Screenshot of the empty Library. Screenshot:
Re: The mokup proposed above for the 'no fonts' case: 
|
@jasmussen I hope that you mean that your disagreement is with the specific approach of that solution, not with the underlying problem. #55179 identifies that there is a very real, valid discovery problem with the One could argue that would be better as a PR and not a distinct issue, but his two follow-up comments (1, 2) on that issue actually surfaced a more core underlying problem—the inconsistency of what these icons mean and do. Your position that the "prominence is intentional" is irrelevant. Just because something is intentional does not mean it is intuitive. I'd suggest it might make more sense to move discussion away from this PR (and also out from #58082), over to the originally reported problem in #55179 to talk about possible solutions. This might help prevent conflating a single solution with the more broad/overarching problem. |
|
How about the settings icon that we use in other controls? This aligns with other controls. 300608157-10249f87-91b0-43c8-a07f-883546d5a097.movWe could potentially use the + for when there are no fonts, though that's likely closer to an edge case. |
Dialog about what this is and how to use it would be helpful. |
Icons are fine—if they're consistently applied. Why I'm suggesting the settings icon that we use in the same placement for other controls. |
|
It looks like #58580 has been merged, so I'm closing this PR. |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @t-hamano, @jasmussen, @annezazu. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. Core SVNIf you're a Core Committer, use this list when committing to GitHub Merge commitsIf you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Fixes #58082
What?
This PR changes the button for opening the Font Library modal dialog from an icon button to a button with text, and also moves its position.
When the fonts are not registered:
Why?
The current icon doesn't actually represent the concept of "font management". It's also the same as the icon in the Elements panel, which confuses users even more. Even if he changes this icon to Cog (Gear), the user may not know at first glance what this icon means. See #58082 for a more detailed discussion.
How?
Note: As mentioned in this comment, we should consider whether to include "all" in the future. For now, I've included "all" to match the existing rules.
Testing Instructions
Confirm that the Font Library modal toggle works as before.
Testing Instructions for Keyboard