wp-red-orbital/src/red-orbital/edit.js

import { useSelect, dispatch } from "@wordpress/data";
import { useState } from "@wordpress/element";
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import { getSaveElement, createBlock } from "@wordpress/blocks";

import "./editor.scss";

import Controls from "./controls.js";
import Orbiter from "./orbiter.js";

export default function Edit({ attributes, setAttributes, clientId }) {
	const { innerBlocks } = useSelect((select) =>
		select("core/block-editor").getBlock(clientId)
	);

	if (isNaN(parseInt(attributes.count, 10))) {
		setAttributes({ count: innerBlocks.length });
	}

	const [removedBlocks, setRemovedBlocks] = useState([]);
	const [isAnimating, setIsAnimating] = useState(false);

	const animatingClass = " clockwise pulse";

	const addBlock = () => {
		const index = innerBlocks.length - 1;
		let block;

		if (removedBlocks.length > 0) {
			block = removedBlocks[removedBlocks.length - 1];
			setRemovedBlocks(removedBlocks.slice(0, -1));
		} else {
			block = createBlock("red-block/red-orbiter");
		}

		dispatch("core/block-editor").insertBlock(block, index, clientId, false);
		setAttributes({ count: parseInt(attributes.count, 10) + 1 });
	};

	const removeBlock = () => {
		const index = innerBlocks.length - 1;
		const block = innerBlocks[index];
		dispatch("core/block-editor").removeBlock(block.clientId, false);

		// append to removed blocks list
		const removedBlocksUpdate = removedBlocks;
		removedBlocksUpdate.push(block);
		setRemovedBlocks(removedBlocksUpdate);

		setAttributes({ count: parseInt(attributes.count, 10) - 1 });
	};

	const onCountChange = (value) => {
		if (value > innerBlocks.length) {
			addBlock();
		} else if (value < innerBlocks.length) {
			removeBlock();
		}
	};

	const viewList = innerBlocks.map((block) => {
		let primary = null;
		let secondary = null;

		if (block.innerBlocks.length > 0) {
			const { name, attributes, innerBlocks } = block.innerBlocks[0];
			const element = getSaveElement(name, attributes, innerBlocks);
			primary = element;
		}

		if (block.innerBlocks.length > 1) {
			const { name, attributes, innerBlocks } = block.innerBlocks[1];
			const element = getSaveElement(name, attributes, innerBlocks);
			secondary = element;
		}

		return (
			<Orbiter
				primary={primary}
				secondary={secondary}
				backgroundColor={block.attributes.backgroundColor}
			/>
		);
	});

	return (
		<>
			<Controls
				setAttributes={setAttributes}
				attributes={attributes}
				innerBlocks={innerBlocks}
				onCountChange={onCountChange}
				isAnimating={isAnimating}
				setIsAnimating={setIsAnimating}
			/>

			<div {...useBlockProps()}>
				<div className="orbital-view">
					<ul
						className={`orbiters count-${innerBlocks.length}${
							isAnimating ? animatingClass : ""
						}`}
					>
						{viewList}
					</ul>

					<div className="inner-content">
						<div className="image-hover">
							{attributes.imgUrl !== "" ? (
								<img src={attributes.imgUrl} />
							) : null}
							{attributes.imgUrlHover !== "" ? (
								<img src={attributes.imgUrlHover} />
							) : null}
						</div>
					</div>
				</div>

				<div class="block-list">
					<InnerBlocks
						renderAppender={false}
						allowedBlocks={["red-block/red-orbiter"]}
					/>
				</div>
			</div>
		</>
	);
}