Multiple Themes: Editor font styles not loading in Gutenberg v9.9.3

[kjellr]

Steps to replicate

Many of our older themes target a classname that doesn't appear to exist anymore in the editor, which results in their font styles not being applied. Here's an example from AltoFocus:

themes/altofocus/assets/stylesheets/editor-blocks.css

Lines 22 to 28 in 3fa9d68

	.edit-post-visual-editor .editor-block-list__block,
	.editor-default-block-appender textarea.editor-default-block-appender__content {
	font-size: 13.875px;
	font-family: "Libre Baskerville", "Georgia", Georgia, "Times New Roman", Times, serif;
	font-weight: 300;
	line-height: 1.75em;
	}

This targets editor-block-list__block, which no longer exists in Gutenberg v9.9.3 as far as I can tell. Changing it to block-editor-block-list__block works. (Or more preferably, these styles should be enqueued via add_editor_style() and the font styles should be applied to editor-styles-wrapper).

This is also a problem in:

• Independent Publisher 2
• Penscratch 2
• Libre 2
• ... and likely many other older themes.

Result

The editor loads the browser default for font + font size, or it uses Noto Serif.

Safari:

Chrome:

Expected

The theme should be using the Libre Baskerville font stack as specified in the stylesheet.

[xpurichan]

Experienced this in the Veni theme on a customer's website in 27820699-hc. I wanted to note that this issue is present in the customizer (not only in the block editor).

We can even see some oddities when we go to edit the Veni theme demo site in the customizer (not the different fonts used for the "featured pages" description texts:

Versus what we see when we visit the Veni theme demo site at https://venidemo.wordpress.com/:

[donalirl]

This may be affecting WordPress.com/support as well. In the editor, we noticed the font now shows in a serif font, when it used to be sans-serif.

[retnonindya]

A user reached out on chat about this too on theme Button 2. They are curious why the font size on editor suddenly got smaller.

[fresatomica]

There are a few reports on the WordPress.com forums: here, and here.

[jamiepalatnik]

Reported in 17960158-hc too.

[noteeth]

Additional report regarding Independent Publisher 2 in 3752006-zen

[aleone89]

Another report here: https://wordpress.com/forums/topic/font-size-in-blocks-editor/#post-3639659

[vinnykaur]

Another one here: hc-25451080

[aleone89]

This has been reported on Twitter here: https://twitter.com/SifaPoulton/status/1372516404700790785 the theme in use is Independent Publisher 2

[aleone89]

This has been reported in the forums here: https://wordpress.com/forums/topic/editor-font-randomly-changes/ the theme in use is Sela

[erricgunawan]

Reported on 28246108-hc and followed up on 3835024-zen

It happens on multiple sites with multiple retired themes (i.e. Chateau, Panel)

[aleone89]

This has been reported in the forums here: https://wordpress.com/forums/topic/why-cant-i-choose-classical-editor-in-my-wordpress-dashboard-anymore/ the theme in use is Lodestar

[simison]

another in p1616175586038800-slack-gutenberg-on-dotcom

Gutenberg: v10.2.1
https://wordpress.com/theme/nucleare

[jordesign]

Another report in #3839734-zen
Gutenberg: v10.2.1
Theme: Baskerville 2

[lakellie]

Another report in #3840473-zen
Theme: Baskerville 2

[WunderBart]

👋 This is now (hot)fixed via D59109-code on Simple sites (v10.2.1). Atomic sites should receive the fix with the v10.3.0 upgrade. cc @simison

[aleone89]

This has been reported here: https://wordpress.com/forums/topic/post-editor-formatting-suddenly-stopped-matching-blog-format/

[rinazrina]

Another report #3848009-zen
Theme: Lovecraft

[swoodipto]

Another report: 28681526-hc / 3872799-zen
Theme: Sela (retired)

[aleone89]

Another report here: https://wordpress.com/forums/topic/%d7%91%d7%93%d7%a1%d7%a7%d7%98%d7%95%d7%a4-%d7%94%d7%aa%d7%a6%d7%95%d7%92%d7%94-%d7%a9%d7%9c-%d7%a2%d7%a8%d7%99%d7%9b%d7%aa-%d7%94%d7%a4%d7%95%d7%a1%d7%98%d7%99%d7%9d-%d7%94%d7%a9%d7%aa%d7%a0%d7%aa/?view=all#post-3663810
Theme: Cerauno

[wpericam]

Another instance in 29132404-hc

Theme: TwoTone

Editor is using a monospaced font for paragraphs which is neither displayed on their site or the theme demo

[ianstewart]

@WunderBart just following up on this issue. It sounds like there was a fix put in place but with the ongoing reports it looks like it's not working? Is that correct?

[simison]

Hm, anything relevant in themes that might be overlaying the original issue? @jeffikus @scruffian

Upstream fix was in WordPress/gutenberg#30080 and from what I can tell it wasn't reverted.

[scruffian]

There's another fix that's needed in Gutenberg: WordPress/gutenberg#30205

[WunderBart]

There's another fix that's needed in Gutenberg: WordPress/gutenberg#30205

@fullofcaffeine, @simison - something we might consider hotfixing on Simple sites?

[fullofcaffeine]

@WunderBart Thanks for the ping. I looked at the PR, and I'm wary of hotfixing it on WPCOM before it gets accepted, see: WordPress/gutenberg#30205 (comment).

[davipontesblog]

@chad1008 this has come up with another user today in chat, this is what they see in the editor:

and this is what they see on front end:

The theme in my case is Rowling, but it seems like this is affecting several themes still. Simple site. Here is the info on my est site where I can replicate the issue:

Gutenberg: v11.7.0
CoBlocks: 2.10.1
Editing Toolkit: 3.17007
WP AMP: 2.0.5

Is there any way this can be fixed in Gutenberg as opposed to the Themes?

[nicolynramos]

Another report of this on simple site: 4382863-zd
Theme: Independent Publisher 2

[formosattic]

+1 4383731-zd-woothemes
Theme: Independent Publisher 2

User reported issue back in February, seems like was fixed for some time, but has popped back.

[formosattic]

Theme: Apostrophe 2

+1 32272678-hc

[formosattic]

Looks like this issue re-appearing is actually Automattic/wp-calypso#57043

I'll let the Theme team triage or close this.

[KokkieH]

Another report in https://wordpress.com/forums/topic/very-small-font-size-again-in-the-editor/?view=all

Theme: Button 2

[chad1008]

Thanks for the ping @davipontesblog. There was a similar report related to the recent Gutenberg release: Automattic/wp-calypso#57043 (which I now see above, as this issue was just mentioned there yesterday ♾️

I was able to reproduce that issue in core, and reported it in WordPress/gutenberg#35730

Where this issue has been quiet since May, I'm wondering if these new cases are actually related to the other, newer issue.

@oandregal has been looking into potential fixes in Gutenberg itself - ccing you here in case these additional impacted themes are helpful to know about.

[cuemarie]

Another report: 4378950-zd-woothemes

Theme: Rowling

[jordesign]

I'm closing this (again) in favor of Automattic/wp-calypso#57043 so we can track instances all in one location. It looks like the fix is being worked on in WordPress/gutenberg#35730

please feel free to re-open if I've done this in error.