Font Library: Global Styles > Typography sidebar – group related font sources

[colorful-tones]

What problem does this address?

Give site builders easier glance at activated font's source: theme, user uploaded, Google Font installed.

This is related to #55220, but this focuses on mirroring and reinforcing the grouping of font sources that #55220 mentions in the Global Styles > Typography sidebar area. Ideally, site builders would not even have to open the Font Library to inspect what fonts are activated and where they're coming from: theme, user uploaded, etc. The Font Library already has some of this UI in the modal, but not in the Global Styles > Typography sidebar.

What is your proposed solution?

Group font sources in the sidebar under a heading and reinforce the work done in #55220 .

The screenshot below shows how the current iteration of the Font Library modal groups 'Theme Fonts' underneath user added fonts (note: there is no heading to indicate that the fonts are 'User Fonts' but would be good to do this, and it is proposed in #55220)

[matiasbenedetto]

I would like to know @jasmussen thoughts about this proposal.

[t-hamano]

Regarding the sidebar, this will probably also be related to #55179, which discusses improvements to the sidebar UI.

Regarding the modal dialog, I think we should at least add a heading of "User Fonts" or "Custom Fonts" or "Installed Fonts" for the font group the user has installed.

[jasmussen]

I would like to know @jasmussen thoughts about this proposal.

I think it can be explored, either in beta or for future versions; we have options there. But I wouldn't rush it — the interface has barely been used to make themes with, and before we start to split the interface apart, it'd be good to get some collect some more feedback. How would you feel about this one resting for a bit?

[afercia]

I'd agree that, generally, any list of items should be preceded by a heading or other semantic labeling to clarify what that list is about.

At least the modal dialog content should be improved.

RIght now, it's not clear why the theme fonts do have a visible title and other fonts don't. It's not even clear what the other fonts are and where they come from.

Actually, the 'Theme Fonts' title is not even a HTML heading. It's just text wrapped within unsemantic div and span elements.

A good headings hierarchy to clearly identify sections of content is one of the most important, basic, content structure and accessibility best practices.

The lack of it is an accessibility problem at the point I consider this issue a bug in a new feature that needs to be addressed before the release.

Screenshot of the current modal dialog titles (or lack of them):

[t-hamano]

What kind of UI would be ideal? I think the problem is where to display the toggle when user installed fonts and theme fonts are present.

[afercia]

What kind of UI would be ideal? I think the problem is where to display the toggle when user installed fonts and theme fonts are present.

To me, this is one more good reason to not use a tiny, barely visible, icon button to open the 'Manage fonts' modal dialog, as originally reported in https://github.com/WordPress/gutenberg/issues/58082 and then incorporated in https://github.com/WordPress/gutenberg/issues/55179

I'm not sure changing the icon from the Aa icon to the settings icon solved the problem.

[t-hamano]

I see, I think I understand @afercia's intention now. In other words, the following UI would be ideal, right?

[afercia]

In other words, the following UI would be ideal, right

IMHO, yes. As mentioned in https://github.com/WordPress/gutenberg/issues/58082 to me, the most commond and intuitive mental model for users is a list of objects (or more than one list it doesn't matter) and after that the ability to 'manage all' those objects.

[colorful-tones]

I agree with @afercia thay the tiny icon to launch the Font Library modal is not ideal and the “Manage Fonts” button would be a better interaction.

[colorful-tones]

I believe that there are critical user interface items that can be iterated upon after WordPress 6.5 is released. I have previously suggested that this issue: https://github.com/WordPress/gutenberg/issues/58403 be considered and added under the 'Nice to Have' section of https://github.com/WordPress/gutenberg/issues/55277#issuecomment-1915417792

For now, I believe we should move this to the ❓ Triage column on the WordPress 6.5 Editor Tasks board

[getdave]

@afercia is there an Issue capturing your comment about semantic headings in the Font Library modal?

@jasmussen My instinct aligns with yours - modifying the sidebar (not the Font Library modal) to group fonts is a "nice to have" and could be explored in a future release. We are at Beta 1 today and there is no PR exploring this feature so unless there's a critical reason why this breaks the experience for users then in my opinion we should look to defer to a future release.

[colorful-tones]

We are at Beta 1 today and there is no PR exploring this feature so unless there's a critical reason why this breaks the experience for users then in my opinion we should look to defer to a future release.

I'm going to remove this from the WordPress 6.5 Editor Tasks board, but it would be a Nice to Have for 6.5.

[t-hamano]

As of #62129, the Add/Manage fonts button is now always visible. This should allow us to move this issue forward.

In other words, the UI will look like this: