Building a Gutenberg Carousel Block with Tiny Slider JS

December 4, 2021

Like the Tabbed Content block, the Carousel Block is a custom block composed of a parent-child Innerblock pattern. The parent acts as the carousel wrapper, and the child blocks are the individual slides. Jump to see the finished project and source code.

Block Environment

Follow instructions for installing the WordPress-supported @wordpress/create-block starter block.

Parent-child Set Up

I have yet to figure out the best practice for including child blocks in these projects, so for now, I have been using the edit.js, save.js and block.json file for the parent block code and settings and a separate file for the child block with the block registration, edit and save functions in one file.

Parent Block

Parent Block Files:

block.json

src/edit.js

src/save.js

Parent Block Code:

In edit.js, import the InnerBlocks component and add it to your return in the Edit function. Set up an ALLOWED_BLOCKS const and set to an array with the name of the child block (note that you will be setting up the child block in the next section). This will restrict the InnerBlock from only allowing the child block to be added.

import { InnerBlocks } from '@wordpress/block-editor';
const ALLOWED_BLOCKS = [ 'create-block/uwkc-carousel-slide' ];
 
export default function Edit( props ) {
   return (
        <div { ...useBlockProps() }>
 
 
               <InnerBlocks
                   allowedBlocks={ ALLOWED_BLOCKS }
                   renderAppender={ InnerBlocks.ButtonBlockAppender }
               /> 
	</div>
   );
}

In save.js, set up the code that will be saved to the database and displayed on the frontend (page). You need to import InnerBlocks again and add InnerBlocks.Content in side the return in the save function:

import { InnerBlocks } from '@wordpress/block-editor';
export default function save( props ) {
   
   return (
           <div { ...useBlockProps.save() } >
               <div className="uwkc-carousel">
                   <InnerBlocks.Content />
               </div>
           </div>
   );
}

Child Block

Child Block File:

inner-slide.js

Child Block Code:

Add the block registration, edit and save functions to inner-slide.js. The name of your child block is what you set to the ALLOWED_BLOCKS const in the parent block’s edit.js file.

Import the InnerBlocks component at the top:

import { InnerBlocks } from '@wordpress/block-editor';

In the block registration set the parent block name to the “parent” property:

registerBlockType( 'create-block/uwkc-carousel-slide', {
   title: __( 'Slide' ), 
   icon: 'welcome-add-page', 
   parent: [ 'create-block/uwkc-carousel' ],
   category: 'design',
   keywords: [
       __( 'slide' ),
   ],

Add the InnerBlocks component to the return() in the edit function. Unlike the parent block, I did not include an argument to the allowedBlocks property because I want to allow all blocks to be added for a more flexible carousel. But if you just want the carousel to have images, or use a specific template, you can set that up. Read more about allowed block and template properties.

edit: ( props ) => {
     
       return (
           <div className={ props.className }>
               <h4 className="slide-title">Slide</h4>
               <InnerBlocks
               renderAppender={ InnerBlocks.ButtonBlockAppender }
               />
           </div>
       );
   },

Adding the Javascript

Tiny Slider 2 JS

I used the Tiny Slider JS library for this project. I decided to install the files locally because I had issues with using the node set up. To do this create an assets folder in the root of your block folder, within that add another folder called “tiny-slider.” Then add the tiny-slider library files

Frontend JS

You will also need a javascript file with the slider settings. I called this “frontend.js” and added it to the assets folder.

Javascript File Structure:

assets/
   frontend.js
   tiny-slider/
      tiny-slider.css
      tiny-slider.helper.ie8.js
      tiny-slider.css

Frontend.js

The basic code to add to the frontend.js is below. The container is set to the div class that was used in the save.js file. In my example above I named it “uwkc-carousel”

var slider = tns({
    container: '.uwkc-carousel',
    items: 3,
    slideBy: 'page',
    autoplay: true
  });

This code works fine, but if you want to have multiple carousel blocks on one page it wont work because all of the carousel blocks will be accessing the same code. So you need to select all of the sliders on the page, save to an array then loop through so that each carousel is uniquely accessing the frontend.js code:

var sliders = document.querySelectorAll('.uwkc-carousel');
 
sliders.forEach( function (slide, i) {
 
  var slider = tns({
      container: slide,
      items: 3,
      slideBy: 'page',
      autoplay: true
  });

});

Enqueuing the JS

Since this is a wordpress project we will need to enqueue the JS in the block’s php file. You can do that in the block init function:

function create_block_uwkc_carousel_block_init() {
   register_block_type( __DIR__ , array(
      'render_callback' => function ( $attribs, $content ){
           if( !is_admin() ) {
 
              wp_enqueue_script(
               'uwkc-carousel-tiny-slider',
               plugins_url('assets/tiny-slider/tiny-slider.js', __FILE__ ),
           );
           wp_enqueue_style(
               'uwkc-carousel-tiny-slider',
               plugins_url('assets/tiny-slider/tiny-slider.css', __FILE__ ),
           );
 
           wp_enqueue_script(
               'uwkc-carousel-frontend',
               plugins_url('assets/frontend.js', __FILE__ ),
           );
 
 
               return $content;
          
           }//if frontend
       }//render callback
 
 
   ));
}
add_action( 'init', 'create_block_uwkc_carousel_block_init' );

Now everything should be set up for a very basic carousel block using Tiny JS. In recap: the Parent block acts as the carousel wrapper, and the child block acts as the individual slides. The Tiny-Slider JS is the library that does most of the magic, frontend.js is where you add the basic carousel settings. Then you enqueue the JS in the block’s php file so that the JS will run in the frontend of the page.

Adding User-Defined Settings and Other Features:

I ended up adding extra features to this carousel so that the user can adjust the carousel layout settings from within the wordpress editor. I did this by adding various input controls, which saved to the block’s attributes. Then I parsed these attributes within the block’s php file so that the frontend.js file had access to these attributes.