Make WordPress Core

#56050 closed defect (bug) (fixed)

Twenty Twenty-One: heading nested inside cover width discrepancy in Editor

Reported by: mrfoxtalbot's profile mrfoxtalbot Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: minor Version: 6.0
Component: Bundled Theme Keywords: has-patch has-screenshots
Focuses: ui, css Cc:

Description

Headings inside a cover block appear too wide in the editor, but look fine later in the published post.

To reproduce

  • Create a new post or a page. Add a cover block, set the cover block to Full width.
  • Inside the cover block add a headings block.
  • For comparison, add a paragraph block below the heading.
  • Notice the different width and alignment between the two.
  • Save draft and go preview the post/page. Notice the paragraph and heading are both the same width.
  • A similar thing happens when headings block is nested in the group block set to wide or full width.

Expected behavior

For the editor to match the preview.

This bug was reported originally here https://github.com/WordPress/gutenberg/issues/25937

Attachments (6)

Screen Shot on 2022-06-23 at 11:23:30.png (3.0 MB) - added by mrfoxtalbot 20 months ago.
Twenty Twenty-One: heading nested inside cover width discrepancy in Editor
Screen Shot on 2022-06-23 at 11:23:14.png (4.7 MB) - added by mrfoxtalbot 20 months ago.
Twenty Twenty: heading nested inside cover width discrepancy. Public view
#56050.patch (485 bytes) - added by kajalgohel 20 months ago.
Added patch for solving the issue by removing max-width; inherit;
Capture d’écran 2022-09-14 à 21.51.28.png (3.3 MB) - added by audrasjb 18 months ago.
front end
Capture d’écran 2022-09-14 à 21.46.09.png (4.1 MB) - added by audrasjb 18 months ago.
Before patch
Capture d’écran 2022-09-14 à 21.50.37.png (3.9 MB) - added by audrasjb 18 months ago.
After patch: looks better!

Change History (14)

@mrfoxtalbot
20 months ago

Twenty Twenty-One: heading nested inside cover width discrepancy in Editor

@mrfoxtalbot
20 months ago

Twenty Twenty: heading nested inside cover width discrepancy. Public view

#1 @mrfoxtalbot
20 months ago

There is similar issue affecting Twenty Twenty-One here: #56049

Last edited 19 months ago by SergeyBiryukov (previous) (diff)

@kajalgohel
20 months ago

Added patch for solving the issue by removing max-width; inherit;

#2 @kajalgohel
20 months ago

  • Focuses ui css added
  • Keywords has-patch needs-testing added

#3 @harshvaishnav
20 months ago

This issue was resolved by the patch given by @kajalgohel .

Version 0, edited 20 months ago by harshvaishnav (next)

#4 @harshvaishnav
20 months ago

  • Keywords needs-testing removed

#5 @SergeyBiryukov
19 months ago

  • Milestone changed from Awaiting Review to 6.1

This ticket was mentioned in Slack in #core by sergey. View the logs.


19 months ago

@audrasjb
18 months ago

After patch: looks better!

#7 @audrasjb
18 months ago

  • Keywords has-screenshots added
  • Owner set to audrasjb
  • Status changed from new to accepted

This patch fixes the issue, but it doesn't update the related SASS file accordingly.
I'll update it directly in the final commit :)

#8 @audrasjb
18 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

Fixed by [54164].

For some reason, Trac didn't catch up the changeset.

Note: See TracTickets for help on using tickets.