You would use something like serialize_blocks()
passing in array, like this for example:
$shortcode_content = serialize_blocks( array(
'cloudcatch/splide-carousel',
array(
'interval' => 5000,
'breakpointTablet' => 1079,
'breakpointMobile' => 599,
'extensions' => array(
'autoScroll' => false,
'urlHash' => false
)
),
array(
array(
'cloudcatch/splide-carousel-item',
array(),
array(
array(
'core/quote',
array(),
array(
array(
'core/paragraph',
array(),
array()
),
)
),
)
),
array(
'cloudcatch/splide-carousel-item',
array(),
array(
array(
'core/quote',
array(),
array(
array(
'core/paragraph',
array(),
array()
),
)
),
)
),
array(
'cloudcatch/splide-carousel-item',
array(),
array(
array(
'core/quote',
array(),
array(
array(
'core/paragraph',
array(),
array()
),
)
),
)
),
)
) );
Stick that in a shortcode using the add_shortcode()
function.
This is untested.
It would be easier to create a new shortcode, enqueing Splide via CDN or other means, and returning shortcode content that follows the proper structure splide requires.
Something like this:
function enqueue_splide_assets() {
// Enqueue Splide CSS and JS from CDN
wp_enqueue_style( 'splide-core-css', 'https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css', array(), '4.0.7' );
wp_enqueue_script( 'splide-js', 'https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js', array(), '4.0.7', true );
}
add_action( 'wp_enqueue_scripts', 'enqueue_splide_assets' );
function splide_carousel_shortcode() {
ob_start();
?>
<div id="splide-carousel" class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 1</li>
<li class="splide__slide">Slide 2</li>
<li class="splide__slide">Slide 3</li>
</ul>
</div>
</div>
<script>
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#splide-carousel', {
type : 'loop',
perPage: 3,
autoplay: true,
} ).mount();
} );
</script>
<?php
return ob_get_clean();
}
add_shortcode( 'splide_carousel', 'splide_carousel_shortcode' );