Verse Block uses monospace font instead of theme font on some Classic themes

[thekingsprojects]

Quick summary

On sites with certain Classic themes, the Verse block displays text using a monospace font, rather than the theme's default font.

Affected themes include Hemingway Rewritten, Baskerville 2, Twenty Sixteen and Twenty Twenty. Unaffected themes include Dara and Karuna.

On unaffected themes, the pre.wp-block-verse class has several styles attached to it; I'm not sure if these are intended to be identical for all themes, but they all seem to include font-family: inherit. On affected themes like Hemingway, that font-family: inherit is missing and so the block falls back to the pre element's monospace font.

Possibly related to this issue? https://github.com/Automattic/wp-calypso/issues/72416 It was noted as possibly being intentional due to this Gutenberg change: https://github.com/WordPress/gutenberg/pull/46560 Not sure whether this is also intentional.

Steps to reproduce

1. Activate an affected theme, such as Hemingway Rewritten.
2. Create or edit a post or page.
3. Add a Verse block to the page and write some text inside the Verse block.
4. Preview the post/page or save the changes and view the published post/page.

What you expected to happen

The Verse block should use the same font as other default Paragraph blocks in the theme.

What actually happened

The Verse block uses the font that's set for the pre element, usually a monospace font.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

No response

Logs or notes

Reported here: 5944495-zen (Hemingway Rewritten)

It's possible to work around the issue by adding something like this to the theme's Additional CSS:

/*fix monospace verse font | ???-zen/hc*/
pre.wp-block-verse {
    font-family: inherit;
}

However, this will only work on sites with a Premium plan or higher. The reporting user is on Personal and so can't use this workaround by default.

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 5944495-zen
• [ ] -zen
• [ ] 6242148-zen
• [ ] 6732000-zen
• [ ] 8403995-zen

[vinnykaur]

📌 SCRUBBING : RESULT

• Tested on Simple - Replicated
• Tested on AT - Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• I can replicate with Hemingway Rewritten theme on both Simple and Atomic sites.

📌 ACTIONS

• Marked as Triaged for Quality Squad review.

[ariel-maidana]

Another case here: 6242148-zd-woothemes Simple site with Nucleare theme. Please let the user know once the issue is fixed.

[dsas]

Another case here: 6732000-zd-a8c

Simple site using Twenty Thirteen, I've recommended the user change themes as they're also affected by https://github.com/Automattic/themes/issues/6999

[tanjoymor]

Another case here: 8403995-zd-a8c

Simple site using Hemingway Rewritten.

I've added the Custom CSS product to this site to apply the above CSS workaround since this bug has been open for over a year.