feat: add Embla Auto Scroll plugin support with editor controls

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",
     "embla-carousel-fade": "8.6.0",
     "react": "^18.3.1",

src/blocks/carousel/__tests__/edit.test.tsx

@@ -159,6 +159,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', () => {
@@ -220,6 +226,16 @@ describe( 'Carousel Edit setup flow', () => {
 		}
 	} );
 
+	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 );
+	} );
+
 	it( 'renders a Transition select and hides slide-only controls when fade is active', () => {
 		render(
 			<Edit

src/blocks/carousel/__tests__/types.test.ts

@@ -34,6 +34,12 @@ describe( 'CarouselAttributes Type', () => {
 				ariaLabel: 'Image carousel',
 				slideGap: 16,
 				slidesToScroll: '1',
+				autoScroll: false,
+				autoScrollSpeed: 2,
+				autoScrollDirection: 'forward',
+				autoScrollStartDelay: 1000,
+				autoScrollStopOnInteraction: true,
+				autoScrollStopOnMouseEnter: false,
 			};
 
 			expect( attributes ).toBeDefined();
@@ -60,6 +66,12 @@ describe( 'CarouselAttributes Type', () => {
 				ariaLabel: '',
 				slideGap: 0,
 				slidesToScroll: 'auto',
+				autoScroll: false,
+				autoScrollSpeed: 2,
+				autoScrollDirection: 'forward',
+				autoScrollStartDelay: 1000,
+				autoScrollStopOnInteraction: true,
+				autoScrollStopOnMouseEnter: false,
 			};
 
 			// Verify all keys exist
@@ -268,6 +280,7 @@ describe( 'CarouselContext Type', () => {
 				scrollProgress: 0,
 				slideCount: 2,
 				ariaLabelPattern: 'Go to slide %d',
+				autoScroll: false,
 			};
 
 			expect( context.autoplay ).toBe( false );
@@ -295,6 +308,7 @@ describe( 'CarouselContext Type', () => {
 				scrollProgress: 0.5,
 				slideCount: 3,
 				ariaLabelPattern: 'Slide %d of 3',
+				autoScroll: false,
 			};
 
 			expect( context.autoplay ).not.toBe( false );
@@ -323,6 +337,7 @@ describe( 'CarouselContext Type', () => {
 				scrollProgress: 0,
 				slideCount: 3,
 				ariaLabelPattern: 'Slide %d',
+				autoScroll: false,
 			};
 
 			expect( context.selectedIndex ).toBe( 0 );
@@ -344,6 +359,7 @@ describe( 'CarouselContext Type', () => {
 				scrollProgress: 0.5,
 				slideCount: 3,
 				ariaLabelPattern: 'Slide %d',
+				autoScroll: false,
 			};
 
 			expect( context.selectedIndex ).toBe( 1 );
@@ -365,6 +381,7 @@ describe( 'CarouselContext Type', () => {
 				scrollProgress: 1,
 				slideCount: 3,
 				ariaLabelPattern: 'Slide %d',
+				autoScroll: false,
 			};
 
 			expect( context.selectedIndex ).toBe( 2 );
@@ -386,6 +403,7 @@ describe( 'CarouselContext Type', () => {
 				scrollProgress: 0,
 				slideCount: 1,
 				ariaLabelPattern: 'Slide %d',
+				autoScroll: false,
 			};
 
 			expect( context.scrollSnaps ).toHaveLength( 1 );
@@ -409,6 +427,7 @@ describe( 'CarouselContext Type', () => {
 				scrollProgress: 0,
 				slideCount: 1,
 				ariaLabelPattern: 'Slide %d',
+				autoScroll: false,
 			};
 
 			expect( context.timerIterationId ).toBe( 5 );
@@ -432,6 +451,7 @@ describe( 'CarouselContext Type', () => {
 				scrollProgress: 0,
 				slideCount: 0,
 				ariaLabelPattern: 'Slide %d',
+				autoScroll: false,
 			};
 
 			expect( context.timerIterationId ).toBe( 0 );
@@ -456,6 +476,7 @@ describe( 'CarouselContext Type', () => {
 				slideCount: 0,
 				ariaLabelPattern: 'Slide %d',
 				ref: element,
+				autoScroll: false,
 			};
 
 			expect( context.ref ).toBe( element );
@@ -477,6 +498,7 @@ describe( 'CarouselContext Type', () => {
 				slideCount: 0,
 				ariaLabelPattern: 'Slide %d',
 				ref: null,
+				autoScroll: false,
 			};
 
 			expect( context.ref ).toBeNull();
@@ -496,6 +518,7 @@ describe( 'CarouselContext Type', () => {
 				scrollProgress: 0,
 				slideCount: 0,
 				ariaLabelPattern: 'Slide %d',
+				autoScroll: false,
 			};
 
 			expect( context.ref ).toBeUndefined();
@@ -520,6 +543,7 @@ describe( 'CarouselContext Type', () => {
 				scrollProgress: 0,
 				slideCount: 0,
 				ariaLabelPattern: 'Slide %d',
+				autoScroll: false,
 			};
 
 			expect( context.options.slidesToScroll ).toBe( 2 );
@@ -542,6 +566,7 @@ describe( 'CarouselContext Type', () => {
 				scrollProgress: 0,
 				slideCount: 0,
 				ariaLabelPattern: 'Slide %d',
+				autoScroll: false,
 			};
 
 			expect( context.options.slidesToScroll ).toBe( 'auto' );
@@ -571,6 +596,7 @@ describe( 'CarouselContext Type', () => {
 					scrollProgress: 0,
 					slideCount: 0,
 					ariaLabelPattern: pattern,
+					autoScroll: false,
 				};
 
 				expect( context.ariaLabelPattern ).toBe( pattern );
@@ -593,6 +619,7 @@ describe( 'CarouselContext Type', () => {
 				scrollProgress: 0,
 				slideCount: 0,
 				ariaLabelPattern: 'Slide %d',
+				autoScroll: false,
 			};
 
 			expect( context.scrollSnaps ).toHaveLength( 0 );
@@ -620,6 +647,7 @@ describe( 'CarouselContext Type', () => {
 				scrollProgress: 0,
 				slideCount: 5,
 				ariaLabelPattern: 'Slide %d',
+				autoScroll: false,
 			};
 
 			expect( context.scrollSnaps ).toHaveLength( 5 );

src/blocks/carousel/__tests__/view.test.ts

@@ -70,6 +70,7 @@ const createMockContext = (
 	scrollProgress: 0,
 	slideCount: 3,
 	ariaLabelPattern: 'Go to slide %d',
+	autoScroll: false,
 	...overrides,
 } );
 
@@ -1094,4 +1095,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 );
+	} );
 } );

src/blocks/carousel/block.json

@@ -90,6 +90,31 @@
 		"slidesToScroll": {
 			"type": "string",
 			"default": "1"
+		},
+		"autoScroll": {
+			"type": "boolean",
+			"default": false
+		},
+		"autoScrollSpeed": {
+			"type": "number",
+			"default": 2
+		},
+		"autoScrollDirection": {
+			"type": "string",
+			"default": "forward",
+			"enum": ["forward", "backward"]
+		},
+		"autoScrollStartDelay": {
+			"type": "number",
+			"default": 1000
+		},
+		"autoScrollStopOnInteraction": {
+			"type": "boolean",
+			"default": true
+		},
+		"autoScrollStopOnMouseEnter": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"editorScript": "file:./index.js",