search

Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.42k stars 1.99k forks source link

Use theme styles in Block Editor not working for older themes #52030

Open joweber123 opened 3 years ago

joweber123 commented 3 years ago

Steps to reproduce the behavior

  1. Go to the Block Editor > Preferences > Appearance and select 'Use theme styles'.
  2. Click on 'Use theme styles'.

What I expected to happen

I would expect that the font that is set in the Customizer would be applied to the Editor.

What actually happened

A default sans-serif font is used instead for older themes. This is working properly for the Varia children themes.

Context

3946102-hc

Browser / OS version

Firefox and Chome / Big Sir - (Does not seem to be a browser/OS issue)

Is this specific to the applied theme? Which one?

I have tested this with the themes Plane and Twenty-Seventeen.

Does this happen on simple or atomic sites or both?

Both

Is there any console output or error text?

No

Level of impact (Does it block purchases? Does it affect more than just one site?)

Does not block purchases. Mainly aesthetic.

Screenshot / Video: If applicable, add screenshots to help explain your problem.

It seems to be that the required stylesheets are not being added for older themes when this option is enabled.

Here is a screenshot testing with the Twenty-Seventeen theme. Markup on 2021-04-17 at 14:52:04

Here is a screenshot testing with the Dalston theme. Markup on 2021-04-17 at 14:47:23

joweber123 commented 3 years ago

Potentially related https://github.com/Automattic/themes/issues/3280

zdenys commented 3 years ago

I get the opposite result for Blank Canvas Theme, Twenty Twenty-One Theme, Spearhead Theme, Seedlet Theme, Barnsbury Theme

With the Use theme styles off, I see a default serif font in the editor, but when I turn that feature on, I see the expected font.

Link: https://d.pr/i/bWEz8t

For Twenty Twenty Theme with the Use theme styles off or on, I do see the same font, which is nice because it's a consistent result that doesn't depend on the option Use theme styles.

Link: https://d.pr/i/XtKaqb

So the feature Use theme styles should be on by default for all WordPress.com sites to ensure the fonts and styling is loading fine in the editor? If yes, is that actually the case?

joweber123 commented 3 years ago

Another report here 4204264-zen

User on the Twenty Twenty theme with Cabin selected for a font in the Customizer. This shows correctly on the live site but does not show in the Editor.

mikachan commented 2 years ago

I've tested this in newer themes like Blank Canvas and I can see the correct custom font is applied via the presets var(--wp--preset--font-family--heading-font) and var(--wp--preset--font-family--body-font) from global-styles-inline-css. These font presets don't seem to exist for older themes like Twenty Seventeen and Twenty Twenty.

It looks like in the older themes, the custom fonts are applied via a style tag added by Jetpack, jetpack-custom-fonts-css, which isn't applied to the editor. It looks like these are set via the jetpack-fonts.php file, but I can't see any options to apply these to the editor as well as the front end. I don't know much about Jetpack custom fonts, but I'm wondering if this issue sits more with Jetpack rather than the themes themselves?