Wp-calypso: Editor: Content is cut in half in the editor

[ktyfuller604]

Steps to reproduce

Shorter steps to reproduce:

• Insert a columns block
• Add an image

Using Chrome:

1. Starting at URL: https://wordpress.com/start/
2. Select Business on "What kind of site are you building"
3. Go through the remainder of the signup flow and select "start with a free site" (other options don't matter)
4. A new home page is created with some default blocks
5. Load new home page in the editor, and resize the browser window (error occurs between 1100 and 1500 wide).

What I expected

Placeholder content fully loads in all browser sizes

What happened instead

The blocks get cut in half on certain browser window sizes. Video: https://cld.wthms.co/yWrezy

Exiting out and returning to the editor the home page results in the same issue.

Browser / OS version

Chrome / Mac

Screenshot / Video

Video: https://cld.wthms.co/yWrezy

Context / Source

For those that don't know the browser size is the source of the issue, it looks like the content didn't load properly and would not know to resize the browser to see all of it.

user-report

[tijosh]

I helped a user recently who had the same issue, but I'm not sure how they arrived at the problem.

Summary

They had a page which included a columns block that had 6 columns and an image in each column. With another block added below the columns block, the page editor view was breaking in Chrome.

See this video: https://cld.wthms.co/nvfKk0

What I Did

I exported the site's contents and imported into a test site. The problem persisted on the page that was imported, but I cannot recreate this problem manually by simply adding a columns block with 6 columns on a fresh blank page.

Context/Source

11305879-hc

[adelineyaw]

Just noting here that 2118566-zen has replied that it's no longer a problem for them but keeping this issue open as @ktyfuller604 can still reproduce the error.

[kathleenjross]

Similar issue in 2122759-zen

I feel like I have seen this issue a few times as well, related to the new Business themes.

[gwwar]

See related core issue in https://github.com/WordPress/gutenberg/issues/14652

[gwwar]

I think this is a Chrome rendering bug. Folks also noted that this affects the media and text block so there might be something a bit off with how the resizer controls are implemented.

Turning Hardware Acceleration on and off doesn't appear to affect this. (Broken in both cases).

[gwwar]

@glendaviesnz I believe this will need to be fixed upstream in the Gutenberg project. So feel free to target a PR to that repo.

[gwwar]

https://github.com/WordPress/gutenberg/pull/16325

[glendaviesnz]

This will be fixed in the next Gutenberg update.

[isocialtish]

Excited this will be fixed in the next Gutenberg Update!

I had a very similar issue (only it wasn't using columns) so I wanted to note it here as well.

Steps to reproduce

1. Starting at URL: https://wordpress.com/page/skyenatureblog.com/1081
2. In the right sidebar, I clicked "Try the new block Editor"
3. When the page loaded, half the screen was blank

Screenshot / Video

https://cld.wthms.co/lWt1Rn

Video w/ console errors:

https://cld.wthms.co/eCJCSd

Browser / OS version

Mac / Chrome Version 75.0.3770.100
Mac / Ghost Version 2.1.0.7
Mac / Firefox Version 67.0.4 (it was working correctly in Firefox- didn't see the error there)

[supernovia]

Noting I've seen this myself and it goes away when I move the window :/ That's cool that it'll be fixed though!

[supernovia]

one more here: https://en.forums.wordpress.com/topic/page-format-7/
chrome / windows

[sophiegyo]

Just noting that I've noticed it myself on my Windows computer using Chrome, and we also had a report from a user in 2131828-zen who had this browser/computer info:
Browser - Chrome Version 75.0.3770.100
Operating system - Windows NT 10.0
Screen size - 1366 x 768
https://whatsmybrowser.org/b/XYP6MVQ

[gwwar]

This will be fixed when v6.1 of the Gutenberg plugin is published. We'll try another attempt to get that on WordPress.com on July 10th when it's released.

[susanjanec]

Report from user in 2144538-zen.

They had this browser/computer info:
Chrome 75 on Windows 10
Internet Explorer 11 on Windows 10

[msilbers]

I had a report of this from a user in #13894213-hc
who is unable to edit their homepage (their only page). They are using Chrome.

They were able to update their site in Safari.

[lizswafford]

Similar report in #13166098-hc
Only related to the Chrome browser.
Chrome 75.0 on Windows 10.0.0

[gwwar]

Closing this out since v6.1.1 landed in https://github.com/Automattic/wp-calypso/issues/34386