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/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,7 @@ 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 { replaceInnerBlocks, insertBlock } = useDispatch( 'core/block-editor' );
 
@@ -126,19 +127,46 @@ export default function Edit( {
 			setCanScrollPrev,
 			canScrollNext,
 			setCanScrollNext,
+			scrollProgress,
+			setScrollProgress,
 			carouselOptions,
 		} ),
 		[
 			emblaApi,
 			canScrollPrev,
 			canScrollNext,
+			scrollProgress,
 			carouselOptions,
 			setEmblaApi,
 			setCanScrollPrev,
 			setCanScrollNext,
+			setScrollProgress,
 		],
 	);
 
+	// Subscribe to Embla scroll event to update scrollProgress
+	useEffect(() => {
+		if (!emblaApi) return;
+
+		const updateScrollProgress = () => {
+			setScrollProgress(emblaApi.scrollProgress());
+		};
+
+		emblaApi
+			.on('scroll', updateScrollProgress)
+			.on('select', updateScrollProgress)
+			.on('reInit', updateScrollProgress);
+
+		updateScrollProgress();
+
+		return () => {
+			emblaApi
+				.off('scroll', updateScrollProgress)
+				.off('select', updateScrollProgress)
+				.off('reInit', updateScrollProgress);
+		};
+	}, [emblaApi]);
+
 	const createNavGroup = () =>
 		createBlock(
 			'core/group',

src/blocks/carousel/editor-context.ts

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

src/blocks/carousel/progress/block.json

@@ -0,0 +1,20 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"version": "1.0.0",
+	"name": "carousel-kit/carousel-progress",
+	"title": "Carousel Progress",
+	"category": "carousel-kit",
+	"icon": "minus",
+	"ancestor": [
+		"carousel-kit/carousel"
+	],
+	"description": "Progress bar for the carousel.",
+	"textdomain": "carousel-kit",
+	"attributes": {},
+	"supports": {
+		"interactivity": true
+	},
+	"editorScript": "file:./index.js",
+	"style": "file:./style-index.css"
+}

src/blocks/carousel/progress/edit.tsx

@@ -0,0 +1,31 @@
+import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+import { useContext } from '@wordpress/element';
+import { EditorCarouselContext } from '../editor-context';
+
+export default function Edit() {
+	const blockProps = useBlockProps( {
+		className: 'carousel-kit-progress',
+	} );
+
+	const { scrollProgress, slideCount } = useContext( EditorCarouselContext ) as { scrollProgress?: number, slideCount?: number };
+
+	// Hide if only one slide
+	if (slideCount === 1) return null;
+
+	return (
+		<div { ...blockProps }>
+			<div
+				className="carousel-kit-progress__bar"
+				role="progressbar"
+				aria-label={ __( 'Carousel progress', 'carousel-kit' ) }
+				aria-valuenow={ Math.round((scrollProgress || 0) * 100) }
+				aria-valuemin={0}
+				aria-valuemax={100}
+				style={ {
+					width: `${ ( scrollProgress || 0 ) * 100 }%`,
+				} }
+			/>
+		</div>
+	);
+}

src/blocks/carousel/progress/index.ts

@@ -0,0 +1,11 @@
+import { registerBlockType, type BlockConfiguration } from '@wordpress/blocks';
+import Edit from './edit';
+import Save from './save';
+import metadata from './block.json';
+import type { CarouselProgressAttributes } from '../types';
+import './style.scss';
+
+registerBlockType( metadata as BlockConfiguration<CarouselProgressAttributes>, {
+	edit: Edit,
+	save: Save,
+} );

src/blocks/carousel/progress/save.tsx

@@ -0,0 +1,22 @@
+import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function Save() {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: 'carousel-kit-progress',
+			} ) }
+			data-wp-interactive="carousel-kit/carousel"
+		>
+			<div
+				className="carousel-kit-progress__bar"
+				role="progressbar"
+				aria-label={ __( 'Carousel progress', 'carousel-kit' ) }
+				aria-valuemin={0}
+				aria-valuemax={100}
+				data-wp-bind--style="callbacks.getProgressBarStyle"
+			/>
+		</div>
+	);
+}

src/blocks/carousel/progress/style.scss

@@ -0,0 +1,16 @@
+.carousel-kit-progress {
+	width: 100%;
+	height: 4px;
+	background-color: var(--carousel-kit-progress-bg-color, rgb(221, 221, 221));
+	overflow: hidden;
+	position: relative;
+	margin-top: 10px;
+
+	&__bar {
+		height: 100%;
+		background-color: var(--carousel-kit-progress-color, rgba(28, 28, 28, 1));
+		width: 0;
+		transition: width 0.1s ease-out;
+		transform-origin: left;
+	}
+}

src/blocks/carousel/types.ts

@@ -23,6 +23,7 @@ export type CarouselViewportAttributes = Record<string, never>;
 export type CarouselSlideAttributes = Record<string, never>;
 export type CarouselControlsAttributes = Record<string, never>;
 export type CarouselDotsAttributes = Record<string, never>;
+export type CarouselProgressAttributes = Record<string, never>;
 
 /**
  * Typed subset of the block editor store selectors used in this plugin.
@@ -51,6 +52,7 @@ export type CarouselContext = {
 	scrollSnaps: { index: number }[];
 	canScrollPrev: boolean;
 	canScrollNext: boolean;
+	scrollProgress: number;
 	ariaLabelPattern: string;
 	ref?: HTMLElement | null;
 };

src/blocks/carousel/view.ts

@@ -133,6 +133,12 @@ store( 'carousel-kit/carousel', {
 			const index = ( snap?.index || 0 ) + 1;
 			return context.ariaLabelPattern.replace( '%d', index.toString() );
 		},
+		getProgressBarStyle: () => {
+			const { scrollProgress } = getContext<CarouselContext>();
+			return {
+				width: `${ ( scrollProgress || 0 ) * 100 }%`,
+			};
+		},
 		initCarousel: () => {
 			try {
 				const context = getContext<CarouselContext>();
@@ -220,10 +226,14 @@ store( 'carousel-kit/carousel', {
 						context.scrollSnaps = embla
 							.scrollSnapList()
 							.map( ( _, index ) => ( { index } ) );
+						context.scrollProgress = embla.scrollProgress();
 					};
 
 					embla.on( 'select', updateState );
 					embla.on( 'reInit', updateState );
+					embla.on( 'scroll', () => {
+						context.scrollProgress = embla.scrollProgress();
+					} );
 
 					// Autoplay API Integration
 					embla.on( 'autoplay:timerset', () => {