Twenty Twenty: Font size issue in H1 Heading block

[kajalgohel]

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

[sabernhardt]

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.

[sabernhardt]

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.

[karmatosed]

@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]

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

[sabernhardt]

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

[sabernhardt]

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.

[karmatosed]

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.

[karmatosed]

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.

[avinashbhosale]

Test Report

Description

This report validates that the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/56360/56360.has-background.diff

Environment

• WordPress: 6.8.1
• PHP: 8.2.27
• Server: nginx/1.26.1
• Database: mysqli (Server: 8.0.35 / Client: mysqlnd 8.2.27)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty 2.9
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• As mentioned by @karmatosed in comment:5, tested only the first patch provided by @sabernhardt. And I can see that the patch fixes the issue.

Supplemental Artifacts

• Screenshots:
  • Before Patch - ​https://prnt.sc/KOwQmYGGE5Ot
  • After Patch - ​https://prnt.sc/pMLWtdV_1eHE

[huzaifaalmesbah]

Test Report

Description

This report validates the patch 56360.any.diff. I have tested this patch thoroughly, and it works perfectly in my environment. The issue is completely resolved, and the patch functions as expected without any side effects.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/56360/56360.any.diff

Environment

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

Actual Results

1. ✅ The issue is completely fixed after applying the patch.
2. ✅ The patch works well with no problems or side effects.

Screenshots

Before Apply Patch	After Apply Patch ✅

[iamshashank]

Test Report

Description

✅ This report validates that the indicated patch works as expected.

Patch tested: https://core.trac.wordpress.org/attachment/ticket/56360/56360.has-background.diff

Environment

• WordPress: 6.8.2
• PHP: 8.2.27
• Server: nginx/1.26.1
• Database: mysqli (Server: 8.0.35 / Client: mysqlnd 8.2.27)
• Browser: Chrome 138.0.0.0
• OS: macOS
• Theme: Twenty Twenty 2.9
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• The patch changes the size of the block or text in the editor itself.
• Before patch
• ​https://ibb.co/8nt3x6V6
• ​https://ibb.co/G4nYhgKb
• After patch
• ​https://ibb.co/W4L2qtMQ
• ​https://ibb.co/20DgwdDn

[krupajnanda]

We have enough test reports for this ticket. Removing the needs-testing keyword.