Meraki: Slideshow block not working

rickmgithub commented 2 years ago

Quick summary

Slideshow block does not work when set in this particular combination on the site editor.

Steps to reproduce

Create site on Free plan
Add the Meraki theme
Go to Site Editor and adjust the content in the "index" template to show a slider.
Then go to customizer (which only appears to show on a free plan site, not a pro plan site)
Select "latest posts" for the home page settings
The slider doesn't show images.

Here is the page code

<!-- wp:template-part {"slug":"header-minimal","theme":"pub/meraki","tagName":"header"} /-->

<!-- wp:heading {"textAlign":"center","textColor":"cyan-bluish-gray"} -->
<h2 class="has-text-align-center has-cyan-bluish-gray-color has-text-color">JOIN US IN THE DEEP END OF THE ALONE POOL</h2>
<!-- /wp:heading -->

<!-- wp:jetpack/slideshow {"autoplay":true,"delay":4,"ids":[15,16],"sizeSlug":"large"} -->
<div class="wp-block-jetpack-slideshow aligncenter" data-autoplay="true" data-delay="4" data-effect="slide"><div class="wp-block-jetpack-slideshow_container swiper-container"><ul class="wp-block-jetpack-slideshow_swiper-wrapper swiper-wrapper"><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img alt="" class="wp-block-jetpack-slideshow_image wp-image-15" data-id="15" src="https://alonepool.files.wordpress.com/2022/05/alone3-scaled.jpg-e1653780339747.png?w=1024" /><figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">Alone Season 9 Contestants</figcaption></figure></li><li class="wp-block-jetpack-slideshow_slide swiper-slide"><figure><img alt="" class="wp-block-jetpack-slideshow_image wp-image-16" data-id="16" src="https://alonepool.files.wordpress.com/2022/05/alone-season-9-contestants-1280x720-1.jpg?w=1024" /></figure></li></ul><a class="wp-block-jetpack-slideshow_button-prev swiper-button-prev swiper-button-white" role="button"></a><a class="wp-block-jetpack-slideshow_button-next swiper-button-next swiper-button-white" role="button"></a><a aria-label="Pause Slideshow" class="wp-block-jetpack-slideshow_button-pause" role="button"></a><div class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-white"></div></div></div>
<!-- /wp:jetpack/slideshow -->

<!-- wp:media-text {"mediaId":25,"mediaLink":"https://alonepool.wordpress.com/img_0682/","mediaType":"image","imageFill":false} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile"><figure class="wp-block-media-text__media"><img src="https://alonepool.files.wordpress.com/2022/05/img_0682.jpeg?w=800" alt="" class="wp-image-25 size-full" /></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"primary"} -->
<p class="has-primary-color has-text-color">Check out this year's most popular contestants, according to our pool participants. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"placeholder":"Content…","textColor":"primary"} -->
<p class="has-primary-color has-text-color">Looks like Juan and Terry are the favorites...we'll see how long they last.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->

<!-- wp:gallery {"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":41,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://alonepool.files.wordpress.com/2022/05/img_8892.jpeg?w=1024" alt="" class="wp-image-41" /><figcaption><strong>Check back to see updated charts every Friday.</strong></figcaption></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->

<!-- wp:query {"queryId":5,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"textColor":"primary"} -->
<div class="wp-block-query has-primary-color has-text-color"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%;"><!-- wp:post-template -->
<!-- wp:columns {"verticalAlignment":"center"} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"25%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%;"><!-- wp:post-featured-image {"isLink":true} /--></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"75%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:75%;"><!-- wp:post-title {"level":3,"isLink":true} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:post-template --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:query -->

<!-- wp:template-part {"slug":"footer","theme":"pub/meraki","tagName":"footer","className":"site-footer-container alignfull"} /-->

What you expected to happen

The slider to show the images

What actually happened

The images do not show

Context

5257057-zen

Simple, Atomic or both?

Simple

Theme-specific issue?

No response

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

By creating the slider block in a page and using the normally header and footer template and setting the front page to static

Workaround details

No response

arunsathiya commented 2 years ago

📌 HOUSEKEEPING

Labels ✅
Priority ✅
Replicable on Core - Yes

📌 SCRUBBING

Tested on P2 - Did not test
Tested on Simple ✅
Tested on AT ✅
Tested on Self-hosted ✅

📌 FINDINGS/SCREENSHOTS/VIDEO

I can reproduce on simple, Atomic and WordPress.org.
Needed to install Blockbase first before installing Meraki on WordPress.org
Needed Jetpack on WordPress.org as this block is from Jetpack

📌 ACTIONS

I am not sure if this is a Meraki issue, issue with all themes that use the "Index" template to show blog posts on homepage, or a Jetpack issue.
Moving to themes GitHub for now, but I can give another look tomorrow.

Robertght commented 2 years ago

Thank you @arunsathiya !

Based on the last screenshot, I believe this is a situation where the slideshow just has more width than it's needed. Similar case:

https://github.com/Automattic/themes/issues/5990#issuecomment-1137213988

Also, reported something similar here: https://github.com/Automattic/jetpack/pull/24343#issuecomment-1142462864

I'm not 100% familiar with it, however, I'm wondering if other similar Slideshow block issues have already been looked into. cc @jeherve

jeherve commented 2 years ago

The slideshow block doesn't perfectly work with Full Site Editing. I believe you may be running into something similar to https://github.com/Automattic/jetpack/issues/22834

jhmonroe commented 1 year ago

Thank you @arunsathiya !

Based on the last screenshot, I believe this is a situation where the slideshow just has more width than it's needed. Similar case:

https://github.com/Automattic/themes/issues/5990#issuecomment-1137213988

Also, reported something similar here: https://github.com/Automattic/jetpack/pull/24343#issuecomment-1142462864

I'm not 100% familiar with it, however, I'm wondering if other similar Slideshow block issues have already been looked into. cc @jeherve

Noticing the same issue ON MOBILE when using the Jetpack Slideshow block on a portfolio site. Even if it's placed inside a group with content or wide width set. It appears to be the invisible wrapper stretching wide beyond the viewport that breaks the page on mobile (as commenter above noted on Apr 12).

This perhaps hacky? CSS fixed the problem for me (but ideally the wrapper wouldn't behave this way to begin with...):

ul.wp-block-jetpack-slideshow_swiper-wrapper.swiper-wrapper {
height: fit-content !important;
width: 0 !important;
}

See it in action here: https://mmonroedesign.com/residential/cobble-hill/

github-actions[bot] commented 1 year ago

Support References

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

[ ] 5257057-zen

Automattic / themes