Twenty Twenty: Width discrepancy between editor and preview when nested in cover block

[mrfoxtalbot]

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 with an image background, 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.

[mrfoxtalbot]

Twenty Twenty: heading nested inside cover width discrepancy in Editor

[mrfoxtalbot]

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

[mrfoxtalbot]

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

There is similar issue affecting Twenty Twenty-One here:
https://core.trac.wordpress.org/ticket/56050

[tahmidulkarim]

Removing max-width: 100% from .wp-block-cover h2 seems to solve the issue. I have attached a patch.

[tahmidulkarim]

Patch created

[NomNom99]

Test Report

Environment

WordPress: 6.1-alpha-53344-src
Browser: Chrome, version 104.0.5112.79 (Official Build) (x86_64)
Operating System: macOS Monterey 12.4

Steps to test

1. Clone WordPress-develop using git@github.com:WordPress/wordpress-develop.git
2. Setup WordPress using ​this instruction
3. Pull the changes of this patch using the command npm run grunt patch:56049

Results

• ✅ The patch is working as intended but only for the Twenty Twenty theme.
• ❌ Doesn't work for Twenty Twenty-One theme.

Should the fix for Twenty Twenty-One be a separate issue or would it be a good idea to fix in here?

[tahmidulkarim]

Thank you for testing the patch @NomNom99. The patch is intended to work only for the Twenty Twenty theme. For Twenty Twenty-One theme there is already a separate issue raised here: #56050

[NomNom99]

Awesome! Thanks for the info @tahmidulkarim

Test Report

Environment

WordPress: 6.1-alpha-53344-src
Browser: Chrome, version 104.0.5112.79 (Official Build) (x86_64)
Operating System: macOS Monterey 12.4

Steps to test

1. Clone WordPress-develop using git@github.com:WordPress/wordpress-develop.git
2. Setup WordPress using ​this instruction
3. Pull the changes of this patch using the command npm run grunt patch:56049

Results

• ✅ The patch is working as intended for the Twenty Twenty theme.

[audrasjb]

The patch needs to be reported on the RTL stylesheet as well.

[audrasjb]

Front end

[audrasjb]

Before patch

[audrasjb]

After patch: fixed!

[audrasjb]

Alright the patch works fine. I'm removing the changes-requested keyword since I'll add the RTL change directly during commit ;)

[audrasjb]

In 54163:

Twenty Twenty: Fix Heading Block alignment when nested in Cover Block.

This brings consistency between block editor and front-end rendering.

Props mrfoxtalbot, tahmidulkarim, NomNom99, audrasjb.
Fixes #56049.