Make WordPress Core

Opened 6 weeks ago

Last modified 5 weeks ago

#60993 new defect (bug)

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

Reported by: viralsampat's profile viralsampat Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch
Focuses: ui, css Cc:

Description

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,

Attachments (5)

twentyone_back_end.png (583.4 KB) - added by viralsampat 6 weeks ago.
Twenty-one Back-end
twentyone_front_end.png (460.3 KB) - added by viralsampat 6 weeks ago.
Twenty-one Front-end
twentytwenty_back_end.png (652.0 KB) - added by viralsampat 6 weeks ago.
TwentyTwenty Back-end
twentytwenty_front_end.png (591.8 KB) - added by viralsampat 6 weeks ago.
TwentyTwenty Front-end
60993.patch (1.9 KB) - added by nidhidhandhukiya 5 weeks ago.

Change History (9)

@viralsampat
6 weeks ago

Twenty-one Back-end

@viralsampat
6 weeks ago

Twenty-one Front-end

@viralsampat
6 weeks ago

TwentyTwenty Back-end

@viralsampat
6 weeks ago

TwentyTwenty Front-end

#1 @karmatosed
5 weeks ago

  • Keywords needs-patch added; dev-feedback removed

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

#2 @sabernhardt
5 weeks ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to Future Release
  • Version changed from 6.5 to 5.6

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.

#3 @sabernhardt
5 weeks ago

  • Summary changed from Preformatted block font size issue. to Twenty Twenty-One: Preformatted block font size is smaller in the editor than on the front end

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

#4 @mayur8991
5 weeks ago

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

After Patch

Result : Same font sizes displaying now for Preformatted block

Note: See TracTickets for help on using tickets.