Twenty Nineteen: full width blocks have horizontal scrollbar in the iframe editor

[smit08]

In Twenty Nineteen theme when I am using the blocks which has the full width setting available. So when we click on the full width button to make the block as full width then the block is facing issue like overlapping to the sidebar and having horizontal scrollbar in bottom.

Steps to reproduce:

1. Activate Twenty nineteen theme.
2. Add the block like cover, media and text, image etc.
3. click on the full width button to apply full width to the block. On front side the full width will apply and everything will work fine. But in editor side the horizontal scroll bar is appearing at bottom.

Video of Issue: ​https://share.cleanshot.com/dPTHJ23BJxZdLh5K8781

At screen widths of at least 768px (tablet size), Twenty Nineteen should have a max-width and side margins for content in the post editor. This applies that style to the new .block-editor-iframe__body class.

Trac 59449

[sabernhardt]

The full width issue was already reported for the Separator block (ticket:59203#comment:2). The iframe body should have a max-width and margins on larger screens.

@sabernhardt Could you please share screenshot before after the changes?

Before: The title and a Heading block almost touch the side edge; a full-width Cover block is is wider than the editor canvas, which results in a horizontal scrollbar.

With PR 5312: Standard blocks have a margin; the full-width Cover block is the same width as the editor canvas.

Environment: WordPress 6.4-trunk-56727, Gutenberg 16.6.0, Windows 10, Firefox 117.0.1
Editor area: 1074 pixels by 643 pixels (needs to be at least 782 wide to see the scrollbar)

[darshitrajyaguru97]

Test Report for https://core.trac.wordpress.org/ticket/59449

Environment:
===========
PHP: 8.1.23
WordPress: 6.3.1
Browser: Chrome
Theme: Twenty Nineteen

Steps:
=====
Activate Theme: Twenty Nineteen
Add Cover Block with Text
Apply full-width to cover block

Screenshots:
==========
Before Patch Screenshots:
Backend : ​https://prnt.sc/v8RJM6u8L9F7

After Patch Screenshots:
Backend : ​https://prnt.sc/s6QaP2RI2rMR

After Patch Result:
===============
Full-width applied to the cover block at the backend side
https://core.trac.wordpress.org/ticket/59449 Patch is Working fine as expected.

[oglekler]

This ticket was discussed during bug scrub.

The existing test report doesn't specify the patch being tested, so it's better to have another one.

@smit08 please review the patch. Thank you!

Add props: @mukesh27

[poena]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/5312

Environment

• OS: macOS 14.0
• Web Server: nginx/1.23.1
• PHP: 7.4.30
• WordPress: 6.4-alpha-56267-src
• Browser: Chrome v. 117.0.5938.132
• Theme: Twenty Nineteen
• Active Plugins: None

Actual Results

• ✅ Issue resolved with patch.

[smit08]

Thanks @oglekler for discussing the ticket in bug scrub. I tested the patch and issue is resolved after applying patch.

[shailu25]

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/5312

Environment:

WordPress - 6.4-beta2
OS - Windows
Browser - Chrome
Theme: Twenty Nineteen
PHP - 8.0.18
Active Plugin - None

Actual Results:

• ✅ Patch is working as Expected & Horizontal Scroll Issue is Resolved After applying patch

Screenshots:

Before Patch : ​https://prnt.sc/9wp9-nktD6vu
After Patch : ​https://prnt.sc/lcTIk_NsjTLz

[SergeyBiryukov]

In 56832:

Twenty Nineteen: Add margins to editor iframe content.

At screen widths of at least 768px (tablet size), Twenty Nineteen should have a max-width and side margins for content in the post editor.

This commit applies that style to the new .block-editor-iframe__body class, resolving an issue where full-width blocks had a horizontal scrollbar in the editor iframe.

Props sabernhardt, smit08, nidhidhandhukiya, mukesh27, darshitrajyaguru97, oglekler, poena, shailu25, nicolefurlan.
Fixes #59449.

Thanks for the PR! Merged in r56832.