Make WordPress Core

Opened 3 years ago

Last modified 2 months 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: has-patch needs-testing
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

Attachments (2)

56360.has-background.diff (1.1 KB) - added by sabernhardt 9 months ago.
applies box-sizing to elements with the .has-background class (only)
56360.any.diff (1.5 KB) - added by sabernhardt 9 months ago.
applies default box-sizing to any elements in the editor, to reflect the front end

Download all attachments as: .zip

Change History (8)

#1 @sabernhardt
3 years 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
3 years 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
10 months 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.

@sabernhardt
9 months ago

applies box-sizing to elements with the .has-background class (only)

@sabernhardt
9 months ago

applies default box-sizing to any elements in the editor, to reflect the front end

#4 @sabernhardt
9 months ago

  • Keywords has-patch added; needs-patch removed

I created two different patches.

  1. 56360.has-background.diff only changes the box-sizing property with elements that have the has-background class, which is the focus of this ticket.
  2. Twenty Twenty's front-end styles set a default box-sizing for all elements and pseudo-elements, and the editor could have something similar. 56360.any.diff might make elements' width and padding accurate more often in the editor, though that would dramatically increase the scope of this ticket.

#5 @karmatosed
2 months ago

  • Keywords needs-testing added

I feel like keeping to the scope of the ticket in the first patch makes sense @sabernhardt. We can always have another ticket to iterate later on. I will progress through testing that now.

#6 @karmatosed
2 months ago

I can replicate that I am seeing the front be different to editor. In testing for example the front was 58rem and the back was 48px. Unless I am missing something and that absolutely could be the case the first patch doesn't fix that.

I would appreciate someone else also testing for me though.

Note: See TracTickets for help on using tickets.