wip

src/block.json

@@ -14,24 +14,5 @@
 	"editorScript": "file:./index.js",
 	"editorStyle": "file:./index.css",
 	"style": "file:./style-index.css",
-	"attributes": {
-		"primaries": {
-			"type": "array",
-			"source": "query",
-			"selector": ".orbitals img",
-			"query": {
-				"url": {
-					"type": "string",
-					"source": "attribute",
-					"attribute": "src"
-				}
-			},
-			"default": [
-					{ "url": "https://via.placeholder.com/64x64"},
-					{ "url": "https://via.placeholder.com/66x66"},
-					{ "url": "https://via.placeholder.com/68x68"},
-					{ "url": "https://via.placeholder.com/88x88"}
-			]
-		}
-	}
+	"attributes": {}
 }

src/edit.js

@@ -19,23 +19,25 @@ export default function Edit({ clientId }) {
 	);
 
 	const [removedBlocks, setRemovedBlocks] = useState([]);
-	const [count, setCount] = useState(innerBlocks.length);
 
 	const addBlock = () => {
-		const index = count;
+		const index = innerBlocks.length - 1;
+		console.log(index);
+		let block;
 
 		if (removedBlocks.length > 0) {
-			const block = removedBlocks[removedBlocks.length - 1];
+			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);
+			block = createBlock("red-block/red-orbiter");
 		}
+
+		dispatch("core/block-editor").insertBlock(block, index, clientId, false);
 	};
 
 	const removeBlock = () => {
-		const block = innerBlocks[count - 1];
+		const index = innerBlocks.length - 1;
+		const block = innerBlocks[index];
 		dispatch("core/block-editor").removeBlock(block.clientId, false);
 
 		// append to removed blocks list
@@ -45,12 +47,11 @@ export default function Edit({ clientId }) {
 	};
 
 	const onCountChange = (value) => {
-		if (value > count) {
+		if (value > innerBlocks.length) {
 			addBlock();
-		} else if (value < count) {
+		} else if (value < innerBlocks.length) {
 			removeBlock();
 		}
-		setCount(value);
 	};
 
 	const viewList = innerBlocks.map((block) => {
@@ -82,13 +83,18 @@ export default function Edit({ clientId }) {
 		<>
 			<InspectorControls>
 				<div>
-					<NumberControl value={count} min={1} onChange={onCountChange} />
+					<NumberControl
+						value={innerBlocks.length}
+						min={1}
+						max={12}
+						onChange={onCountChange}
+					/>
 				</div>
 			</InspectorControls>
 
 			<div {...useBlockProps()}>
 				<div className="orbital-view">
-					<ul className={`orbiters count-${count}`}>{viewList}</ul>
+					<ul className={`orbiters count-${innerBlocks.length}`}>{viewList}</ul>
 
 					<div className="inner-content">
 						<div className="image-hover">

src/save.js

@@ -23,13 +23,14 @@ import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
  * @return {WPElement} Element to render.
  */
 export default function save({ attributes }) {
+
 	const blockProps = useBlockProps.save({
 		className: "pulse",
 	});
 
 	return (
 		<div {...blockProps}>
-			<ul className={`orbiters clockwise count-${attributes.primaries.length}`}>
+			<ul className={`orbiters clockwise`}>
 				<InnerBlocks.Content />
 			</ul>
 

src/style.scss

@@ -208,7 +208,7 @@
 
 	.orbiters:hover {
 		&.clockwise,
-		& .anti-clockwise {
+		& .orbiter-content {
 			animation-play-state: paused;
 		}
 	}