Support Vertical Alignment on Carousel Slide

src/blocks/carousel/slide/block.json

@@ -11,7 +11,11 @@
 	],
 	"description": "A single slide within the carousel.",
 	"textdomain": "carousel-kit",
-	"attributes": {},
+	"attributes": {
+		"verticalAlignment": {
+			"type": "string"
+		}
+	},
 	"usesContext": [
 		"carousel-kit/carousel/allowedSlideBlocks"
 	],

src/blocks/carousel/slide/edit.tsx

@@ -1,16 +1,28 @@
-import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	BlockControls,
+	BlockVerticalAlignmentToolbar,
+} from '@wordpress/block-editor';
 import type { CarouselSlideAttributes } from '../types';
 
 export default function Edit( {
+	attributes,
+	setAttributes,
 	context,
 }: {
 	attributes: CarouselSlideAttributes;
+	setAttributes: ( attributes: Partial<CarouselSlideAttributes> ) => void;
 	context: { 'carousel-kit/carousel/allowedSlideBlocks'?: string[] };
 } ) {
 	const allowedBlocks = context[ 'carousel-kit/carousel/allowedSlideBlocks' ];
 
+	const { verticalAlignment } = attributes;
+
 	const blockProps = useBlockProps( {
-		className: 'embla__slide',
+		className: `embla__slide${
+			verticalAlignment ? ` is-vertically-aligned-${ verticalAlignment }` : ''
+		}`,
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
@@ -19,5 +31,17 @@ export default function Edit( {
 		templateLock: false,
 	} );
 
-	return <div { ...innerBlocksProps } />;
+	return (
+		<>
+			<BlockControls>
+				<BlockVerticalAlignmentToolbar
+					value={ verticalAlignment }
+					onChange={ ( value ) =>
+						setAttributes( { verticalAlignment: value } )
+					}
+				/>
+			</BlockControls>
+			<div { ...innerBlocksProps } />
+		</>
+	);
 }

src/blocks/carousel/slide/save.tsx

@@ -1,8 +1,12 @@
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import type { CarouselSlideAttributes } from '../types';
 
-export default function Save() {
+export default function Save( { attributes }: { attributes: CarouselSlideAttributes } ) {
+	const { verticalAlignment } = attributes;
 	const blockProps = useBlockProps.save( {
-		className: 'embla__slide',
+		className: `embla__slide${
+			verticalAlignment ? ` is-vertically-aligned-${ verticalAlignment }` : ''
+		}`,
 		role: 'group',
 		'aria-roledescription': 'slide',
 		'data-wp-interactive': 'carousel-kit/carousel',

src/blocks/carousel/styles/_core.scss

@@ -43,6 +43,27 @@
 	margin-inline-end: 0;
 	margin-block-start: 0;
 	margin-block-end: 0;
+
+	/* Vertical alignment support */
+	display: flex;
+	flex-direction: column;
+
+	&.is-vertically-aligned-top {
+		justify-content: flex-start;
+	}
+
+	&.is-vertically-aligned-center,
+	&.is-vertically-aligned-middle {
+		justify-content: center;
+	}
+
+	&.is-vertically-aligned-bottom {
+		justify-content: flex-end;
+	}
+
+	&.is-vertically-aligned-space-between {
+		justify-content: space-between;
+	}
 }
 
 /**

src/blocks/carousel/types.ts

@@ -1,4 +1,5 @@
 import type { EmblaOptionsType } from 'embla-carousel';
+import type { BlockVerticalAlignmentToolbar } from '@wordpress/block-editor';
 
 export type CarouselAttributes = {
 	loop: boolean;
@@ -20,7 +21,9 @@ export type CarouselAttributes = {
 };
 
 export type CarouselViewportAttributes = Record<string, never>;
-export type CarouselSlideAttributes = Record<string, never>;
+export type CarouselSlideAttributes = {
+	verticalAlignment?: BlockVerticalAlignmentToolbar.Value;
+};
 export type CarouselControlsAttributes = Record<string, never>;
 export type CarouselDotsAttributes = Record<string, never>;