Opened 3 years ago
Last modified 2 months ago
#56360 new defect (bug)
Twenty Twenty: Font size issue in H1 Heading block
Reported by: |
|
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)
Change History (8)
#2
@
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
@
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.
#4
@
9 months ago
- Keywords has-patch added; needs-patch removed
I created two different patches.
- 56360.has-background.diff only changes the
box-sizing
property with elements that have thehas-background
class, which is the focus of this ticket. - 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
@
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
@
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.
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.