-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Font Library: Convert heading text to heading elements and group fonts as a list #58834
Conversation
Size Change: +103 B (0%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
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 If 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. |
packages/edit-site/src/components/global-styles/font-library-modal/fonts-grid.js
Outdated
Show resolved
Hide resolved
packages/edit-site/src/components/global-styles/font-library-modal/fonts-grid.js
Outdated
Show resolved
Hide resolved
flex-direction: column; | ||
} | ||
.font-library-modal__fonts-grid__list { | ||
margin: 0; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder if we could be more explicit and only override what we need here? I'm not a huge fan of shorthand for these reasons. This is a nitpick and should not hold up this being merged.
margin-bottom: 0;
margin-top: 0;
packages/edit-site/src/components/global-styles/font-library-modal/style.scss
Outdated
Show resolved
Hide resolved
packages/edit-site/src/components/global-styles/font-library-modal/style.scss
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a great adjustment, and thanks for diving in @t-hamano !
I left a few CSS nit-picks, but please do not let it stop from merging. I would ultimately think we want to be consistent with whatever Gutenberg's CSS standards are, and I'm rusty on that.
11c1e2d
to
b68a6f1
Compare
Since #58794 was merged, changes were made again to match the latest trunk. The following points, which are the objectives of this PR, should still be maintained.
|
Flaky tests detected in b68a6f1. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7895054595
|
I added #55220, which this PR solves, to the WP6.5 project board and also gave this PR a backport label. WP6.5 will probably see a lot of backporting regarding the font library. In order to avoid conflicts during the backport process, I think we need to backport as much as possible when there are changes to the code related to the font library. |
b68a6f1
to
39f19f4
Compare
Updated again: The font library was significantly refactored in trunk, so I resolved the conflict again and updated all PR descriptions. |
@WordPress/gutenberg-design can you all review this? I can see reviews were requested but a review hasn't quite been done. This overlaps nicely with what we've seen with grouping templates #57711 so I imagine this is another overlapping area. |
Note: A discussion started in Slack about whether the Font Library should be shipped to the core. If the Font Library will not ship to WP6.5, we may want to remove the backport label. |
I'm personally okay to move forward with this as an immediate fix, but I think there's a larger challenge with how the font library is coming together at the moment that needs clarification. It's easy to think that this new Font Library should be the only source of managing everything related to fonts, both across files and font stacks and theme fonts. But it can never be that one canonical source; some typographic styles will have to live in global styles, etc. So unless we get clarity about the role of the font library, this will become increasingly messy, as also discussed here related to where you manage font stacks. A cleaner delineation, which is also how this was designed, is to have the Font Library behave similarly to the Media Library: it's a place where you add, remove, manage files, and perhaps a little metadata. This delineation immediately provides clear answers to questions like these: where should font stacks be managed? Where should theme vs. user fonts live? Global styles, because the font library is only ever fonts you install yourself. |
Remove the backport label and also exclude it from the project board. See this comment. |
@jasmussen Thank you for your opinion. I agree that there is a larger challenge to be solved when it comes to the font library. After several rounds of conflict resolution regarding this PR, we finally settled on just improving accessibility, and as a result, no changes were made to the design. I should have told you that design feedback is no longer required 😅 |
3bf1e7c
to
31fc51c
Compare
@jasmussen @colorful-tones @afercia Could you review this PR? The content of the PR has not changed, but the conflict has been resolved again 🙏 |
@@ -66,6 +66,23 @@ $footer-height: 70px; | |||
margin-bottom: 0; | |||
} | |||
|
|||
.font-library-modal__fonts-title { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not a blocker from me, but in general it would be nice to move away from custom CSS in favor of the base components with their default styles. I assume this would require a larger refactor?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would be nice to have a heading style for that appearance that can be used in more cases. (Agree, not a blocker.)
Related to #55220
Part of #58403
See this comment: #58403 (comment)
What?
This PR achieves the following two things in the font library modal.
Why?
User-installed fonts don't have the title, so Users don't know what that font list means.Also, since the font list is actually just a list of button elements, users using screen readers cannot understand how many fonts there are.How?
Group the font list as follows.
Note
By usingfieldset
andlegend
, we should be able to properly associate the heading with the content. But maybe these elements should be inside theform
element. I would appreciate it if you could give me advice on whether this implementation violates a11y.Testing Instructions for Keyboard
Screenshots or screencast
48ab4d98f54f66817d02261887582fc8.mp4