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/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,23 @@
+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 } = useContext( EditorCarouselContext ) as { scrollProgress?: number };
+
+	return (
+		<div { ...blockProps }>
+			<div
+				className="carousel-kit-progress__bar"
+				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,17 @@
+import { useBlockProps } from '@wordpress/block-editor';
+
+export default function Save() {
+	return (
+		<div
+			{ ...useBlockProps.save( {
+				className: 'carousel-kit-progress',
+			} ) }
+			data-wp-interactive="carousel-kit/carousel"
+		>
+			<div
+				className="carousel-kit-progress__bar"
+				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: #eee;
+	overflow: hidden;
+	position: relative;
+	margin-top: 10px;
+
+	&__bar {
+		height: 100%;
+		background-color: #000;
+		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', () => {