feat: add both slick and swiper sliders (#47)

Author: kchan825

…c/blocks/block-slider/_slider-admin.scss src/blocks/block-slick/_slick-admin.scsssrc/blocks/block-slider/_slider-admin.scss renamed to src/blocks/block-slick/_slick-admin.scss src/blocks/block-slider/_slider-admin.scss renamed to src/blocks/block-slick/_slick-admin.scss

@@ -1,10 +1,10 @@
-.wp-block-client-slider {
+.wp-block-client-slick {
   .block-editor-block-list__layout {
     overflow: auto;
     white-space: nowrap;
   }
 
-  [data-type='client/slider-item'] {
+  [data-type='client/slick-item'] {
     display: inline-block;
     width: 95%;
   }

src/blocks/block-slick/_slick.scss

@@ -15,16 +15,17 @@ const {
 const {
   PanelBody,
   PanelRow,
+  SelectControl,
   ToggleControl,
 } = wp.components;
 
 /*
  * Register block
  */
-registerBlockType( 'client/slider', {
-  title: __( 'Slider', 'grayscale' ),
+registerBlockType( 'client/slick', {
+  title: __( 'Slick Slider', 'grayscale' ),
   description: __(
-    'Slideshow of items.',
+    'Slideshow of items using Slick.',
     'grayscale'
   ),
   category: 'widgets',
@@ -36,6 +37,10 @@ registerBlockType( 'client/slider', {
       type: 'boolean',
       default: false,
     },
+    effect: {
+      type: 'string',
+      deafult: 'slide',
+    },
     navigation: {
       type: 'boolean',
       default: true,
@@ -49,13 +54,17 @@ registerBlockType( 'client/slider', {
   supports: {
     anchor: true,
     align: [],
+    dimensions: {
+      minHeight: true,
+    },
     multiple: true,
   },
   parent: null,
   edit: ( props ) => {
     const {
       attributes: {
         autoplay,
+        effect,
         navigation,
         pagination,
       },
@@ -94,52 +103,53 @@ registerBlockType( 'client/slider', {
                 } ) }
               />
             </PanelRow>
+            <PanelRow>
+              <SelectControl
+                label={ __( 'Effect', 'grayscale' ) }
+                value={ effect }
+                options={
+                  [
+                    { label: __( 'Slide', 'grayscale' ), value: 'slide' },
+                    { label: __( 'Fade', 'grayscale' ), value: 'fade' },
+                  ]
+                }
+                onChange={ ( value ) => setAttributes( {
+                  effect: value,
+                } ) }
+              />
+            </PanelRow>
           </PanelBody>
         </InspectorControls>
         <div className={ classnames( className ) }>
-          <InnerBlocks allowedBlocks={ [ 'client/slider-item' ] } />
+          <InnerBlocks allowedBlocks={ [ 'client/slick-item' ] } />
         </div>
       </>
     );
   },
   save: ( props ) => {
     const {
       autoplay,
+      effect,
       navigation,
       pagination,
     } = props.attributes;
     return (
       <div
-        className={ classnames( 'swiper' ) }
         data-autoplay={ autoplay ? 'true' : 'false' }
+        data-effect={ effect }
         data-navigation={ navigation ? 'true' : 'false' }
         data-pagination={ pagination ? 'true' : 'false' }
       >
-        <div className="swiper-wrapper">
-          <InnerBlocks.Content />
-        </div>
-        {
-          pagination ? (
-            <div className="swiper-pagination"></div>
-          ) : null
-        }
-        {
-          navigation ? (
-            <>
-              <div className="swiper-button-prev"></div>
-              <div className="swiper-button-next"></div>
-            </>
-          ) : null
-        }
+        <InnerBlocks.Content />
       </div>
     );
   },
 } );
 
-registerBlockType( 'client/slider-item', {
-  title: __( 'Slider Item', 'grayscale' ),
+registerBlockType( 'client/slick-item', {
+  title: __( 'Slick Slider Item', 'grayscale' ),
   description: __(
-    'Slide within the Slider.',
+    'Slide within the Slick Slider.',
     'grayscale'
   ),
   category: 'widgets',
@@ -153,7 +163,7 @@ registerBlockType( 'client/slider-item', {
     align: [],
     multiple: true,
   },
-  parent: [ 'client/slider' ],
+  parent: [ 'client/slick' ],
   edit: ( props ) => {
     const {
       className,
@@ -167,7 +177,7 @@ registerBlockType( 'client/slider-item', {
   },
   save: () => {
     return (
-      <div className={ classnames( 'swiper-slide' ) }>
+      <div className={ classnames( 'slick-slide' ) }>
         <InnerBlocks.Content />
       </div>
     );

src/blocks/block-slider/slider-admin.js src/blocks/block-slick/slick-admin.jssrc/blocks/block-slider/slider-admin.js renamed to src/blocks/block-slick/slick-admin.js

@@ -0,0 +1,16 @@
+jQuery( function( $ ) {
+  if ( $( '.wp-block-client-slick' ).length ) {
+    $( '.wp-block-client-slick' ).each( ( i, el ) => {
+      const $el = $( el );
+
+      // For a list of avaialble parameters,
+      // check https://kenwheeler.github.io/slick/#settings
+      $el.slick( {
+        arrows: $el.data( 'navigation' ) ? true : false,
+        autoplay: $el.data( 'autoplay' ) ? true : false,
+        fade: $el.data( 'effect' ) === 'fade' ? true : false,
+        dots: $el.data( 'pagination' ) ? true : false,
+      } );
+    } );
+  }
+} );

src/blocks/block-slick/slick.js

@@ -0,0 +1,11 @@
+.wp-block-client-swiper {
+  .block-editor-block-list__layout {
+    overflow: auto;
+    white-space: nowrap;
+  }
+
+  [data-type='client/swiper-item'] {
+    display: inline-block;
+    width: 95%;
+  }
+}

src/blocks/block-slider/slider.js

@@ -1,13 +1,9 @@
-.wp-block-client-slider {
+.wp-block-client-swiper {
   --swiper-theme-color: var(--wp--preset--color--major);
   --swiper-navigation-size: 2rem;
   --swiper-navigation-color: var(--swiper-theme-color);
   --swiper-pagination-bullet-size: 1rem;
 
-  :where(.swiper-slide) {
-    background: var(--wp--preset--color--background);
-  }
-
   .swiper-slide {
     height: auto;