Basic example
A wrapper block to make an easy carousel with your desired inner blocks. It will make a wrapper block, a slide block and then you can choose the innerblock. It will automatically add swiper pagination and navigation. The navigation buttons is the t2 chevron left and right.
Note: This is a very barebone style block, and you will need to style it yourself. It will just generate the functionality.
Define in your theme.json what inner blocks you want to allow and what the default template should be. If you want multiple carousels with different innerblocks you can create a blockVariation, and define the values in the carousel-wrapper block attributes.
Everything you define in the block attributes will override the theme.json settings.
The UX
UI is simply optimized to show add/remove slide when focused.
The wrapper has easy to access ADD next slide button
Carousel only when focused will show the all slides.
When no slides are available there is a screen to add first slide:
Variations
The carousel support register variation from theme.json.
Each variation can have it’s own unique features/settings.
Each variation will have extra class to hook styling.
This way you can have multiple unqie sliders on one page using single block.
The variation’s settings are read from library.json not from attributes, which make it easy to change later if there is need to.
Leave a Reply