Block Editor :: Layout Grid :: Image Block :: breaks with preview tool on Tablet and phone.

[mdtanjid0]

Quick summary

If we take a Layout Grid Block, and Image blocks within the Layout Grid, it breaks with the Preview tool when we check that on Tablet and Phone preview only on Editor.

It works fine on the front end.

I have created a short video:

Screen.Capture.on.2022-03-24.at.18-19-27.mp4

Steps to reproduce

1. Take a Grid layout.
2. Select 3 columns, for example.
3. And then add Images on the Gird layout blocks.
4. Check with the Preview tool on Tablet and Phone.

What you expected to happen

It should show the same as the frontend; here is the expected result:

Tablet:

Phone

What actually happened

It breaks on small devices on the Editor.

Tablet

Phone

Context

4888407-zen

The user started seeing this week. They said that it was working before as expected.

Simple, Atomic or both?

Simple

Theme-specific issue?

No response

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Most (> 50%)

Available workarounds?

No but the platform is still usable

Workaround details

No response

[Robertght]

I wanted to note that this happens with the columns block as well, especially with the images which are resized through the pointers.

Another ref: WordPress/gutenberg#38381 (comment)

[manuelrebollo-a11y]

I found a very similar issue on a customer's site using theme Shawburn: 32165136-hc

The only difference is the content structure. List View shows Columns > Column > Blog Posts.

I reproduced the issue on a test site using the same theme, while the issue is not present with Twenty Twenty-Two:

[candy02058912]

This ticket is old, so I did a retest on Simple and Atomic sites, with the Columns and Layout Grid, and the issue isn't reproducible anymore.

Layout Grid

layout.mp4

Columns

layout.2.mp4

Hence, closing it as fixed.