Layout Grid Block Content Overlaps in Page/Post Editor When Large Image is Set to 100%

[synora]

Quick summary

The Layout Grid Block content is overlapping in the page/post editor but renders as expected on preview/publish.

Steps to reproduce

1. Create a page or post
2. Insert a 2-column Layout Grid Block with content (images and text)
3. Make sure your Layout Grid has the following settings in place:

4. Notice the content within the Layout Grid overlaps.

What you expected to happen

For the Layout Grid Block content in the editor to not overlap.

What actually happened

Layout Grid Block content overlaps in the editor yet appears fine when you preview the page/post.

Context

Customer report: 4877589-zen

Simple, Atomic or both?

Simple

Theme-specific issue?

No. The customer's theme is Radcliff 2. I can replicate the experience on that theme as well as Skatepark.

Browser, operating system and other notes

Customer's notes: "Mozilla / Firefox 98, but I also tried on a 'private window' AND on Google Chrome"
I can replicate it on Chrome (Version 98.0.4758.109 (Official Build) (x86_64))

Testing was done on simple sites.

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No response

Workaround details

There are no workarounds I'm aware of. We can reassure customers that the content renders as expected in preview/publish.

[edequalsawesome]

This appears to be due to a few of the Image blocks in the Layout Grid on this page -- if they're set to 100% width after being added to the Layout Grid block, they overlap the confines of the Layout Grid. Clicking the Reset button next to the size of the image resolves that, though!

Transferring to the Block Experiments repo!

[jp-imagines]

Came across a similar instance here: 4893057-zd-woothemes
This user had 3 columns instead of 2, and they hadn't selected the 100% image width option. Otherwise, the behavior was exactly the same: the columns overlapped in the editor but not the live site, and clicking the Reset button for each image resolves the weird appearance in the editor.

Tried reproducing this by manually recreating their setup and I wasn't able to, though. Not sure what causes this.

[jromales]

The same is happening for another user at 4943732-zd-woothemes

• Simple site with Pique theme
• Content of two columns within the Layout Grid overlaps
• Displays as expected when previewed or accessing the published page

The issue is fixed when clicking the Reset button on image size (for only a particular image)

[jasmussen]

Thanks for all the reports. It's helpful when you report to include some test content, you can use the Copy all content option from this menu:

It would also be helpful if you could test with the Columns block in addition to the layout grid block. If the problem exists in the Columns block, then it is not an issue with the Layout Grid block.

From what I can tell, this issue is a duplicate of WordPress/gutenberg#38381.

[rickmgithub]

Just had a very similar case but this is related to the file block. Reported it separately but here is a link to the GH - #62767 (comment)

[Greatdane]

Commenting on #62767 as well. While it relates to the file block, it seems to be the embed (such as PDF embed) on the file block that overlaps, rather than the block itself.

[cintacks]

Similar issue here: 4971561-zd-woothemes

Images with specific widths set at the top of each column, create an overlap. This workaround alleviates the issue but isn't intuitive nor fixes the core issue. I was unable to find a fix.

Workaround:

• Hit reset button on each image
• Increase column span as needed

Example: https://d.pr/v/nDRWa5

[alliebbush2]

Another case here: zd: 5300843 HC: 35813346 User would like to be notified when resolved.

[jp-imagines]

Another case in 5309192-zd-woothemes

User had a Layout Grid nested within a Layout Grid: the inner Grid contained only a Paragraph block, the outer Grid contained Paragraphs and a Tiled Gallery, so the above workaround ("reset" button to reset image sizes) doesn't apply.

Removing the nested Layout Grid does work in this instance, though.

Click for example block code

User's content replaced with dummy content:

