Add support for the progress bar.

inc/Plugin.php

@@ -70,6 +70,7 @@ public function register_blocks(): void {
 			'carousel',
 			'carousel/controls',
 			'carousel/dots',
+			'carousel/progress',
 			'carousel/viewport',
 			'carousel/slide',
 		];

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

@@ -251,6 +251,8 @@ describe( 'CarouselContext Type', () => {
 				scrollSnaps: [ { index: 0 }, { index: 1 } ],
 				canScrollPrev: false,
 				canScrollNext: true,
+				scrollProgress: 0,
+				slideCount: 2,
 				ariaLabelPattern: 'Go to slide %d',
 			};
 
@@ -275,6 +277,8 @@ describe( 'CarouselContext Type', () => {
 				scrollSnaps: [ { index: 0 }, { index: 1 }, { index: 2 } ],
 				canScrollPrev: true,
 				canScrollNext: true,
+				scrollProgress: 0.5,
+				slideCount: 3,
 				ariaLabelPattern: 'Slide %d of 3',
 			};
 
@@ -300,6 +304,8 @@ describe( 'CarouselContext Type', () => {
 				scrollSnaps: [ { index: 0 }, { index: 1 }, { index: 2 } ],
 				canScrollPrev: false,
 				canScrollNext: true,
+				scrollProgress: 0,
+				slideCount: 3,
 				ariaLabelPattern: 'Slide %d',
 			};
 
@@ -318,6 +324,8 @@ describe( 'CarouselContext Type', () => {
 				scrollSnaps: [ { index: 0 }, { index: 1 }, { index: 2 } ],
 				canScrollPrev: true,
 				canScrollNext: true,
+				scrollProgress: 0.5,
+				slideCount: 3,
 				ariaLabelPattern: 'Slide %d',
 			};
 
@@ -336,6 +344,8 @@ describe( 'CarouselContext Type', () => {
 				scrollSnaps: [ { index: 0 }, { index: 1 }, { index: 2 } ],
 				canScrollPrev: true,
 				canScrollNext: false,
+				scrollProgress: 1,
+				slideCount: 3,
 				ariaLabelPattern: 'Slide %d',
 			};
 
@@ -354,6 +364,8 @@ describe( 'CarouselContext Type', () => {
 				scrollSnaps: [ { index: 0 } ],
 				canScrollPrev: false,
 				canScrollNext: false,
+				scrollProgress: 0,
+				slideCount: 1,
 				ariaLabelPattern: 'Slide %d',
 			};
 
@@ -374,6 +386,8 @@ describe( 'CarouselContext Type', () => {
 				scrollSnaps: [ { index: 0 } ],
 				canScrollPrev: false,
 				canScrollNext: false,
+				scrollProgress: 0,
+				slideCount: 1,
 				ariaLabelPattern: 'Slide %d',
 			};
 
@@ -394,6 +408,8 @@ describe( 'CarouselContext Type', () => {
 				scrollSnaps: [],
 				canScrollPrev: false,
 				canScrollNext: false,
+				scrollProgress: 0,
+				slideCount: 0,
 				ariaLabelPattern: 'Slide %d',
 			};
 
@@ -414,6 +430,8 @@ describe( 'CarouselContext Type', () => {
 				scrollSnaps: [],
 				canScrollPrev: false,
 				canScrollNext: false,
+				scrollProgress: 0,
+				slideCount: 0,
 				ariaLabelPattern: 'Slide %d',
 				ref: element,
 			};
@@ -432,6 +450,8 @@ describe( 'CarouselContext Type', () => {
 				scrollSnaps: [],
 				canScrollPrev: false,
 				canScrollNext: false,
+				scrollProgress: 0,
+				slideCount: 0,
 				ariaLabelPattern: 'Slide %d',
 				ref: null,
 			};
@@ -449,6 +469,8 @@ describe( 'CarouselContext Type', () => {
 				scrollSnaps: [],
 				canScrollPrev: false,
 				canScrollNext: false,
+				scrollProgress: 0,
+				slideCount: 0,
 				ariaLabelPattern: 'Slide %d',
 			};
 
@@ -470,6 +492,8 @@ describe( 'CarouselContext Type', () => {
 				scrollSnaps: [],
 				canScrollPrev: false,
 				canScrollNext: false,
+				scrollProgress: 0,
+				slideCount: 0,
 				ariaLabelPattern: 'Slide %d',
 			};
 
@@ -489,6 +513,8 @@ describe( 'CarouselContext Type', () => {
 				scrollSnaps: [],
 				canScrollPrev: false,
 				canScrollNext: false,
+				scrollProgress: 0,
+				slideCount: 0,
 				ariaLabelPattern: 'Slide %d',
 			};
 
@@ -515,6 +541,8 @@ describe( 'CarouselContext Type', () => {
 					scrollSnaps: [],
 					canScrollPrev: false,
 					canScrollNext: false,
+					scrollProgress: 0,
+					slideCount: 0,
 					ariaLabelPattern: pattern,
 				};
 
@@ -534,6 +562,8 @@ describe( 'CarouselContext Type', () => {
 				scrollSnaps: [],
 				canScrollPrev: false,
 				canScrollNext: false,
+				scrollProgress: 0,
+				slideCount: 0,
 				ariaLabelPattern: 'Slide %d',
 			};
 
@@ -558,6 +588,8 @@ describe( 'CarouselContext Type', () => {
 				scrollSnaps,
 				canScrollPrev: false,
 				canScrollNext: false,
+				scrollProgress: 0,
+				slideCount: 5,
 				ariaLabelPattern: 'Slide %d',
 			};
 

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

@@ -65,6 +65,8 @@ const createMockContext = (
 	scrollSnaps: [ { index: 0 }, { index: 1 }, { index: 2 } ],
 	canScrollPrev: true,
 	canScrollNext: true,
+	scrollProgress: 0,
+	slideCount: 3,
 	ariaLabelPattern: 'Go to slide %d',
 	...overrides,
 } );
@@ -516,6 +518,114 @@ describe( 'Carousel View Module', () => {
 			} );
 		} );
 
+		describe( 'getProgressBarNow', () => {
+			it( 'should return 0 when slideCount is 0', () => {
+				const mockContext = createMockContext( { slideCount: 0 } );
+				( getContext as jest.Mock ).mockReturnValue( mockContext );
+
+				const result = storeConfig.callbacks.getProgressBarNow();
+				expect( result ).toBe( 0 );
+			} );
+
+			it( 'should return 0 when slideCount is 1', () => {
+				const mockContext = createMockContext( { slideCount: 1 } );
+				( getContext as jest.Mock ).mockReturnValue( mockContext );
+
+				const result = storeConfig.callbacks.getProgressBarNow();
+				expect( result ).toBe( 0 );
+			} );
+
+			it( 'should use index-based progress in loop mode', () => {
+				const mockContext = createMockContext( {
+					options: { loop: true },
+					selectedIndex: 1,
+					slideCount: 3,
+				} );
+				( getContext as jest.Mock ).mockReturnValue( mockContext );
+
+				const result = storeConfig.callbacks.getProgressBarNow();
+				expect( result ).toBe( 50 );
+			} );
+
+			it( 'should return 100 at last slide in loop mode', () => {
+				const mockContext = createMockContext( {
+					options: { loop: true },
+					selectedIndex: 2,
+					slideCount: 3,
+				} );
+				( getContext as jest.Mock ).mockReturnValue( mockContext );
+
+				const result = storeConfig.callbacks.getProgressBarNow();
+				expect( result ).toBe( 100 );
+			} );
+
+			it( 'should use scrollProgress in non-loop mode', () => {
+				const mockContext = createMockContext( {
+					options: { loop: false },
+					scrollProgress: 0.75,
+					slideCount: 4,
+				} );
+				( getContext as jest.Mock ).mockReturnValue( mockContext );
+
+				const result = storeConfig.callbacks.getProgressBarNow();
+				expect( result ).toBe( 75 );
+			} );
+
+			it( 'should clamp scrollProgress to [0, 1] in non-loop mode', () => {
+				const mockContext = createMockContext( {
+					options: { loop: false },
+					scrollProgress: 1.5,
+					slideCount: 3,
+				} );
+				( getContext as jest.Mock ).mockReturnValue( mockContext );
+
+				const result = storeConfig.callbacks.getProgressBarNow();
+				expect( result ).toBe( 100 );
+			} );
+		} );
+
+		describe( 'getProgressBarStyle', () => {
+			it( 'should return display:none when slideCount is 0', () => {
+				const mockContext = createMockContext( { slideCount: 0 } );
+				( getContext as jest.Mock ).mockReturnValue( mockContext );
+
+				const result = storeConfig.callbacks.getProgressBarStyle();
+				expect( result ).toBe( 'display:none' );
+			} );
+
+			it( 'should return display:none when slideCount is 1', () => {
+				const mockContext = createMockContext( { slideCount: 1 } );
+				( getContext as jest.Mock ).mockReturnValue( mockContext );
+
+				const result = storeConfig.callbacks.getProgressBarStyle();
+				expect( result ).toBe( 'display:none' );
+			} );
+
+			it( 'should return transform style with index-based progress in loop mode', () => {
+				const mockContext = createMockContext( {
+					options: { loop: true },
+					selectedIndex: 1,
+					slideCount: 3,
+				} );
+				( getContext as jest.Mock ).mockReturnValue( mockContext );
+
+				const result = storeConfig.callbacks.getProgressBarStyle();
+				expect( result ).toBe( 'transform:translate3d(50%, 0px, 0px)' );
+			} );
+
+			it( 'should return transform style with scrollProgress in non-loop mode', () => {
+				const mockContext = createMockContext( {
+					options: { loop: false },
+					scrollProgress: 0.5,
+					slideCount: 3,
+				} );
+				( getContext as jest.Mock ).mockReturnValue( mockContext );
+
+				const result = storeConfig.callbacks.getProgressBarStyle();
+				expect( result ).toBe( 'transform:translate3d(50%, 0px, 0px)' );
+			} );
+		} );
+
 		describe( 'initCarousel', () => {
 			it( 'should be defined as a function', () => {
 				expect( storeConfig?.callbacks?.initCarousel ).toBeDefined();

src/blocks/carousel/edit.tsx

@@ -20,7 +20,7 @@ import {
 } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useMemo, useCallback } from '@wordpress/element';
+import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
 import { createBlock, type BlockConfiguration } from '@wordpress/blocks';
 import type { CarouselAttributes } from './types';
 import { EditorCarouselContext } from './editor-context';
@@ -55,6 +55,9 @@ export default function Edit( {
 	const [ emblaApi, setEmblaApi ] = useState<EmblaCarouselType | undefined>();
 	const [ canScrollPrev, setCanScrollPrev ] = useState( false );
 	const [ canScrollNext, setCanScrollNext ] = useState( false );
+	const [ scrollProgress, setScrollProgress ] = useState( 0 );
+	const [ selectedIndex, setSelectedIndex ] = useState( 0 );
+	const [ slideCount, setSlideCount ] = useState( 0 );
 
 	const { replaceInnerBlocks, insertBlock } = useDispatch( 'core/block-editor' );
 
@@ -126,19 +129,58 @@ export default function Edit( {
 			setCanScrollPrev,
 			canScrollNext,
 			setCanScrollNext,
+			scrollProgress,
+			setScrollProgress,
+			selectedIndex,
+			slideCount,
 			carouselOptions,
 		} ),
 		[
 			emblaApi,
 			canScrollPrev,
 			canScrollNext,
+			scrollProgress,
+			selectedIndex,
+			slideCount,
 			carouselOptions,
 			setEmblaApi,
 			setCanScrollPrev,
 			setCanScrollNext,
+			setScrollProgress,
 		],
 	);
 
+	// Subscribe to Embla events to update scrollProgress, selectedIndex, and slideCount
+	useEffect( () => {
+		if ( ! emblaApi ) {
+			return;
+		}
+
+		const updateScrollProgress = () => {
+			setScrollProgress( emblaApi.scrollProgress() );
+		};
+
+		const updateState = () => {
+			setSelectedIndex( emblaApi.selectedScrollSnap() );
+			setSlideCount( emblaApi.slideNodes().length );
+			updateScrollProgress();
+		};
+
+		emblaApi
+			.on( 'scroll', updateScrollProgress )
+			.on( 'select', updateState )
+			.on( 'reInit', updateState );
+
+		updateState();
+
+		return () => {
+			emblaApi
+				.off( 'scroll', updateScrollProgress )
+				.off( 'select', updateState )
+				.off( 'reInit', updateState );
+		};
+	}, [ emblaApi ] );
+
 	const createNavGroup = () =>
 		createBlock(
 			'core/group',
@@ -155,8 +197,8 @@ export default function Edit( {
 			],
 		);
 
-	const handleSetup = ( slideCount: number ) => {
-		const slides = Array.from( { length: slideCount }, () =>
+	const handleSetup = ( count: number ) => {
+		const slides = Array.from( { length: count }, () =>
 			createBlock( 'carousel-kit/carousel-slide', {}, [
 				createBlock( 'core/paragraph', {} ),
 			] ),

src/blocks/carousel/editor-context.ts

@@ -9,6 +9,10 @@ export type EditorCarouselContextType = {
 	canScrollNext: boolean;
 	setCanScrollPrev: ( value: boolean ) => void;
 	setCanScrollNext: ( value: boolean ) => void;
+	scrollProgress: number;
+	setScrollProgress: ( value: number ) => void;
+	selectedIndex: number;
+	slideCount: number;
 	carouselOptions: Omit<Partial<CarouselAttributes>, 'slidesToScroll'> & {
 		slidesToScroll?: number | string;
 	};
@@ -22,6 +26,10 @@ const defaultValue: EditorCarouselContextType = {
 	canScrollNext: false,
 	setCanScrollPrev: () => {},
 	setCanScrollNext: () => {},
+	scrollProgress: 0,
+	setScrollProgress: () => {},
+	selectedIndex: 0,
+	slideCount: 0,
 	carouselOptions: {},
 };