List all active fonts in the typography section#65806
Conversation
|
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. |
|
Size Change: +800 B (+0.05%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
vcanales
left a comment
There was a problem hiding this comment.
👍 thanks for catching and fixing this
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. |
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
|
* 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>
|
I just cherry-picked this PR to the wp/6.7 branch to get it included in the next release: 35f7773 |
* 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>






Fixes #65805
What?
List all active fonts in the typography section
Why?
How?
Listing both theme and custom fonts.
Testing Instructions
See #65805