<!-- wp:jetpack/layout-grid {"addGutterEnds":false,"column1DesktopSpan":3,"column1DesktopOffset":1,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":7,"column2TabletSpan":4,"column2MobileSpan":4,"column3DesktopOffset":5,"align":"full","className":"alignfull column1-desktop-grid__span-3 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-7 column2-desktop-grid__start-5 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-3 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column2-desktop-grid__span-7 column2-desktop-grid__start-5 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2 wp-block-jetpack-layout-gutter__nowrap"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph {"style":{"typography":{"fontSize":"17px"}}} -->
<p style="font-size:17px">Maecenas ut elementum dui. Ut et neque quam. Pellentesque tristique erat vitae nisi ullamcorper, et feugiat nisi commodo. Aliquam quis massa non sapien ultricies consequat eu viverra felis. Cras ex dolor, iaculis ornare dui nec, efficitur iaculis dolor. Fusce nibh erat, maximus non nisi non, sodales luctus erat. In id ultricies turpis. Sed rutrum nulla a feugiat hendrerit. Proin sit amet risus lacus. Aenean aliquet quam eget auctor tincidunt.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Donec ac molestie lorem. Curabitur elit mi, commodo vitae tempor eget, varius sed tellus. Integer non erat justo. Ut imperdiet tellus vitae tortor vulputate consectetur. Fusce gravida dolor sed urna commodo, ac laoreet sem rhoncus. Nulla dapibus luctus quam ac suscipit. Pellentesque blandit metus nec efficitur ornare. Sed sed neque eu magna rutrum tincidunt vitae sed turpis. Proin eros massa, finibus at porta vel, consectetur et ex. Pellentesque mattis blandit ipsum at ornare.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Donec non arcu quis massa aliquet elementum. Cras sed lorem risus. Nunc ultricies velit eu bibendum cursus. In metus erat, porta pretium hendrerit eu, semper in urna. Vestibulum lacinia, leo at tristique tincidunt, dolor lacus fringilla justo, quis pellentesque libero odio vel diam. Proin lobortis semper enim, non rhoncus nisl venenatis a. Suspendisse in leo diam. Ut et cursus ligula. Phasellus commodo ante a ultrices faucibus. Quisque tincidunt nisi eget quam tincidunt laoreet. Cras commodo tellus vel placerat ullamcorper. Etiam non pretium nibh, nec euismod eros. Nulla sollicitudin vulputate ligula et posuere. Vivamus sagittis odio quis mollis consequat. Morbi vestibulum ipsum sed turpis fermentum pellentesque. Morbi at odio risus.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Donec non arcu quis massa aliquet elementum. Cras sed lorem risus. Nunc ultricies velit eu bibendum cursus. In metus erat, porta pretium hendrerit eu, semper in urna. Vestibulum lacinia, leo at tristique tincidunt, dolor lacus fringilla justo, quis pellentesque libero odio vel diam. Proin lobortis semper enim, non rhoncus nisl venenatis a. Suspendisse in leo diam. Ut et cursus ligula. Phasellus commodo ante a ultrices faucibus. Quisque tincidunt nisi eget quam tincidunt laoreet. Cras commodo tellus vel placerat ullamcorper. Etiam non pretium nibh, nec euismod eros. Nulla sollicitudin vulputate ligula et posuere. Vivamus sagittis odio quis mollis consequat. Morbi vestibulum ipsum sed turpis fermentum pellentesque. Morbi at odio risus.</p>
<!-- /wp:paragraph -->

<!-- wp:jetpack/layout-grid {"column1DesktopSpan":6,"column1TabletSpan":4,"column1MobileSpan":4,"column2DesktopSpan":6,"column2TabletSpan":4,"column2MobileSpan":4,"className":"alignfull column1-desktop-grid__span-6 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-6 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-7 column2-desktop-grid__row-1 column1-tablet-grid__span-4 column1-tablet-grid__row-1 column2-tablet-grid__span-4 column2-tablet-grid__start-5 column2-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:paragraph -->
<p>Etiam dictum sit amet lectus in fermentum. Integer nisi ex, pretium id sollicitudin a, pretium nec justo. Sed elementum elit sed tellus rhoncus, sed vestibulum leo dignissim. Mauris a ornare odio. Fusce tincidunt venenatis ipsum a vestibulum. Maecenas luctus ex eget vulputate lobortis. Nulla fringilla fermentum turpis, eget aliquam massa vehicula eu. Duis tortor augue, bibendum cursus diam eget, commodo vestibulum dolor. Suspendisse sit amet odio tempus, tincidunt elit vel, ultricies tellus. Duis faucibus felis felis, in pellentesque elit tincidunt vitae. Maecenas elementum magna turpis, vel dignissim urna interdum sit amet. Pellentesque ullamcorper luctus sapien a dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean vel sapien non augue suscipit sollicitudin non ut nibh. </p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid --></div>
<!-- /wp:jetpack/layout-grid-column -->

<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:jetpack/tiled-gallery {"columnWidths":[["41.57335","58.42665"],["100.00000"]],"ids":[1072,1073,1074,1075,1076]} -->
<div class="wp-block-jetpack-tiled-gallery aligncenter is-style-rectangular"><div class="tiled-gallery__gallery"><div class="tiled-gallery__row"><div class="tiled-gallery__col" style="flex-basis:41.57335%"><figure class="tiled-gallery__item"><img alt="body of water during golden hour" data-height="1253" data-id="1072" data-link="https://wootestjpi.blog/?attachment_id=1072" data-url="https://wootestjpi.blog/wp-content/uploads/2022/06/pexels-photo-189349.jpeg" data-width="1880" src="https://i0.wp.com/wootestjpi.blog/wp-content/uploads/2022/06/pexels-photo-189349.jpeg?ssl=1" data-amp-layout="responsive"/></figure><figure class="tiled-gallery__item"><img alt="landscape photograph of body of water" data-height="1253" data-id="1073" data-link="https://wootestjpi.blog/?attachment_id=1073" data-url="https://wootestjpi.blog/wp-content/uploads/2022/06/pexels-photo-1001682.jpeg" data-width="1880" src="https://i1.wp.com/wootestjpi.blog/wp-content/uploads/2022/06/pexels-photo-1001682.jpeg?ssl=1" data-amp-layout="responsive"/></figure><figure class="tiled-gallery__item"><img alt="photo of a turtle swimming underwater" data-height="1300" data-id="1074" data-link="https://wootestjpi.blog/?attachment_id=1074" data-url="https://wootestjpi.blog/wp-content/uploads/2022/06/pexels-photo-847393.jpeg" data-width="1733" src="https://i1.wp.com/wootestjpi.blog/wp-content/uploads/2022/06/pexels-photo-847393.jpeg?ssl=1" data-amp-layout="responsive"/></figure></div><div class="tiled-gallery__col" style="flex-basis:58.42665%"><figure class="tiled-gallery__item"><img alt="blue and white abstract painting" data-height="1300" data-id="1075" data-link="https://wootestjpi.blog/?attachment_id=1075" data-url="https://wootestjpi.blog/wp-content/uploads/2022/06/pexels-photo-1802268.jpeg" data-width="867" src="https://i0.wp.com/wootestjpi.blog/wp-content/uploads/2022/06/pexels-photo-1802268.jpeg?ssl=1" data-amp-layout="responsive"/></figure></div></div><div class="tiled-gallery__row"><div class="tiled-gallery__col" style="flex-basis:100.00000%"><figure class="tiled-gallery__item"><img alt="view of ocean during golden hour" data-height="1300" data-id="1076" data-link="https://wootestjpi.blog/?attachment_id=1076" data-url="https://wootestjpi.blog/wp-content/uploads/2022/06/pexels-photo-561463.jpeg" data-width="884" src="https://i2.wp.com/wootestjpi.blog/wp-content/uploads/2022/06/pexels-photo-561463.jpeg?ssl=1" data-amp-layout="responsive"/></figure></div></div></div></div>
<!-- /wp:jetpack/tiled-gallery --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

Note regarding the example code above: you may need to reduce the width of the editor window (shrink browser window and/or open List View and block settings) to see the overlapping.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 4877589-zen
• 4893057-zen
• 4943732-zen
• 4971561-zen
• 5309192-zen
• 5940293-zen

[cuemarie]

📌 SCRUBBING : RESULT

• Tested on Simple: Replicated
• Tested on AT: Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• It seems like there are different situations that could be causing the overlap, based on the comments above:

1. Image is set to 100% after setting dimensions of layout grid. - Replicated on AT and Simple
   • Example - https://user-images.githubusercontent.com/27249804/194450534-9fd2e7ec-f8b6-449f-8cba-c0bb14470009.mov
   • Selecting "Reset" on image block returns image to dimensions of the layout grid column, resolving the overlap
2. The example data in @jp-imagines example has a layout grid inside of the first column of their layout grid. - Replicated on AT and Simple
   • Example - https://user-images.githubusercontent.com/27249804/194452150-e7fe6b3f-81b4-406f-ac6b-167fda7e649f.mov
   • Moving the "child" layout grid out from inside the larger layout grid resolves the overlapping issue
3. File block/embedded blocks can break overlap as well. This is reported separately, here: File block also breaking layout grid borders #62767

📌 ACTIONS

• Transferred back to /wp-calypso based on reports above
• Marked as Triaged for Quality Squad review

📌 MESSAGE TO QUALITY SQUAD

• not sure if this needs to be split into more reports, or if the "breaking" above is less of a bug and more about improper nesting / order of operations. Leaving that to the experts!

[filipanoscampos]

Another case, here 5940293-zd-woothemes