Registering a variation of the Pulsar carousel block

block.json

// block.json example for our custom child block.

{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "pulsar/posts",
	"parent": ["pulsar/carousel"],
	"version": "0.1.0",
	"title": "Posts",
	"category": "text",
	"icon": "universal-access-alt",
	"textdomain": "pulsar",
	"editorScript": "file:./index.js",
	"editorStyle": "file:./index.css",
	"style": "file:./style-index.css",
	"render": "file:./render.php"
}

carousel.js

// Register a custom variation within Pulsar.
// as this variation will be displaying multiple slides from an innerBlock, that block will be wrapped in the track instead.

import domReady from '@wordpress/dom-ready';
import { registerBlockVariation } from '@wordpress/blocks';

domReady(() => {
	registerBlockVariation('pulsar/carousel', {
		name: 'carousel-posts',
		title: 'Posts Carousel',
		attributes: {
			templateLock: 'all',
			hasTrack: false,
			template: [['pulsar/posts', {}]],
		},
		isActive: ['template'],
	});
});

edit.js

// Barebones example of the pulsar/posts child block edit function.
// Markup must include `splide__track` and `splide__list`.

import { useBlockProps } from '@wordpress/block-editor';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @return {WPElement} Element to render.
 */
export default function Edit() {
	const blockProps = useBlockProps({ className: 'splide__track' });

	return (
		<div {...blockProps}>
			<ul className="splide__list">
				<li className="splide__slide">1</li>
				<li className="splide__slide">2</li>
				<li className="splide__slide">3</li>
				<li className="splide__slide">4</li>
				<li className="splide__slide">5</li>
				<li className="splide__slide">6</li>
			</ul>
		</div>
	);
}