From c6eb091b7cfd0c9b8ebc9d10d3a4f45926178b5e Mon Sep 17 00:00:00 2001 From: aadil42 Date: Fri, 5 Jun 2026 16:18:02 +0530 Subject: [PATCH 01/10] chore: add embla-carousel-auto-scroll dependency --- package-lock.json | 54 ++++++++++------------------------------------- package.json | 1 + 2 files changed, 12 insertions(+), 43 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1245dc7..c10eb3c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "@wordpress/icons": "11.5.0", "@wordpress/interactivity": "6.37.0", "embla-carousel": "8.6.0", + "embla-carousel-auto-scroll": "8.6.0", "embla-carousel-autoplay": "8.6.0", "react": "^18.3.1", "react-dom": "^18.3.1" @@ -4529,9 +4530,6 @@ "arm" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4553,9 +4551,6 @@ "arm" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -4577,9 +4572,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4601,9 +4593,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -4625,9 +4614,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -4649,9 +4635,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -7275,9 +7258,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -7292,9 +7272,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -7309,9 +7286,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -7326,9 +7300,6 @@ "riscv64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -7343,9 +7314,6 @@ "riscv64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -7360,9 +7328,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -7377,9 +7342,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -7394,9 +7356,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -12686,6 +12645,15 @@ "version": "8.6.0", "license": "MIT" }, + "node_modules/embla-carousel-auto-scroll": { + "version": "8.6.0", + "resolved": "https://registry.npmjs.org/embla-carousel-auto-scroll/-/embla-carousel-auto-scroll-8.6.0.tgz", + "integrity": "sha512-WT9fWhNXFpbQ6kP+aS07oF5IHYLZ1Dx4DkwgCY8Hv2ZyYd2KMCPfMV1q/cA3wFGuLO7GMgKiySLX90/pQkcOdQ==", + "license": "MIT", + "peerDependencies": { + "embla-carousel": "8.6.0" + } + }, "node_modules/embla-carousel-autoplay": { "version": "8.6.0", "license": "MIT", @@ -23219,7 +23187,7 @@ }, "node_modules/typescript": { "version": "5.9.3", - "devOptional": true, + "dev": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", diff --git a/package.json b/package.json index 61f3de3..bace22f 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "@wordpress/icons": "11.5.0", "@wordpress/interactivity": "6.37.0", "embla-carousel": "8.6.0", + "embla-carousel-auto-scroll": "8.6.0", "embla-carousel-autoplay": "8.6.0", "react": "^18.3.1", "react-dom": "^18.3.1" From 8921d79661e94fe123d2927bc8810083393d8c8d Mon Sep 17 00:00:00 2001 From: aadil42 Date: Fri, 5 Jun 2026 17:17:10 +0530 Subject: [PATCH 02/10] feat: add autoScroll toggle with mutual exclusivity to autoplay --- src/blocks/carousel/block.json | 4 ++++ src/blocks/carousel/edit.tsx | 22 +++++++++++++++++++++- src/blocks/carousel/types.ts | 1 + 3 files changed, 26 insertions(+), 1 deletion(-) diff --git a/src/blocks/carousel/block.json b/src/blocks/carousel/block.json index e0df7ca..1d8ce21 100644 --- a/src/blocks/carousel/block.json +++ b/src/blocks/carousel/block.json @@ -85,6 +85,10 @@ "slidesToScroll": { "type": "string", "default": "1" + }, + "autoScroll": { + "type": "boolean", + "default": false } }, "editorScript": "file:./index.js", diff --git a/src/blocks/carousel/edit.tsx b/src/blocks/carousel/edit.tsx index f4f4be8..23383e2 100644 --- a/src/blocks/carousel/edit.tsx +++ b/src/blocks/carousel/edit.tsx @@ -54,6 +54,7 @@ export default function Edit( { autoplayStopOnMouseEnter, ariaLabel, slidesToScroll = '1', + autoScroll, } = attributes; const [ emblaApi, setEmblaApi ] = useState(); @@ -421,7 +422,12 @@ export default function Edit( { setAttributes( { autoplay: value } ) } + onChange={ ( value ) => { + setAttributes( { + autoplay: value, + autoScroll: value ? false : autoScroll, + } ) + }} /> { autoplay && ( <> @@ -460,6 +466,20 @@ export default function Edit( { ) } + + setAttributes( { + autoScroll: value, + autoplay: value ? false : autoplay, + } ) } + /> + + ; From 2cd00b0b17702629fc93584ecc59e8c3f282f51a Mon Sep 17 00:00:00 2001 From: aadil42 Date: Sat, 6 Jun 2026 14:52:55 +0530 Subject: [PATCH 03/10] feat: integrate Auto Scroll plugin. --- src/blocks/carousel/save.tsx | 10 ++++++++++ src/blocks/carousel/types.ts | 8 ++++++++ src/blocks/carousel/view.ts | 6 ++++++ 3 files changed, 24 insertions(+) diff --git a/src/blocks/carousel/save.tsx b/src/blocks/carousel/save.tsx index 73ef6ca..ce192a8 100644 --- a/src/blocks/carousel/save.tsx +++ b/src/blocks/carousel/save.tsx @@ -22,6 +22,7 @@ export default function Save( { axis, height, slidesToScroll, + autoScroll, } = attributes; // Pass configuration to the frontend via data-wp-context @@ -64,6 +65,15 @@ export default function Save( { 'Slide {{currentSlide}} of {{totalSlides}}', 'rt-carousel', ), + autoScroll: autoScroll ? { + speed: 2, + direction: 'forward', + startDelay: 1000, + stopOnInteraction: true, + stopOnMouseEnter: false, + stopOnFocusIn: true, + } + : false, }; const blockProps = useBlockProps.save( { diff --git a/src/blocks/carousel/types.ts b/src/blocks/carousel/types.ts index 9d364be..aeed711 100644 --- a/src/blocks/carousel/types.ts +++ b/src/blocks/carousel/types.ts @@ -66,4 +66,12 @@ export type CarouselContext = { ref?: HTMLElement | null; slideCount: number; initialized?: boolean; + autoScroll: boolean | { + speed: number; + direction: 'forward' | 'backward'; + startDelay: number; + stopOnInteraction: boolean; + stopOnMouseEnter: boolean; + stopOnFocusIn: boolean; + }; }; diff --git a/src/blocks/carousel/view.ts b/src/blocks/carousel/view.ts index c2ae8e4..5c68545 100644 --- a/src/blocks/carousel/view.ts +++ b/src/blocks/carousel/view.ts @@ -4,6 +4,8 @@ import EmblaCarousel, { type EmblaCarouselType, } from 'embla-carousel'; import Autoplay, { type AutoplayOptionsType } from 'embla-carousel-autoplay'; +import AutoScroll, { type AutoScrollOptionsType } from 'embla-carousel-auto-scroll'; + import type { CarouselContext } from './types'; import { DYNAMIC_LIST_CONTAINER_SELECTOR, @@ -310,6 +312,10 @@ store( 'rt-carousel/carousel', { plugins.push( Autoplay( context.autoplay as AutoplayOptionsType ) ); } + if (context.autoScroll) { + plugins.push( AutoScroll( context.autoScroll as AutoScrollOptionsType) ); + } + const embla = EmblaCarousel( viewport, options, plugins ); emblaInstances.set( viewport, embla ); From ec47a921bb5e3b74cc957bfd7b3ce3d811081246 Mon Sep 17 00:00:00 2001 From: aadil42 Date: Sat, 6 Jun 2026 15:05:45 +0530 Subject: [PATCH 04/10] feat: add Auto Scroll speed setting --- src/blocks/carousel/block.json | 4 ++++ src/blocks/carousel/edit.tsx | 13 ++++++++++++- src/blocks/carousel/save.tsx | 3 ++- src/blocks/carousel/types.ts | 1 + 4 files changed, 19 insertions(+), 2 deletions(-) diff --git a/src/blocks/carousel/block.json b/src/blocks/carousel/block.json index 1d8ce21..b90b7fb 100644 --- a/src/blocks/carousel/block.json +++ b/src/blocks/carousel/block.json @@ -89,6 +89,10 @@ "autoScroll": { "type": "boolean", "default": false + }, + "autoScrollSpeed": { + "type": "number", + "default": 2 } }, "editorScript": "file:./index.js", diff --git a/src/blocks/carousel/edit.tsx b/src/blocks/carousel/edit.tsx index 23383e2..8744c14 100644 --- a/src/blocks/carousel/edit.tsx +++ b/src/blocks/carousel/edit.tsx @@ -55,6 +55,7 @@ export default function Edit( { ariaLabel, slidesToScroll = '1', autoScroll, + autoScrollSpeed, } = attributes; const [ emblaApi, setEmblaApi ] = useState(); @@ -478,7 +479,17 @@ export default function Edit( { autoplay: value ? false : autoplay, } ) } /> - + { autoScroll && ( <> + + setAttributes( { autoScrollSpeed: value ?? 2 } ) + } + min={ 1 } + max={ 10 } + /> + ) } diff --git a/src/blocks/carousel/save.tsx b/src/blocks/carousel/save.tsx index ce192a8..0d48477 100644 --- a/src/blocks/carousel/save.tsx +++ b/src/blocks/carousel/save.tsx @@ -23,6 +23,7 @@ export default function Save( { height, slidesToScroll, autoScroll, + autoScrollSpeed, } = attributes; // Pass configuration to the frontend via data-wp-context @@ -66,7 +67,7 @@ export default function Save( { 'rt-carousel', ), autoScroll: autoScroll ? { - speed: 2, + speed: autoScrollSpeed, direction: 'forward', startDelay: 1000, stopOnInteraction: true, diff --git a/src/blocks/carousel/types.ts b/src/blocks/carousel/types.ts index aeed711..63d4e5e 100644 --- a/src/blocks/carousel/types.ts +++ b/src/blocks/carousel/types.ts @@ -19,6 +19,7 @@ export type CarouselAttributes = { slideGap: number; slidesToScroll: string; autoScroll: boolean; + autoScrollSpeed: number; }; export type CarouselViewportAttributes = Record; From 1c3aff058a469f92e859d05932a31ae4364081a2 Mon Sep 17 00:00:00 2001 From: aadil42 Date: Sat, 6 Jun 2026 16:02:30 +0530 Subject: [PATCH 05/10] feat: add Auto Scroll direction setting --- src/blocks/carousel/block.json | 5 +++++ src/blocks/carousel/edit.tsx | 12 ++++++++++++ src/blocks/carousel/save.tsx | 3 ++- src/blocks/carousel/types.ts | 1 + 4 files changed, 20 insertions(+), 1 deletion(-) diff --git a/src/blocks/carousel/block.json b/src/blocks/carousel/block.json index b90b7fb..46f499e 100644 --- a/src/blocks/carousel/block.json +++ b/src/blocks/carousel/block.json @@ -93,6 +93,11 @@ "autoScrollSpeed": { "type": "number", "default": 2 + }, + "autoScrollDirection": { + "type": "string", + "default": "ltr", + "enum": ["forward", "backward"] } }, "editorScript": "file:./index.js", diff --git a/src/blocks/carousel/edit.tsx b/src/blocks/carousel/edit.tsx index 8744c14..70eb916 100644 --- a/src/blocks/carousel/edit.tsx +++ b/src/blocks/carousel/edit.tsx @@ -56,6 +56,7 @@ export default function Edit( { slidesToScroll = '1', autoScroll, autoScrollSpeed, + autoScrollDirection } = attributes; const [ emblaApi, setEmblaApi ] = useState(); @@ -489,6 +490,17 @@ export default function Edit( { min={ 1 } max={ 10 } /> + + setAttributes( { autoScrollDirection: value as CarouselAttributes['autoScrollDirection']} ) + } + /> ) } diff --git a/src/blocks/carousel/save.tsx b/src/blocks/carousel/save.tsx index 0d48477..09825ac 100644 --- a/src/blocks/carousel/save.tsx +++ b/src/blocks/carousel/save.tsx @@ -24,6 +24,7 @@ export default function Save( { slidesToScroll, autoScroll, autoScrollSpeed, + autoScrollDirection } = attributes; // Pass configuration to the frontend via data-wp-context @@ -68,7 +69,7 @@ export default function Save( { ), autoScroll: autoScroll ? { speed: autoScrollSpeed, - direction: 'forward', + direction: autoScrollDirection, startDelay: 1000, stopOnInteraction: true, stopOnMouseEnter: false, diff --git a/src/blocks/carousel/types.ts b/src/blocks/carousel/types.ts index 63d4e5e..ad4a3ba 100644 --- a/src/blocks/carousel/types.ts +++ b/src/blocks/carousel/types.ts @@ -20,6 +20,7 @@ export type CarouselAttributes = { slidesToScroll: string; autoScroll: boolean; autoScrollSpeed: number; + autoScrollDirection: 'forward' | 'backward'; }; export type CarouselViewportAttributes = Record; From e1c43c21a56e2a9efd07097bcf870e47d668b809 Mon Sep 17 00:00:00 2001 From: aadil42 Date: Sat, 6 Jun 2026 16:21:45 +0530 Subject: [PATCH 06/10] fix: force loop when auto scroll direction is backward --- src/blocks/carousel/edit.tsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/blocks/carousel/edit.tsx b/src/blocks/carousel/edit.tsx index 70eb916..80d0b9c 100644 --- a/src/blocks/carousel/edit.tsx +++ b/src/blocks/carousel/edit.tsx @@ -317,11 +317,11 @@ export default function Edit( { setAttributes( { loop: value } ) } - help={ __( - 'Enables infinite scrolling of slides.', - 'rt-carousel', - ) } + help={ autoScrollDirection === 'backward' + ? __( 'Loop is required for backward auto scroll.', 'rt-carousel' ) + : __( 'Enables infinite scrolling of slides.', 'rt-carousel' ) } /> - setAttributes( { autoScrollDirection: value as CarouselAttributes['autoScrollDirection']} ) + setAttributes( { + autoScrollDirection: value as CarouselAttributes['autoScrollDirection'], + loop: value === 'backward' ? true : loop, + } ) } /> ) } From a5f00b01a74c56f95143ecdfec5d5b505d0bad65 Mon Sep 17 00:00:00 2001 From: aadil42 Date: Sat, 6 Jun 2026 16:33:38 +0530 Subject: [PATCH 07/10] feat: add Auto Scroll start delay setting --- src/blocks/carousel/block.json | 4 ++++ src/blocks/carousel/edit.tsx | 13 ++++++++++++- src/blocks/carousel/save.tsx | 5 +++-- src/blocks/carousel/types.ts | 1 + 4 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/blocks/carousel/block.json b/src/blocks/carousel/block.json index 46f499e..6db94f3 100644 --- a/src/blocks/carousel/block.json +++ b/src/blocks/carousel/block.json @@ -98,6 +98,10 @@ "type": "string", "default": "ltr", "enum": ["forward", "backward"] + }, + "autoScrollStartDelay": { + "type": "number", + "default": 1000 } }, "editorScript": "file:./index.js", diff --git a/src/blocks/carousel/edit.tsx b/src/blocks/carousel/edit.tsx index 80d0b9c..9b5a688 100644 --- a/src/blocks/carousel/edit.tsx +++ b/src/blocks/carousel/edit.tsx @@ -56,7 +56,8 @@ export default function Edit( { slidesToScroll = '1', autoScroll, autoScrollSpeed, - autoScrollDirection + autoScrollDirection, + autoScrollStartDelay } = attributes; const [ emblaApi, setEmblaApi ] = useState(); @@ -504,6 +505,16 @@ export default function Edit( { } ) } /> + + setAttributes( { autoScrollStartDelay: value ?? 1000 } ) + } + min={ 0 } + max={ 10000 } + step={ 100 } + /> ) } diff --git a/src/blocks/carousel/save.tsx b/src/blocks/carousel/save.tsx index 09825ac..ccd61e8 100644 --- a/src/blocks/carousel/save.tsx +++ b/src/blocks/carousel/save.tsx @@ -24,7 +24,8 @@ export default function Save( { slidesToScroll, autoScroll, autoScrollSpeed, - autoScrollDirection + autoScrollDirection, + autoScrollStartDelay } = attributes; // Pass configuration to the frontend via data-wp-context @@ -70,7 +71,7 @@ export default function Save( { autoScroll: autoScroll ? { speed: autoScrollSpeed, direction: autoScrollDirection, - startDelay: 1000, + startDelay: autoScrollStartDelay, stopOnInteraction: true, stopOnMouseEnter: false, stopOnFocusIn: true, diff --git a/src/blocks/carousel/types.ts b/src/blocks/carousel/types.ts index ad4a3ba..3963ea5 100644 --- a/src/blocks/carousel/types.ts +++ b/src/blocks/carousel/types.ts @@ -21,6 +21,7 @@ export type CarouselAttributes = { autoScroll: boolean; autoScrollSpeed: number; autoScrollDirection: 'forward' | 'backward'; + autoScrollStartDelay: number; }; export type CarouselViewportAttributes = Record; From 7256f7edb4ccedfb1f9a9db115b3e74eac730515 Mon Sep 17 00:00:00 2001 From: aadil42 Date: Sat, 6 Jun 2026 16:45:29 +0530 Subject: [PATCH 08/10] feat: add Auto Scroll stop on interaction setting --- src/blocks/carousel/block.json | 4 ++++ src/blocks/carousel/edit.tsx | 11 ++++++++++- src/blocks/carousel/save.tsx | 5 +++-- src/blocks/carousel/types.ts | 1 + 4 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/blocks/carousel/block.json b/src/blocks/carousel/block.json index 6db94f3..35abdcb 100644 --- a/src/blocks/carousel/block.json +++ b/src/blocks/carousel/block.json @@ -102,6 +102,10 @@ "autoScrollStartDelay": { "type": "number", "default": 1000 + }, + "autoScrollStopOnInteraction": { + "type": "boolean", + "default": true } }, "editorScript": "file:./index.js", diff --git a/src/blocks/carousel/edit.tsx b/src/blocks/carousel/edit.tsx index 9b5a688..0ca3d6b 100644 --- a/src/blocks/carousel/edit.tsx +++ b/src/blocks/carousel/edit.tsx @@ -57,7 +57,8 @@ export default function Edit( { autoScroll, autoScrollSpeed, autoScrollDirection, - autoScrollStartDelay + autoScrollStartDelay, + autoScrollStopOnInteraction } = attributes; const [ emblaApi, setEmblaApi ] = useState(); @@ -515,6 +516,14 @@ export default function Edit( { max={ 10000 } step={ 100 } /> + + setAttributes( { autoScrollStopOnInteraction: value } ) + } + help={ __( 'Stop auto scroll when user interacts with carousel.', 'rt-carousel' ) } + /> ) } diff --git a/src/blocks/carousel/save.tsx b/src/blocks/carousel/save.tsx index ccd61e8..e13ca35 100644 --- a/src/blocks/carousel/save.tsx +++ b/src/blocks/carousel/save.tsx @@ -25,7 +25,8 @@ export default function Save( { autoScroll, autoScrollSpeed, autoScrollDirection, - autoScrollStartDelay + autoScrollStartDelay, + autoScrollStopOnInteraction, } = attributes; // Pass configuration to the frontend via data-wp-context @@ -72,7 +73,7 @@ export default function Save( { speed: autoScrollSpeed, direction: autoScrollDirection, startDelay: autoScrollStartDelay, - stopOnInteraction: true, + stopOnInteraction: autoScrollStopOnInteraction, stopOnMouseEnter: false, stopOnFocusIn: true, } diff --git a/src/blocks/carousel/types.ts b/src/blocks/carousel/types.ts index 3963ea5..a61f979 100644 --- a/src/blocks/carousel/types.ts +++ b/src/blocks/carousel/types.ts @@ -22,6 +22,7 @@ export type CarouselAttributes = { autoScrollSpeed: number; autoScrollDirection: 'forward' | 'backward'; autoScrollStartDelay: number; + autoScrollStopOnInteraction: boolean; }; export type CarouselViewportAttributes = Record; From 1a58f9d3d87adeadc6284004f2b23c42cfa1bfc1 Mon Sep 17 00:00:00 2001 From: aadil42 Date: Sat, 6 Jun 2026 16:49:35 +0530 Subject: [PATCH 09/10] feat: add Auto Scroll stop on mouse enter setting --- src/blocks/carousel/block.json | 4 ++++ src/blocks/carousel/edit.tsx | 11 ++++++++++- src/blocks/carousel/save.tsx | 3 ++- src/blocks/carousel/types.ts | 1 + 4 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/blocks/carousel/block.json b/src/blocks/carousel/block.json index 35abdcb..c5287b5 100644 --- a/src/blocks/carousel/block.json +++ b/src/blocks/carousel/block.json @@ -106,6 +106,10 @@ "autoScrollStopOnInteraction": { "type": "boolean", "default": true + }, + "autoScrollStopOnMouseEnter": { + "type": "boolean", + "default": false } }, "editorScript": "file:./index.js", diff --git a/src/blocks/carousel/edit.tsx b/src/blocks/carousel/edit.tsx index 0ca3d6b..c6a4e4e 100644 --- a/src/blocks/carousel/edit.tsx +++ b/src/blocks/carousel/edit.tsx @@ -58,7 +58,8 @@ export default function Edit( { autoScrollSpeed, autoScrollDirection, autoScrollStartDelay, - autoScrollStopOnInteraction + autoScrollStopOnInteraction, + autoScrollStopOnMouseEnter } = attributes; const [ emblaApi, setEmblaApi ] = useState(); @@ -524,6 +525,14 @@ export default function Edit( { } help={ __( 'Stop auto scroll when user interacts with carousel.', 'rt-carousel' ) } /> + + setAttributes( { autoScrollStopOnMouseEnter: value } ) + } + help={ __( 'Stop auto scroll when mouse hovers over carousel.', 'rt-carousel' ) } + /> ) } diff --git a/src/blocks/carousel/save.tsx b/src/blocks/carousel/save.tsx index e13ca35..0cf718b 100644 --- a/src/blocks/carousel/save.tsx +++ b/src/blocks/carousel/save.tsx @@ -27,6 +27,7 @@ export default function Save( { autoScrollDirection, autoScrollStartDelay, autoScrollStopOnInteraction, + autoScrollStopOnMouseEnter, } = attributes; // Pass configuration to the frontend via data-wp-context @@ -74,7 +75,7 @@ export default function Save( { direction: autoScrollDirection, startDelay: autoScrollStartDelay, stopOnInteraction: autoScrollStopOnInteraction, - stopOnMouseEnter: false, + stopOnMouseEnter: autoScrollStopOnMouseEnter, stopOnFocusIn: true, } : false, diff --git a/src/blocks/carousel/types.ts b/src/blocks/carousel/types.ts index a61f979..f4f34fd 100644 --- a/src/blocks/carousel/types.ts +++ b/src/blocks/carousel/types.ts @@ -23,6 +23,7 @@ export type CarouselAttributes = { autoScrollDirection: 'forward' | 'backward'; autoScrollStartDelay: number; autoScrollStopOnInteraction: boolean; + autoScrollStopOnMouseEnter: boolean; }; export type CarouselViewportAttributes = Record; From ec68a7b7533ae2fe81ee4a880857d1b11bd64ae6 Mon Sep 17 00:00:00 2001 From: aadil42 Date: Sat, 6 Jun 2026 18:54:57 +0530 Subject: [PATCH 10/10] test: add unit tests for Auto Scroll configuration --- src/blocks/carousel/__tests__/edit.test.tsx | 18 ++++++++++++ src/blocks/carousel/__tests__/view.test.ts | 31 +++++++++++++++++++++ 2 files changed, 49 insertions(+) diff --git a/src/blocks/carousel/__tests__/edit.test.tsx b/src/blocks/carousel/__tests__/edit.test.tsx index 62297fe..d7e67e0 100644 --- a/src/blocks/carousel/__tests__/edit.test.tsx +++ b/src/blocks/carousel/__tests__/edit.test.tsx @@ -157,6 +157,12 @@ const createAttributes = (): CarouselAttributes => ( { ariaLabel: 'Carousel', slidesToScroll: '1', slideGap: 0, + autoScroll: false, + autoScrollSpeed: 2, + autoScrollDirection: 'forward' as const, + autoScrollStartDelay: 1000, + autoScrollStopOnInteraction: true, + autoScrollStopOnMouseEnter: false, } ); describe( 'Carousel Edit setup flow', () => { @@ -217,4 +223,16 @@ describe( 'Carousel Edit setup flow', () => { Object.defineProperty( globalThis, 'document', originalDocumentDescriptor ); } } ); + + it( 'should have correct default autoScroll attributes', () => { + const attributes = createAttributes(); + expect( attributes.autoScroll ).toBe( false ); + expect( attributes.autoScrollSpeed ).toBe( 2 ); + expect( attributes.autoScrollDirection ).toBe( 'forward' ); + expect( attributes.autoScrollStartDelay ).toBe( 1000 ); + expect( attributes.autoScrollStopOnInteraction ).toBe( true ); + expect( attributes.autoScrollStopOnMouseEnter ).toBe( false ); + } ); + + } ); diff --git a/src/blocks/carousel/__tests__/view.test.ts b/src/blocks/carousel/__tests__/view.test.ts index 599fca3..e06e25f 100644 --- a/src/blocks/carousel/__tests__/view.test.ts +++ b/src/blocks/carousel/__tests__/view.test.ts @@ -68,6 +68,7 @@ const createMockContext = ( scrollProgress: 0, slideCount: 3, ariaLabelPattern: 'Go to slide %d', + autoScroll: false, ...overrides, } ); @@ -1010,4 +1011,34 @@ describe( 'Edge Cases and Error Handling', () => { expect( mockContext.scrollSnaps ).toHaveLength( 100 ); expect( mockContext.selectedIndex ).toBe( 50 ); } ); + + it( 'should handle autoScroll configuration', () => { + const mockContextWithAutoScroll = createMockContext( { + autoScroll: { + speed: 3, + direction: 'forward', + startDelay: 500, + stopOnInteraction: false, + stopOnMouseEnter: true, + stopOnFocusIn: false, + }, + } ); + + expect( mockContextWithAutoScroll.autoScroll ).toEqual( { + speed: 3, + direction: 'forward', + startDelay: 500, + stopOnInteraction: false, + stopOnMouseEnter: true, + stopOnFocusIn: false, + } ); + } ); + + it( 'should handle autoScroll disabled', () => { + const mockContext = createMockContext( { + autoScroll: false, + } ); + + expect( mockContext.autoScroll ).toBe( false ); + } ); } );