Merge pull request #45 from rtCamp/develop

Merge `develop` into `main`

Author: theMasudRana

examples/patterns/hero-carousel.php

@@ -7,11 +7,11 @@
  */
 ?>
 
-<!-- wp:carousel-kit/carousel {"loop":true,"autoplay":true,"autoplayDelay":5000,"ariaLabel":"Hero Carousel","metadata":{"categories":["carousel-kit"],"patternName":"carousel-kit/hero-carousel","name":"Carousel Kit: Hero Carousel"},"align":"wide","className":"wp-block-carousel-kit-carousel"} -->
-<div class="wp-block-carousel-carousel alignwide carousel-kit wp-block-carousel-kit-carousel" role="region" aria-roledescription="carousel" aria-label="Hero Carousel" dir="ltr" data-axis="x" data-wp-interactive="carousel-kit/carousel" data-wp-context="{&quot;options&quot;:{&quot;loop&quot;:true,&quot;dragFree&quot;:false,&quot;align&quot;:&quot;start&quot;,&quot;containScroll&quot;:&quot;trimSnaps&quot;,&quot;direction&quot;:&quot;ltr&quot;,&quot;axis&quot;:&quot;x&quot;,&quot;slidesToScroll&quot;:1},&quot;autoplay&quot;:{&quot;delay&quot;:5000,&quot;stopOnInteraction&quot;:true,&quot;stopOnMouseEnter&quot;:false},&quot;isPlaying&quot;:true,&quot;timerIterationId&quot;:0,&quot;selectedIndex&quot;:-1,&quot;scrollSnaps&quot;:[],&quot;canScrollPrev&quot;:false,&quot;canScrollNext&quot;:false,&quot;ariaLabelPattern&quot;:&quot;Go to slide %d&quot;}" data-wp-init="callbacks.initCarousel" style="--carousel-kit-gap:0px"><!-- wp:carousel-kit/carousel-viewport {"className":"wp-block-carousel-kit-carousel-viewport"} -->
-	<div class="wp-block-carousel-carousel-viewport embla wp-block-carousel-kit-carousel-viewport">
-		<div class="embla__container"><!-- wp:carousel-kit/carousel-slide {"className":"wp-block-carousel-kit-carousel-slide"} -->
-			<div class="wp-block-carousel-carousel-slide embla__slide wp-block-carousel-kit-carousel-slide" role="group" aria-roledescription="slide" data-wp-interactive="carousel-kit/carousel" data-wp-class--is-active="callbacks.isSlideActive" data-wp-bind--aria-current="callbacks.isSlideActive"><!-- wp:cover {"url":"https://picsum.photos/1920/800?random=1","dimRatio":30,"minHeight":600,"minHeightUnit":"px"} -->
+<!-- wp:carousel-kit/carousel {"loop":true,"autoplay":true,"autoplayDelay":5000,"ariaLabel":"Hero Carousel","metadata":{"categories":["carousel-kit"],"patternName":"carousel-kit/hero-carousel","name":"Carousel Kit: Hero Carousel"},"align":"wide","className":"wp-block-carousel-carousel"} -->
+<div class="wp-block-carousel-kit-carousel alignwide carousel-kit wp-block-carousel-carousel" role="region" aria-roledescription="carousel" aria-label="Hero Carousel" dir="ltr" data-axis="x" data-loop="true" data-wp-interactive="carousel-kit/carousel" data-wp-context="{&quot;options&quot;:{&quot;loop&quot;:true,&quot;dragFree&quot;:false,&quot;align&quot;:&quot;start&quot;,&quot;containScroll&quot;:&quot;trimSnaps&quot;,&quot;direction&quot;:&quot;ltr&quot;,&quot;axis&quot;:&quot;x&quot;,&quot;slidesToScroll&quot;:1},&quot;autoplay&quot;:{&quot;delay&quot;:5000,&quot;stopOnInteraction&quot;:true,&quot;stopOnMouseEnter&quot;:false},&quot;isPlaying&quot;:true,&quot;timerIterationId&quot;:0,&quot;selectedIndex&quot;:-1,&quot;scrollSnaps&quot;:[],&quot;canScrollPrev&quot;:false,&quot;canScrollNext&quot;:false,&quot;ariaLabelPattern&quot;:&quot;Go to slide %d&quot;}" data-wp-init="callbacks.initCarousel" style="--carousel-kit-gap:0px"><!-- wp:carousel-kit/carousel-viewport {"className":"wp-block-carousel-carousel-viewport"} -->
+	<div class="wp-block-carousel-kit-carousel-viewport embla wp-block-carousel-carousel-viewport">
+		<div class="embla__container"><!-- wp:carousel-kit/carousel-slide {"className":"wp-block-carousel-carousel-slide"} -->
+			<div class="wp-block-carousel-kit-carousel-slide embla__slide wp-block-carousel-carousel-slide" role="group" aria-roledescription="slide" data-wp-interactive="carousel-kit/carousel" data-wp-class--is-active="callbacks.isSlideActive" data-wp-bind--aria-current="callbacks.isSlideActive"><!-- wp:cover {"url":"https://picsum.photos/1920/800?random=1","dimRatio":30,"minHeight":600,"minHeightUnit":"px"} -->
 				<div class="wp-block-cover" style="min-height:600px"><img class="wp-block-cover__image-background" alt="" src="https://picsum.photos/1920/800?random=1" data-object-fit="cover" /><span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim"></span>
 					<div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","level":1,"textColor":"white"} -->
 						<h1 class="wp-block-heading has-text-align-center has-white-color has-text-color">Welcome to Our Site</h1>
