Block template for InnerBlocks

block.json

{
    "apiVersion": 2,
    "name": "namespace/carousel",
    "title": "Carousel",
    "category": "custom-category",
    "icon": "slides",
    "keywords": [ "carousel", "slider" ],
    "description": "Add a swipeable carousel of content.",
    "supports": {
        "html": false
    },
    "textdomain": "namespace",
    "editorScript": "namespace-carousel-editor-script",
    "editorStyle": "namespace-carousel-editor-style",
    "script": "namespace-carousel-script",
    "parent": [ "core/group" ],
    "version": "1.0.0"
}

edit.js

/* External dependencies */
import classnames from 'classnames';

/* WordPress dependencies */
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
import { createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';
import { dispatch, select } from '@wordpress/data';

const ALLOWED_BLOCKS = [ 'core/media-text' ];
const TEMPLATE = [
	[ 'core/media-text',
		{
			className : 'is-style-media-text--diagonal-gradient swiper-slide',
		},
		[
			[ 'core/quote',
				{
					value    : '<p>You must be the change you wish to see in the world.</p>',
					citation : 'Mahatma Gandhi<br><strong>Political Ethicist</strong>',
				},
			],
		],
	],
];

const Edit = ( { clientId } ) => {
	const blockProps = useBlockProps();

	const InsertPseudoSlideBlock = () => {
		const innerCount = select( 'core/block-editor' ).getBlocksByClientId( clientId )[ 0 ].innerBlocks.length;
		const blocksFromTemplate = createBlocksFromInnerBlocksTemplate( TEMPLATE );
		dispatch( 'core/block-editor' ).insertBlocks( blocksFromTemplate, innerCount, clientId );
	};

	return (
		<div
			{ ...blockProps }
			className={ classnames(
				blockProps.className,
				`swiper-container`,
			) }
		>
			<div className="swiper-wrapper">
				<InnerBlocks
					allowedBlocks={ ALLOWED_BLOCKS }
					template={ TEMPLATE }
					renderAppender={ () => (
						<button
							className="custom-button custom-button--appender"
							type="button"
							onClick={ InsertPseudoSlideBlock }
						>
							Add Slide
						</button>
					) }
				/>
			</div>
			<div className="swiper-pagination"></div>
		</div>
	);
};
export default Edit;