add/remove blocks

src/edit.js

@@ -18,16 +18,37 @@ export default function Edit({ clientId }) {
 		select("core/block-editor").getBlock(clientId)
 	);
 
+	const [removedBlocks, setRemovedBlocks] = useState([]);
 	const [count, setCount] = useState(innerBlocks.length);
 
+	const addBlock = () => {
+		const index = count;
+
+		if (removedBlocks.length > 0) {
+			const block = removedBlocks[removedBlocks.length - 1];
+			setRemovedBlocks(removedBlocks.slice(0, -1));
+			dispatch("core/block-editor").insertBlock(block, index, clientId);
+		} else {
+			const orbiter = createBlock("red-block/red-orbiter");
+			dispatch("core/block-editor").insertBlock(orbiter, index, clientId);
+		}
+	};
+
+	const removeBlock = () => {
+		const block = innerBlocks[count - 1];
+		dispatch("core/block-editor").removeBlock(block.clientId, false);
+
+		// append to removed blocks list
+		const removedBlocksUpdate = removedBlocks;
+		removedBlocksUpdate.push(block);
+		setRemovedBlocks(removedBlocksUpdate);
+	};
+
 	const onCountChange = (value) => {
 		if (value > count) {
-			const orbiter = createBlock("red-block/red-orbiter");
+			addBlock();
-			const index = count;
+		} else if (value < count) {
-			dispatch("core/editor").insertBlock(orbiter, index, clientId);
+			removeBlock();
-		}
-		if (value < count) {
-			// remove block and append to deleted blocks list
 		}
 		setCount(value);
 	};
@@ -84,7 +105,10 @@ export default function Edit({ clientId }) {
 				</div>
 
 				<div class="block-list">
-					<InnerBlocks renderAppender={false} allowedBlocks={['red-block/red-orbiter']} />
+					<InnerBlocks
+						renderAppender={false}
+						allowedBlocks={["red-block/red-orbiter"]}
+					/>
 				</div>
 			</div>
 		</>