@@ -33,8 +33,8 @@
 			</div>
 			<!-- /wp:carousel-kit/carousel-slide -->
 
-			<!-- wp:carousel-kit/carousel-slide {"className":"wp-block-carousel-kit-carousel-slide"} -->
-			<div class="wp-block-carousel-carousel-slide embla__slide wp-block-carousel-kit-carousel-slide" role="group" aria-roledescription="slide" data-wp-interactive="carousel-kit/carousel" data-wp-class--is-active="callbacks.isSlideActive" data-wp-bind--aria-current="callbacks.isSlideActive"><!-- wp:cover {"url":"https://picsum.photos/1920/800?random=2","dimRatio":30,"minHeight":600,"minHeightUnit":"px"} -->
+			<!-- wp:carousel-kit/carousel-slide {"className":"wp-block-carousel-carousel-slide"} -->
+			<div class="wp-block-carousel-kit-carousel-slide embla__slide wp-block-carousel-carousel-slide" role="group" aria-roledescription="slide" data-wp-interactive="carousel-kit/carousel" data-wp-class--is-active="callbacks.isSlideActive" data-wp-bind--aria-current="callbacks.isSlideActive"><!-- wp:cover {"url":"https://picsum.photos/1920/800?random=2","dimRatio":30,"minHeight":600,"minHeightUnit":"px"} -->
 				<div class="wp-block-cover" style="min-height:600px"><img class="wp-block-cover__image-background" alt="" src="https://picsum.photos/1920/800?random=2" data-object-fit="cover" /><span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim"></span>
 					<div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","level":1,"textColor":"white"} -->
 						<h1 class="wp-block-heading has-text-align-center has-white-color has-text-color">Build Something Amazing</h1>
@@ -49,8 +49,8 @@
 			</div>
 			<!-- /wp:carousel-kit/carousel-slide -->
 
-			<!-- wp:carousel-kit/carousel-slide {"className":"wp-block-carousel-kit-carousel-slide"} -->
-			<div class="wp-block-carousel-carousel-slide embla__slide wp-block-carousel-kit-carousel-slide" role="group" aria-roledescription="slide" data-wp-interactive="carousel-kit/carousel" data-wp-class--is-active="callbacks.isSlideActive" data-wp-bind--aria-current="callbacks.isSlideActive"><!-- wp:cover {"url":"https://picsum.photos/1920/800?random=3","dimRatio":30,"minHeight":600,"minHeightUnit":"px"} -->
+			<!-- wp:carousel-kit/carousel-slide {"className":"wp-block-carousel-carousel-slide"} -->
+			<div class="wp-block-carousel-kit-carousel-slide embla__slide wp-block-carousel-carousel-slide" role="group" aria-roledescription="slide" data-wp-interactive="carousel-kit/carousel" data-wp-class--is-active="callbacks.isSlideActive" data-wp-bind--aria-current="callbacks.isSlideActive"><!-- wp:cover {"url":"https://picsum.photos/1920/800?random=3","dimRatio":30,"minHeight":600,"minHeightUnit":"px"} -->
 				<div class="wp-block-cover" style="min-height:600px"><img class="wp-block-cover__image-background" alt="" src="https://picsum.photos/1920/800?random=3" data-object-fit="cover" /><span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim"></span>
 					<div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","level":1,"textColor":"white"} -->
 						<h1 class="wp-block-heading has-text-align-center has-white-color has-text-color">Join Our Community</h1>
@@ -69,16 +69,16 @@
 	<!-- /wp:carousel-kit/carousel-viewport -->
 
 	<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
-	<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--30)"><!-- wp:carousel-kit/carousel-controls {"className":"wp-block-carousel-kit-carousel-controls"} -->
-		<div class="wp-block-carousel-carousel-controls carousel-kit-controls wp-block-carousel-kit-carousel-controls"><button type="button" class="carousel-kit-controls__btn carousel-kit-controls__btn--prev" data-wp-on--click="actions.scrollPrev" data-wp-bind--disabled="!state.canScrollPrev" aria-label="Previous Slide"><svg class="carousel-kit-controls__icon" width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--30)"><!-- wp:carousel-kit/carousel-controls {"className":"wp-block-carousel-carousel-controls"} -->
+		<div class="wp-block-carousel-kit-carousel-controls carousel-kit-controls wp-block-carousel-carousel-controls"><button type="button" class="carousel-kit-controls__btn carousel-kit-controls__btn--prev" data-wp-on--click="actions.scrollPrev" data-wp-bind--disabled="!state.canScrollPrev" aria-label="Previous Slide"><svg class="carousel-kit-controls__icon" width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path d="M0 3.55371L3.55371 7.10742V4.26562H12.7861V2.84375H3.55371V0L0 3.55371Z" fill="#1C1C1C"></path>
 				</svg></button><button type="button" class="carousel-kit-controls__btn carousel-kit-controls__btn--next" data-wp-on--click="actions.scrollNext" data-wp-bind--disabled="!state.canScrollNext" aria-label="Next Slide"><svg class="carousel-kit-controls__icon" width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg">
 					<path d="M12.7861 3.55371L9.23242 7.10742V4.26562H0V2.84375H9.23242V0L12.7861 3.55371Z" fill="#1C1C1C"></path>
 				</svg></button></div>
 		<!-- /wp:carousel-kit/carousel-controls -->
 
