Opened 3 years ago
Closed 2 years ago
#56049 closed defect (bug) (fixed)
Twenty Twenty: Width discrepancy between editor and preview when nested in cover block
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 6.1 | Priority: | normal |
Severity: | minor | Version: | 6.0 |
Component: | Bundled Theme | Keywords: | has-patch has-screenshots |
Focuses: | 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 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.
Attachments (6)
Change History (19)
#1
@
3 years ago
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
#3
@
3 years ago
Removing max-width: 100% from .wp-block-cover h2 seems to solve the issue. I have attached a patch.
#5
@
3 years ago
- Keywords needs-testing removed
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
- Clone WordPress-develop using
git@github.com:WordPress/wordpress-develop.git
- Setup WordPress using this instruction
- 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?
#6
@
3 years ago
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
#7
@
3 years ago
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
- Clone WordPress-develop using
git@github.com:WordPress/wordpress-develop.git
- Setup WordPress using this instruction
- 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.
This ticket was mentioned in Slack in #core by tahmidulkarim. View the logs.
3 years ago
#10
@
2 years ago
- Keywords changes-requested added
The patch needs to be reported on the RTL stylesheet as well.
Twenty Twenty: heading nested inside cover width discrepancy in Editor