Slideshow Block not visible when added inside Row block

[devNigel]

trafficstars

Quick summary

Slideshow Block is not visible when added inside Row block. I was able to reproduce the issue on Simple and Atomic sites.

1. With FSE theme, the Slideshow block images are not visible on editor or live page.
2. With Classic theme, the Slideshow block images are visible on editor or but not on live page.

Steps to reproduce

1. In an Atomic or Simple site, open page eidtor.
2. Add Row block.
3. Add Slidehsow block inside the row block and add images.
4. You will notice that the images are not showing up on the editor or live page in the case of FSE theme. In case of Classic theme, the slideshow images are visible only in the editor, but not in the live page.

Screenshot ( FSE theme ):

Editor:

Live page:

Screenshot ( Classic theme ):

Editor:

Live page:

What you expected to happen

Slideshow image to be visible on editor and live page.

What actually happened

Slideshow images were not visible.

Context

User report: 35867969-hc

Platform (Simple, Atomic, or both?)

Simple, Atomic

Theme-specific issue?

Was able to reproduce on FSE and Classic theme.s

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

No response

Workaround details

No response

[github-actions[bot]]

Support References

• [ ] 35867969-hc

[devNigel]

Not able to upload screenshots to github. Please try adding screenshots. Thanks.

[jeherve]

Not able to upload screenshots to github. Please try adding screenshots

I took care of that for you.

Since the slideshow block is developed in the Jetpack repository, I"ll move your issue there.

[jeherve]

Somewhat related: #22834

[cuemarie]

📌 SCRUBBING

• Tested on P2 ✅
• Tested on Simple ✅
• Tested on AT ✅
• Tested on Self-hosted ✅
• Replicable on Core - Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

• I'm able to replicate this issue consistently across Simple, AT, and Self-Hosted sites, as well as P2.
• As described above, Classic Themes could display the Slideshow in the Editor, but it was still missing on the live site. FSE themes (and P2) did not display the slideshow in the editor or the live site.

P2 Site:

Self-Hosted Site:

Editor

Live Site

📌 ACTIONS

• Marked as Triaged for Quality Squad review

[dsas]

I'm not sure if this is a symptom or a cause but when the slideshow is contained by a row block something is setting a really big width style on the swiper wrapper:

<ul class="wp-block-jetpack-slideshow_swiper-wrapper swiper-wrapper" style="width: 71582800px; transition-duration: 0ms; transform: translate3d(-17895700px, 0px, 0px); height: 951px;" id="swiper-wrapper-04f0905eaa699738" aria-live="polite">

and similarly for its children.

When the slideshow is not contained by a row block, it gets set to something more sensible sounding.

I think this is because a flex-item will use min-width:auto by default, which means the content is as wide as the space necessary. Setting a min-width:0 on the flex-item element, will fix that.

Unsure how to usefully make that happen from within this block 🤔 recurse upwards through the parents before setting a min-width:0 if it is set to min-width:auto. Seems risky.