List all active fonts in the typography section #65806
Merged
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
|
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. |
matiasbenedetto
added
the
[Type] Bug
|
Size Change: +800 B (+0.05%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
vcanales
added
the
Backport to WP 6.7 Beta/RC
vcanales
approved these changes
Oct 1, 2024
t-hamano
reviewed
Oct 2, 2024
There was a problem hiding this comment.
Thanks for finding the problem!
Is there a possibility that the slugs are duplicated between theme origin and custom origin? If so, the following changes might be better:
diff --git a/packages/edit-site/src/components/global-styles/font-families.js b/packages/edit-site/src/components/global-styles/font-families.js
index 5332478823..682ec5971f 100644
--- a/packages/edit-site/src/components/global-styles/font-families.js
+++ b/packages/edit-site/src/components/global-styles/font-families.js
@@ -59,7 +59,6 @@ function FontFamilies() {
defaultTabId={ modalTabOpen }
/>
) }
-
<VStack spacing={ 4 }>
{ [ ...themeFonts, ...customFonts ].length > 0 && (
<>
@@ -71,6 +70,12 @@ function FontFamilies() {
font={ font }
/>
) ) }
+ { customFonts.map( ( font ) => (
+ <FontFamilyItem
+ key={ font.slug }
+ font={ font }
+ />
+ ) ) }
</ItemGroup>
</>
) }
|
While this solves the problem of the custom fonts not being listed, it repurposes the unclarity of UI that #63211 attempted to address and #65590 reverted. In the screenshot below:
Actually, they are listed in separate 'groups' as in: the theme fonts first, the custom font after. However, the UI doesn't visually and semantically separate them in two groups. As an user, I wouldn't understand why they're not listed alphabetically. If the prevalent opinion is to use this list to show the active fonts regardless of their source, I think that for better clarity and usability the fonts should be listed alphabetically. |
In my testing of WP 6.6, it seems like all theme fonts and custom fonts are sorted alphabetically. Therefore, I think this PR or a follow-up PR should address this issue and backport it to WP 6.7. In the screenshot below, "ABeeZee" and "ADLaM Display" are custom fonts.
|
also skip unnecessary sorts
That looks like a bug; the alphabetical sorting for the entire set of fonts should not display a differentiation by group. I've taken the liberty to apply alphabetical sorting of all active fonts (0e9cb69), and reduced a bit of duplicated code (8c19ada) 
|
|
Flaky tests detected in 8c19ada. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11171992533
|
github-actions
bot
removed
the
Backport to WP 6.7 Beta/RC
gutenbergplugin
pushed a commit
that referenced
this pull request
Oct 8, 2024
* list all active fonts * sort active fonts alphabetically also skip unnecessary sorts * abstract font source mapping into function --------- Co-authored-by: Vicente Canales <1157901+vcanales@users.noreply.github.com>
github-actions
bot
added
the
Backported to WP Core
|
I just cherry-picked this PR to the wp/6.7 branch to get it included in the next release: 35f7773 |
karthick-murugan
pushed a commit
to karthick-murugan/gutenberg
that referenced
this pull request
Nov 13, 2024
* list all active fonts * sort active fonts alphabetically also skip unnecessary sorts * abstract font source mapping into function --------- Co-authored-by: Vicente Canales <1157901+vcanales@users.noreply.github.com>
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.
Fixes #65805
What?
List all active fonts in the typography section
Why?
How?
Listing both theme and custom fonts.
Testing Instructions
See #65805