Make WordPress Core

Opened 20 months ago

Last modified 7 days ago

#56360 new defect (bug)

Twenty Twenty: Font size issue in H1 Heading block

Reported by: kajalgohel's profile kajalgohel Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.0
Component: Bundled Theme Keywords: needs-patch
Focuses: ui, css Cc:

Description

In Twenty Twenty Theme, when we add Heading block in editor side and change heading level to H1 and applied the background color, it is reflected proper in editor side but it is reflected in front side into the larger font size.

Steps to replicate:
1: Activate the Twenty Twenty Theme
2: Add Heading block
3: Choose H1 heading level
4: Choose background color.
5: View the page/post at editor side
6: Save page/post
7: View the page/post at front side

For better understanding I provide video attachment link.
Video link: https://share.cleanshot.com/hUvyB1LHodVizNDuqxvB

Thanks

Change History (3)

#1 @sabernhardt
20 months ago

  • Keywords close added; needs-patch removed

The H1 font size should be larger in the editor, matching the size of the post title (which is an H1-level heading). The padding can be quite excessive due to relative units with .has-background (GB40144), and hopefully the plugin will fix that and merge the change into Core.

Ultimately, the editor stylesheets need the same patch as #56194 to fix this, removing .wp-block from heading selectors. These tickets are not exactly duplicates, so it may be better to close both as fixed with the same changeset.

#2 @sabernhardt
20 months ago

  • Keywords close removed

The other ticket's patch should fix the main problem, but the heading blocks do not have box-sizing: border-box in the editor as they have on the front end.

#3 @karmatosed
7 days ago

  • Keywords needs-patch added

@sabernhardt based on your last comment are you recommending to add 'needs patch'? I am going to just incase that is the recommendation, we can always remove and progress this ticket some other way.

Note: See TracTickets for help on using tickets.