Font family class names and vars not being generated

[wpuipress]

Description

I am using the block editor outside of a wordpress installation and I am using the editor in a framed view using <BlockCanvas/>

I have registered fonts and they show in the ui, I can switch and change font and the font classes get applied to the block but the classes don't exist.

To generate the style attribute, I am using the provided function useGlobalStylesOutputWithConfig. This generates plenty of css from the given styles and settings objects but seems to not generate the required font classes and variables.

I am assuming this is the way it should work? I can't see anything else in the packages that mentions font class generation etc. Any help would be appreciated as i have been struggling with this for days.

Step-by-step reproduction instructions

1. Build a simple object settings property with some font families and a a styles property.
2. Pass this to 'useGlobalStylesOutputWithConfig'
3. Result should contain classes and variables for given fonts?

Screenshots, screen recording, code snippet

const settings = { settings: { layout: { contentSize: "620px", wideSize: "1280px", blockGap: "400px", }, typography: { fontStyle: true, fontWeight: true, letterSpacing: true, lineHeight: true, textDecoration: true, textTransform: true, writingMode: true, fontFamilies: { theme: [ { fontFamily: "-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif", name: "System Sans-serif", slug: "system-sans-serif", }, { fontFamily: "Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol", name: "System Serif", slug: "system-Serif", }, ], }, fontSizes: { default: [ { name: "Small", slug: "small", size: 12 }, { name: "Normal", slug: "normal", size: 16 }, { name: "Large", slug: "large", size: 24 }, { name: "Huge", slug: "huge", size: 36 }, ], }, }, }, styles: { blocks: {}, typography: { fontFamily: "var(--wp--preset--font-family--body)", fontSize: "var(--wp--preset--font-size--medium)", fontStyle: "normal", fontWeight: "400", lineHeight: 3.5, }, }, };

Environment info

Node js

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ramonjd]

Thanks for the issue!

seems to not generate the required font classes and variables.

Just to confirm, it's just the newly-registered fonts whose classnames and vars are missing?

I'm not very familiar with the fonts library API - I'm not yet sure if it's related to it - but I would expect that they should be available in the site editor as well.

Pinging @matiasbenedetto for an expert opinion.

[matiasbenedetto]

I'm not very familiar with the fonts library API - I'm not yet sure if it's related to it - but I would expect that they should be available in the site editor as well. Pinging @matiasbenedetto for an expert opinion.

Sorry for not being more helpful. This is unrelated to the Font Library, so I changed that label to 'Typography'. At least for now, this seems to be more a question about how the Global Styles javascript code works than a bug, so I changed 'Bug' label by 'Question'.

---

I'm not sure if this is useful but I can add that CSS @font-face definitions are not generated on the client side but on the PHP backend using the font-face-resolver: https://github.com/WordPress/gutenberg/blob/trunk/lib/compat/wordpress-6.4/fonts/font-face/class-wp-font-face-resolver.php

[ramonjd]

Sorry, thanks for steering us in the right direction anyway @matiasbenedetto! 🙇🏻

[wpuipress]

So I was able to get the styles I needed by directly importing and passing my settings object to the functions toCustomProperties and getLayoutStyles from @wordpress/block-editor/src/components/global-styles/use-global-styles-output

The functions should be used inside useGlobalStylesOutputWithConfig though, so not sure what is preventing them from being called.

I am having to create the css @font-faces myself though for custom fonts, not sure if there is a specific function somewhere for that?

[matiasbenedetto]

I am having to create the css @font-faces myself though for custom fonts, not sure if there is a specific function somewhere for that?

Both for the editor and the public frontend the CSS @font-face definitions are printed by: PHP WP_Font_Face_Resolver class.

It means that you need to reload the page to get those font faces created while using the editor. To load the font faces in the browser in real-time (while editing the Global Styles), some Font Library-specific code was added to load the font faces on the browser and in the editor iframe when necessary. Still, it wasn't planned to be used out of the font library context, but it can be useful as example maybe:

https://github.com/WordPress/gutenberg/blob/66dfcf27a8c87fd553fa3f890b7c98caa74b498d/packages/edit-site/src/components/global-styles/font-library-modal/utils/index.js#L85-L122

[tellthemachines]

Hi @wpuipress!

When trying useGlobalStylesOutputWithConfig with the config object you pasted above, I can see both the custom properties and the font-size and font-family styles that use them being output. The only issue I see is with the font-size values not having a unit, which means they don't get applied by the browser. Have you double-checked that the rules aren't present at all in the output of useGlobalStylesOutputWithConfig?