Twenty Twenty-One: Preformatted block font size is smaller in the editor than on the front end

[viralsampat]

Hello,

I have reviewed the "Preformatted block" and found that its font-size is not same in editor & front-end sides. I have checked this issue for "Twenty Twenty" and "Twenty Twenty-One" themes. I think that it should be same on both editor & front-end sides.

Here, I have attached its screenshots.

Environment info:

---

WordPress version: WordPress 6.5.2 running,
Themes:

• Twenty Twenty-One Version: 2.2
• Twenty Twenty Version: 2.6

Browser: Google Chrome, Version 123.0.6312.107 (Official Build) (arm64)
Device: MacBook Air M1
OS: macOS 14.4.1 (23E224)
Gutenberg plugin: Version 18.1.0

Thanks,

[viralsampat]

Twenty-one Back-end

[viralsampat]

Twenty-one Front-end

[viralsampat]

TwentyTwenty Back-end

[viralsampat]

TwentyTwenty Front-end

[karmatosed]

I am still seeing a difference in this. For example, in Twenty Twenty-One, there are 16px and 20px on the front.

[sabernhardt]

For the patch:

• I agree with changing the size to 0.9em in Twenty Twenty's editor styles to match the front.
• In Twenty Twenty-One, changing the value to 1em makes the block's font size equal to the front. Another possibility is removing that line entirely.

[sabernhardt]

Twenty Twenty is also missing the border and padding, so that should be in a separate ticket. (#61845)

[mayur8991]

Patch Report - https://core.trac.wordpress.org/attachment/ticket/60993/60993.patch

Environment

WordPress - 6.5
OS - Windows
Browser - Firefox
Theme: Twenty Twenty-One Version: 2.2
PHP - 8.1.23

Before

• Backend - ​https://prnt.sc/OcySMReYO22f
• Frontend -​https://prnt.sc/xvyZUn7lQkVg

After Patch

• Backend - ​https://prnt.sc/43LuBjZmjgrS
• Frontend - ​https://prnt.sc/yfT-9BuoItje

Result : Same font sizes displaying now for Preformatted block

[karmatosed]

I would like to see if we could refine this a bit more, as @sabernhardt recommended.

In Twenty Twenty-One, changing the value to 1em makes the block's font size equal to the front. Another possibility is removing that line entirely.

What does that result in? In my testing I think it could work and give us a much simpler solution.

[karmatosed]

@nidhidhandhukiya are you able to consider changes to this patch?

Trac ticket: https://core.trac.wordpress.org/ticket/60993

This PR removes the font-size declaration from the pre.wp-block-preformatted selector in _editor.scss, as suggested in the ticket.
An alternative solution could be to update the font size to use var(--global--font-size-base) instead of the current var(--global--font-size-xs).

### Editor

### Frontend

[rishabhwp]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 138.0.0.0
• OS: macOS
• Theme: Twenty Twenty-One 2.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ The issue is reproducible in the Twenty Twenty-One theme.
2. ❌ The issue is not reproducible in the Twenty Twenty theme. It appears to have been resolved in that theme.

Additional Notes

• The issue, tracked in #61845, appears to have addressed the font size inconsistency between the editor and front-end for the preformatted block in the Twenty Twenty theme.

• As the ticket had become stale, I have submitted a PR with the requested changes to address the issue in the Twenty Twenty-One theme.

Supplemental Artifacts

Twenty Twenty theme (Editor)

Twenty Twenty theme (Frontend)

Twenty Twenty-One theme (Editor)

Twenty Twenty-One theme (Frontend)