Eoxia#27[Blocks] add: Carousel block parameters

blocks/build/eo-carousel/block.json

@@ -31,6 +31,14 @@
     "speed": {
       "type": "number",
       "default": 300
+    },
+    "pagination": {
+      "type": "boolean",
+      "default": true
+    },
+    "navigation": {
+      "type": "boolean",
+      "default": true
     }
   },
   "supports": {},

blocks/build/eo-carousel/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '24d81fb11939d0081bb5');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '53218907a6063a7bb7b1');

blocks/build/eo-carousel/render.php

@@ -12,30 +12,35 @@
 
 $carousel_attr = array(
     'slidesPerView' => esc_attr( $attributes['slidesPerView'] ),
-    'loop' => esc_attr( $attributes['loop'] )
+    'loop' => esc_attr( $attributes['loop'] ),
+    'speed' => esc_attr( $attributes['speed'] )
 );
 
 if ( $attributes['autoplay'] ) {
     $carousel_attr['autoplay'] = array( 'delay' => $attributes['autoplayDelay'] * 10 );
 } else {
     $carousel_attr['autoplay'] = false;
 }
-
-
+if ( ! $attributes['pagination'] ) {
+    $carousel_attr['pagination'] = false;
+}
+if ( ! $attributes['navigation'] ) {
+    $carousel_attr['navigation'] = false;
+}
 ?>
 
 <div <?php echo wp_kses_data( get_block_wrapper_attributes( [ 'class' => 'swiper' ] ) ); ?> data-carousel=<?php echo wp_json_encode( $carousel_attr ); ?>>
     <!-- Additional required wrapper -->
     <div class="swiper-wrapper">
         <?php echo wp_kses_post( $content ); ?>
     </div>
-    <!-- If we need pagination -->
-    <div class="swiper-pagination"></div>
 
-    <!-- If we need navigation buttons -->
-    <div class="swiper-button-prev"></div>
-    <div class="swiper-button-next"></div>
+    <?php if ( $attributes['pagination'] ) : ?>
+        <div class="swiper-pagination"></div>
+    <?php endif; ?>
 
-    <!-- If we need scrollbar -->
-    <div class="swiper-scrollbar"></div>
+    <?php if ( $attributes['navigation'] ) : ?>
+        <div class="swiper-button-prev"></div>
+        <div class="swiper-button-next"></div>
+    <?php endif; ?>
 </div>

blocks/build/eo-carousel/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '2cbbc5284f283d2a2a6c');
+<?php return array('dependencies' => array(), 'version' => '79aa1181d165cc92c347');

blocks/src/eo-carousel/block.json

@@ -29,6 +29,14 @@
 		"speed": {
 			"type": "number",
 			"default": 300
+		},
+		"pagination": {
+			"type": "boolean",
+			"default": true
+		},
+		"navigation": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {},

blocks/src/eo-carousel/edit.js

@@ -62,6 +62,26 @@ export default function Edit( { attributes, setAttributes, clientId } ) {
 						min={1}
 						max={6}
 					/>
+					<RangeControl
+						label={ __( 'Slide animation speed (MS)', 'eo-blocks' ) }
+						step={50}
+						value={attributes.speed}
+						onChange={(value) => setAttributes({speed: value})}
+						min={0}
+						max={2000}
+					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Prev/Next navigation', 'eo-blocks' ) }
+						checked={ attributes.navigation }
+						onChange={ ( value ) => setAttributes( { navigation: value } ) }
+					/>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Dots navigation', 'eo-blocks' ) }
+						checked={ attributes.pagination }
+						onChange={ ( value ) => setAttributes( { pagination: value } ) }
+					/>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Loop sliding', 'eo-blocks' ) }

blocks/src/eo-carousel/render.php

@@ -12,30 +12,35 @@
 
 $carousel_attr = array(
     'slidesPerView' => esc_attr( $attributes['slidesPerView'] ),
-    'loop' => esc_attr( $attributes['loop'] )
+    'loop' => esc_attr( $attributes['loop'] ),
+    'speed' => esc_attr( $attributes['speed'] )
 );
 
 if ( $attributes['autoplay'] ) {
     $carousel_attr['autoplay'] = array( 'delay' => $attributes['autoplayDelay'] * 10 );
 } else {
     $carousel_attr['autoplay'] = false;
 }
-
-
+if ( ! $attributes['pagination'] ) {
+    $carousel_attr['pagination'] = false;
+}
+if ( ! $attributes['navigation'] ) {
+    $carousel_attr['navigation'] = false;
+}
 ?>
 
 <div <?php echo wp_kses_data( get_block_wrapper_attributes( [ 'class' => 'swiper' ] ) ); ?> data-carousel=<?php echo wp_json_encode( $carousel_attr ); ?>>
     <!-- Additional required wrapper -->
     <div class="swiper-wrapper">
         <?php echo wp_kses_post( $content ); ?>
     </div>
-    <!-- If we need pagination -->
-    <div class="swiper-pagination"></div>
 
-    <!-- If we need navigation buttons -->
-    <div class="swiper-button-prev"></div>
-    <div class="swiper-button-next"></div>
+    <?php if ( $attributes['pagination'] ) : ?>
+        <div class="swiper-pagination"></div>
+    <?php endif; ?>
 
-    <!-- If we need scrollbar -->
-    <div class="swiper-scrollbar"></div>
+    <?php if ( $attributes['navigation'] ) : ?>
+        <div class="swiper-button-prev"></div>
+        <div class="swiper-button-next"></div>
+    <?php endif; ?>
 </div>

blocks/src/eo-carousel/view.js

@@ -11,17 +11,16 @@ document.addEventListener('DOMContentLoaded', () => {
 		const swiperDefaultAttributes = {
 			slidesPerView: 1,
 			loop: true,
+			speed: 300,
 			autoplay: false,
 			pagination: {
 				el: '.swiper-pagination',
+				dynamicBullets: true,
 			},
 			navigation: {
 				nextEl: '.swiper-button-next',
 				prevEl: '.swiper-button-prev',
 			},
-			scrollbar: {
-				el: '.swiper-scrollbar',
-			},
 		}
 
 		console.log(jQuery.extend( swiperDefaultAttributes, swiperCustomAttributes ));