From b31320d3f627517659ad8ad9e517c9ca6e25d70d Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Fri, 22 Jul 2022 13:10:18 +0100
Subject: [PATCH] wip

---
 src/block.json | 21 +--------------------
 src/edit.js    | 30 ++++++++++++++++++------------
 src/save.js    |  3 ++-
 src/style.scss |  2 +-
 4 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/src/block.json b/src/block.json
index b59484a..b23a5c0 100644
--- a/src/block.json
+++ b/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": {}
 }
diff --git a/src/edit.js b/src/edit.js
index 3764c7d..1fb4926 100644
--- a/src/edit.js
+++ b/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">
diff --git a/src/save.js b/src/save.js
index 6c58741..590dcc6 100644
--- a/src/save.js
+++ b/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>
 
diff --git a/src/style.scss b/src/style.scss
index 597e6c1..1990868 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -208,7 +208,7 @@
 
 	.orbiters:hover {
 		&.clockwise,
-		& .anti-clockwise {
+		& .orbiter-content {
 			animation-play-state: paused;
 		}
 	}