Slideshow block broken when used within Layout Grid block

[philnick206]

Steps to reproduce

1. Add a Layout Grid block to a page with a single column
2. Add a Slideshow block within the Layout Grid block and choose two images from the Media Library to display

What I expected

Slideshow block would display properly.

What happened instead

Slideshow block displays as super-wide section of white-space in the editor and on the page. Causes the editor experience to be hard to use for content past the block.

Browser / OS version

Firefox 73 on macOS (Catalina)

Screenshot / Video

Context / Source

2774573-zen

user-report

[stale[bot]]

This issue has been marked as stale and will be closed in seven days. This happened because:

• It has been inactive in the past 9 months.
• It isn't a project or a milestone, and hasn’t been labeled `[Pri] Blocker`, `[Pri] High`, `[Status] Keep Open`, or `OSS Citizen`.

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.

[synora]

The slideshow displays fine for me in the editor-so I'm unable to replicate this.

@lancewillett I did notice however that the slideshow jumps when added on Chrome Version 88.0.4324.96 (Official Build) (x86_64)/Big Sur (11.1): https://d.pr/v/Qtaycl

No jumping effect was seen on Safari(14.0.2)

[adelineyaw]

User report: 4722807-zd-woothemes

For further context/testing, the user report was originally mentioned here: pd4QKa-rX-p2

[sajmes]

Please notify this user when this is fixed. For now, they are working around it by using a Columns block instead.

4738719-zd

[mriyazuddin]

4727185-zd

[tellisbethel]

User report: 4749786-zd-woothemes

Additional details: The Slideshow block, when placed into a Group Row block or a Layout Grid Column block, is so wide it's disabling the toolbar in the Editor, not displaying images, and preventing the user from selecting any other blocks that lie on the same visual row.

Workaround: Advised user to use the Columns block, but they have seven Layout Grids with slideshows, text and buttons to fix so it might take some time to adjust everything.

[chiape]

4749546-zd

As a workaround, I asked the user to use the Columns Block instead, as mentioned above!

[1dr0]

4765799-zd

Encountered above. Workarounds tested that work:

Columns block > Slideshow block Group block > Columns block > Slideshow block Group block > Row block > Slideshow block

[carinapilar]

Helped fix some pages with this issue on 4760957-zd-woothemes - user complained that the content in the editor was gone, while it was just not showing. It also breaks the List View sometimes, so it's hard to navigate and delete the blocks.

[jromales]

Another report: 4786538-zd-woothemes

[louinel]

Another case: #4787795-zen

[arunsathiya]

Same issue on 4786962-zen. Advised to get rid of Layout Grid block in favor of a Columns block as the Layout Grid block isn't serving much purpose in this setup.

[Jaykame]

Replicate same issue: 4789584-zen

[tellisbethel]

Another case here: 4789463-zd-woothemes Asked user to move their items to a Columns block instead of the Layout Grid block.

[carinapilar]

Another case on 4790028-zd-woothemes

[kspilarski]

Same case in 4795977-zd.

[Greatdane]

Bring over reports from duplicate issue:

4792060-zd-woothemes 34248460-hc

[Greatdane]

Another report: 4796756-zd-woothemes

[devNigel]

Another report: 29620850-hc Follow up: 4800911-zen

[devNigel]

Changed priority to Blocker since it affects the functioning of the editor. I am also getting users asking for refunds since they have been waiting for over a week already.

User report: 34255092-hc Followup: 4804497-zd-woothemes

[sanjeev00733]

Another report in #4808746-zen

[jromales]

Another one on 4810396-zd-woothemes I shared them the workaround; to use Columns block instead of Layout Grid

[csabarakasz]

467449-zd-woothemes

Bringing this over from duplicated bug report.

[Abdul-Elsayed]

Another report in #4828937-zen

[edequalsawesome]

Another report 4839558-zen

[rw-ye]

Another report: 4847705-zd-woothemes

[ahmadbaig1]

Another- 4843385-zen

[JessBoctor]

Had a report of this in 31318564-HC

Provided the customer with the Columns Block workaround

[druesome]

Another report: #4870627-zd-woothemes

[kylemcph]

Another report: #4882584-zen

[sanjeev00733]

Another report in #28657010-hc

[louinel]

New case here: 4895797-zen

[1dr0]

Another new one over here: 4903431-zen Provided columns block as the workaround.

[Robertght]

This happens with FSE, having a slideshow block inside a page template generates the same width error on the block.

Using the workaround from here does its thing nicely.

cc @Automattic/cylon in case you can take a closer look.

[1dr0]

Another one here: 4916326-zen

Tested and provided the workaround by using Columns block.

[yansern]

A quick investigation shows that it's caused by a grid blowout. https://css-tricks.com/preventing-a-grid-blowout/

Swiper's resize observer updates the width of the slideshow wrapper when there is a change in the width, but the grid expands depending on the width of the content, which triggers the resize observer to expand further, repeating the vicious cycle until the width could not be expanded anymore.

[yansern]

Also reported in the Swiper library https://github.com/nolimits4web/swiper/issues/2914.

[yansern]

Fix is ready here. https://github.com/Automattic/jetpack/pull/23854

[vajrasar]

Hi everyone 👋

Just a quick note to let you all know @Automattic/dotcom-triage-pa-group have finished following up with affected users reported in this thread. Thanks for the reports, please let us know here if you see any future recurrence of the issue.

[Jaykame]

Opening as I have a user with this issue in 5666258-zen which does not display the slideshow on the site editor index template. Provided the workaround of putting the slideshow in Group Block which shows the slideshow. I saved and removed the group block later and the slideshow remains working.

[github-actions[bot]]

Support References

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

• [ ] 2774573-zen
• [ ] 4722807-zen
• [ ] 4738719-zen
• [ ] 4727185-zen
• [ ] 4749786-zen
• [ ] 4749546-zen
• [ ] 4765799-zen
• [ ] 4760957-zen
• [ ] 4786538-zen
• [ ] 4787795-zen
• [ ] 4786962-zen
• [ ] 4789584-zen
• [ ] 4789463-zen
• [ ] 4790028-zen
• [ ] 4795977-zen
• [ ] 4792060-zen
• [ ] 4796756-zen
• [ ] 4800911-zen
• [ ] 4804497-zen
• [ ] 4808746-zen
• [ ] 4810396-zen
• [ ] 467449-zen
• [ ] 4828937-zen
• [ ] 4839558-zen
• [ ] 4847705-zen
• [ ] 4843385-zen
• [ ] 4870627-zen
• [ ] 4882584-zen
• [ ] 4895797-zen
• [ ] 4903431-zen
• [ ] 4916326-zen
• [ ] 5666258-zen
• [ ] 7323357-zen