Swiper React in Gutenberg not detecting slides in v9 and after

[darko-rr]

Hello,

I am having a problem in Swiper React in WordPress, it does not detect any slides. The same code was working very good in v8.4.7 and before. after update to v9.0.0 and any version after that the problem is happening.
I will share code below.

Swiper:

<Swiper
    key={ key }
    className="swiper js-testimonial-slider"
    direction={ 'horizontal' }
    autoHeight={ general.adaptiveHeight }
    effect={ 'slide' }
    watchOverflow={ true }
    resizeObserver={ false }
    modules={ [Navigation, Pagination] }
    loop={ false }
    pagination={{
        el: `[data-block*="${props.clientId}"] .t-swiper-pagination`,
        clickable: true
    }}
    navigation={{
        disabledClass: 't-slider__btn--disabled',
        prevEl: `[data-block*="${props.clientId}"] .js-testimonial-btn--prev`,
        nextEl: `[data-block*="${props.clientId}"] .js-testimonial-btn--next`
    }}
    keyboard={{
        enabled: true,
        onlyInViewport: true
    }}
    mousewheel={{
        forceToAxis: true
    }}
    onSwiper={ instance => swiper.current = instance }
>

   <section { ...innerBlocksProps }>
       { innerBlocksProps.children }
   </section>

</Swiper>

SwiperSlide:

<SwiperSlide { ...blockProps }>
    <div tag="blockquote" className="testimonial" style={{ alignItems: getFlexValue(general.contentAlign) }}>
        <div className="testimonial__image-wrapper" style={{ ['--image-size']: image.size.toString() }}>
            <img className="testimonial__image" src={ image.url } />
        </div>
    </div>
</SwiperSlide>

Any help is appreciated, thanks.

[IonTulbure]

Did you find a solution ?

[hadamlenz]

I think this issue is also linked to the Gutenberg issue WordPress/gutenberg#50633.
This const swiper = useSwiper(); doesn't return anything on innerBlocks

Edit: you can get the context inside a editor.BlockEdit hook

[hadamlenz]

While i really hope there can be an easier answer.... I did find this to work in the slider block using dynamic rendering

edit:(props){
...
//get all the inner blocks from the block edit store
const innerBlocks = useSelect((select) => {
	return select(blockEditorStore).getBlock(clientId).innerBlocks;
}, []);

//render the slides while using getBlockContent to get the innerBlocks of each slide
const slides = [...innerBlocks].map((block, index) => {
	return (
		<ServerSideRender
			block="my/slide"//change to the name of your slide block
			attributes={{ ...block.attributes, content: getBlockContent(block) }}
		/>
	);
});

//start up Swiper and loop through the slides while wrapping in the SwiperSlide
return(
	<Swiper {...parameters}>
		{slides.map((slide, index) => (
			<SwiperSlide>{slide}</SwiperSlide>
		))}
	</Swiper>
)

in the render.php file you will get $attributes['content'] from ServerSideRender. You will get $content from the render_callback

//if its a rest request look for content in the attributes 
if ( defined( 'REST_REQUEST' ) && REST_REQUEST && isset($attributes['content']) ){
	echo do_blocks($attributes['content']);
} else {
	echo $content;
}