Open synora opened 2 years ago
edequalsawesome
commented
2 years ago 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
commented
2 years ago 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
commented
2 years ago The same is happening for another user at 4943732-zd-woothemes
The issue is fixed when clicking the Reset button on image size (for only a particular image)
jasmussen
commented
2 years ago 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 https://github.com/WordPress/gutenberg/issues/38381.
rickmgithub
commented
2 years ago 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 - https://github.com/Automattic/wp-calypso/issues/62767#issue-1204359559
Greatdane
commented
2 years ago Commenting on https://github.com/Automattic/wp-calypso/issues/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
commented
2 years ago 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:
Example: https://d.pr/v/nDRWa5
alliebbush2
commented
2 years ago Another case here: zd: 5300843 HC: 35813346 User would like to be notified when resolved.
jp-imagines
commented
2 years ago 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.
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.
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.
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.
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.
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.
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[bot]
commented
2 years ago Support References
This comment is automatically generated. Please do not edit it.
cuemarie
commented
2 years ago 📌 SCRUBBING : RESULT
📌 FINDINGS/SCREENSHOTS/VIDEO
📌 ACTIONS
/wp-calypso based on reports above📌 MESSAGE TO QUALITY SQUAD
filipanoscampos
commented
1 year ago Another case, here 5940293-zd-woothemes
Quick summary
The Layout Grid Block content is overlapping in the page/post editor but renders as expected on preview/publish.
Steps to reproduce
Create a page or post
Insert a 2-column Layout Grid Block with content (images and text)
Make sure your Layout Grid has the following settings in place:
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.