Font Library: Convert heading text to heading elements and group fonts as a list #58834
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
t-hamano
added
[Type] Enhancement
|
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. |
afercia
requested changes
Feb 8, 2024
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
|
I'm all for adding headings and using an unordered list. Headings clearly identify sections of content, both visually and semantically. Screenshot fo the headings hierarchy reported by teh headingsMap browser extensiont:
|
| flex-direction: column; | ||
| } | ||
| .font-library-modal__fonts-grid__list { | ||
| margin: 0; |
There was a problem hiding this comment.
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
colorful-tones
approved these changes
Feb 9, 2024
There was a problem hiding this comment.
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.
t-hamano
force-pushed
the
font-library/add-heading-and-grouping
branch
from
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
|
t-hamano
added
the
Backport to WP Beta/RC
|
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. |
t-hamano
force-pushed
the
font-library/add-heading-and-grouping
branch
from
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. |
t-hamano
removed
the
Backport to WP Beta/RC
|
@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 😅 |
t-hamano
changed the title
t-hamano
force-pushed
the
font-library/add-heading-and-grouping
branch
from
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 🙏 |
jasmussen
approved these changes
Apr 29, 2024
| @@ -66,6 +66,23 @@ $footer-height: 70px; | |||
| margin-bottom: 0; | |||
| } | |||
|
|
|||
| .font-library-modal__fonts-title { | |||
There was a problem hiding this comment.
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.
Similar to these styles is the label for the BaseControl component. However, we cannot use the label as a heading element.
Personally, I think it's fine as is for now.
There was a problem hiding this comment.
It would be nice to have a heading style for that appearance that can be used in more cases. (Agree, not a blocker.)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 usingfieldsetandlegend, we should be able to properly associate the heading with the content. But maybe these elements should be inside theformelement. 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