Mobile issues for Vesta design in editor

[razvanpapadopol]

Steps to reproduce

1. Starting at URL: https://wordpress.com/new
2. Select Vesta design: https://cloudup.com/cvrIpTeKMry
3. Complete the flow to create a new site.
4. Open the editor on mobile.

What I expected

• Design to be displayed as in preview

What happened instead

• Content seems to be cropped

OS / Browser / Device

• Android / Google Chrome / Samsung Galaxy s10
• MacOS / Google Chrome ( window < 560px wide)

[jeyip]

@razvanpapadopol I'm still having a bit of trouble reproducing the issue. I followed these steps:

1. Starting at URL: https://wordpress.com/new
2. Select Vesta design: https://cloudup.com/cvrIpTeKMry
3. Complete the flow to create a new site.
4. Open the editor on mobile.

I created this website hello309119077.wordpress.com. I checked mobile viewport widths in the chrome browser. I also opened the site on my iphone 8. The mobile layouts in both instances appear to behave as expected with a single column layout. 🤔

[razvanpapadopol]

I was able to reproduce now in wp-admin of the site you've created so we know this is not user-related. Everything looks fine until the viewport is less than 560px wide.

I've also updated the issue with OS / Browser / Device section.

[yansern]

Most likely something to do with [data-align=full], margin-left: -30px and also suspect if .wp-block-jetpack-layout-gutter__nowrap is somehow related.

[alshakero]

I investigated this and it seems that some themes use the experimental Layout Grid. Layout grid accepts a prop called "displayType: "Desktop" | "Mobile" | Tablet". It uses this prop to determine the layout.

This means that the screen width isn't taken into account, rather, the display type you select when you click "Preview" button in the top right corner of the editor in Desktop mode.

Since we're hiding the display type picker in mobile anyways, I think we should change the "displayType" value to "Mobile" in mobile devices. Currently, display type is fetched from the core/edit-post store and isn't tied in any way to the screen size.

[roo2]

This issue in the Layout Grid seems to be related. Automattic/block-experiments#152

It looks like the setting that effects it is the __experimentalGetPreviewDeviceType used in edit.js this value does always seem to be set to desktop. And in fact edit.js is not used in the site preview, so there is no point in using this variable in edit.js.

I did notice that even when I manualy changed __experimentalGetPreviewDeviceType to Mobile, the page content of this vesta template still overflowed.

So there seem to be two issues at play here.

[roo2]

Aside from the columns not rendering in mobile mode, the reason that the content is pushed off the screen is actually related to the has-background class. the has-background triggers some style rules to take effect which push the content out of the normal padding an right to the edge of the screen on desktop. However, on mobile the padding is smaller, so the content is pushed right out of the screen.

I'll raise this issue upstream in gutenberg.

But for the Vesta design, why does it need a background color? the background color is set to white, which is the default background color anyway...

I've made a diff to remove background color from Vesta's homepage template which fixes the theme's editor experience on Mobile. D54150-code

[roo2]

I created a PR to fix this in a8c themes Automattic/themes#2909

[github-actions]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.

[roo2]

fixed in core here WordPress/gutenberg@50cdfbe#diff-1a9996754d0946dc5f83e38ec6b5e6bc139ec4d16690ec8c9d4b5402175bc17b