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.

[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?