-		<!-- wp:carousel-kit/carousel-dots {"className":"wp-block-carousel-kit-carousel-dots"} -->
-		<div class="wp-block-carousel-carousel-dots carousel-kit-dots wp-block-carousel-kit-carousel-dots"><template data-wp-each--snap="context.scrollSnaps"><button class="carousel-kit-dot" data-wp-class--is-active="callbacks.isDotActive" data-wp-bind--aria-current="callbacks.isDotActive" data-wp-on--click="actions.onDotClick" data-wp-bind--aria-label="callbacks.getDotLabel" type="button"></button></template></div>
+		<!-- wp:carousel-kit/carousel-dots {"className":"wp-block-carousel-carousel-dots"} -->
+		<div class="wp-block-carousel-kit-carousel-dots carousel-kit-dots wp-block-carousel-carousel-dots"><template data-wp-each--snap="context.scrollSnaps"><button class="carousel-kit-dot" data-wp-class--is-active="callbacks.isDotActive" data-wp-bind--aria-current="callbacks.isDotActive" data-wp-on--click="actions.onDotClick" data-wp-bind--aria-label="callbacks.getDotLabel" type="button"></button></template></div>
 		<!-- /wp:carousel-kit/carousel-dots -->
 	</div>
 	<!-- /wp:group -->

examples/patterns/logo-showcase.php

@@ -8,7 +8,7 @@
 ?>
 
 <!-- wp:carousel-kit/carousel {"loop":true,"autoplayDelay":3000,"autoplayStopOnInteraction":false,"ariaLabel":"Partner Logos","metadata":{"categories":["carousel-kit"],"patternName":"carousel-kit/logo-showcase","name":"Carousel Kit: Logo Showcase"},"className":"wp-block-carousel-carousel is-style-columns-3"} -->
-<div class="wp-block-carousel-kit-carousel carousel-kit wp-block-carousel-carousel is-style-columns-3" role="region" aria-roledescription="carousel" aria-label="Partner Logos" dir="ltr" data-axis="x" data-wp-interactive="carousel-kit/carousel" data-wp-context="{&quot;options&quot;:{&quot;loop&quot;:true,&quot;dragFree&quot;:false,&quot;align&quot;:&quot;start&quot;,&quot;containScroll&quot;:&quot;trimSnaps&quot;,&quot;direction&quot;:&quot;ltr&quot;,&quot;axis&quot;:&quot;x&quot;,&quot;slidesToScroll&quot;:1},&quot;autoplay&quot;:false,&quot;isPlaying&quot;:false,&quot;timerIterationId&quot;:0,&quot;selectedIndex&quot;:-1,&quot;scrollSnaps&quot;:[],&quot;canScrollPrev&quot;:false,&quot;canScrollNext&quot;:false,&quot;ariaLabelPattern&quot;:&quot;Go to slide %d&quot;}" data-wp-init="callbacks.initCarousel" style="--carousel-kit-gap:0px"><!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"bottom":"69px"}}}} -->
+<div class="wp-block-carousel-kit-carousel carousel-kit wp-block-carousel-carousel is-style-columns-3" role="region" aria-roledescription="carousel" aria-label="Partner Logos" dir="ltr" data-axis="x" data-loop="true" data-wp-interactive="carousel-kit/carousel" data-wp-context="{&quot;options&quot;:{&quot;loop&quot;:true,&quot;dragFree&quot;:false,&quot;align&quot;:&quot;start&quot;,&quot;containScroll&quot;:&quot;trimSnaps&quot;,&quot;direction&quot;:&quot;ltr&quot;,&quot;axis&quot;:&quot;x&quot;,&quot;slidesToScroll&quot;:1},&quot;autoplay&quot;:false,&quot;isPlaying&quot;:false,&quot;timerIterationId&quot;:0,&quot;selectedIndex&quot;:-1,&quot;scrollSnaps&quot;:[],&quot;canScrollPrev&quot;:false,&quot;canScrollNext&quot;:false,&quot;ariaLabelPattern&quot;:&quot;Go to slide %d&quot;}" data-wp-init="callbacks.initCarousel" style="--carousel-kit-gap:0px"><!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"bottom":"69px"}}}} -->
 	<h2 class="wp-block-heading has-text-align-center" style="margin-bottom:69px">Trusted By Leading Companies</h2>
 	<!-- /wp:heading -->