From 87afd2d60b41ba783a93c5d04ba00b0b0aeabf02 Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Thu, 21 Jul 2022 12:52:27 +0100
Subject: [PATCH] disable adding inner blocks using appender

---
 src/edit.js     | 48 ++++++++++++++++++++++++++++--------------------
 src/editor.scss | 13 +++++++++++++
 src/style.scss  | 17 +++++++++--------
 3 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/edit.js b/src/edit.js
index b50e856..4215118 100644
--- a/src/edit.js
+++ b/src/edit.js
@@ -26,6 +26,9 @@ export default function Edit({ clientId }) {
 			const index = count;
 			dispatch("core/editor").insertBlock(orbiter, index, clientId);
 		}
+		if (value < count) {
+			// remove block and append to deleted blocks list
+		}
 		setCount(value);
 	};
 
@@ -45,11 +48,13 @@ export default function Edit({ clientId }) {
 			secondary = element;
 		}
 
-		return <Orbiter
-			primary={primary}
-			secondary={secondary}
-			backgroundColor={block.attributes.backgroundColor}
-		/>;
+		return (
+			<Orbiter
+				primary={primary}
+				secondary={secondary}
+				backgroundColor={block.attributes.backgroundColor}
+			/>
+		);
 	});
 
 	return (
@@ -59,25 +64,28 @@ export default function Edit({ clientId }) {
 					<NumberControl value={count} min={1} onChange={onCountChange} />
 				</div>
 			</InspectorControls>
-			<div {...useBlockProps()}>
-				<ul className={`orbiters count-${count}`}>{viewList}</ul>
 
-				<div className="inner-content">
-					<div className="image-hover">
-						<img
-							className="img"
-							src="https://via.placeholder.com/256x256/999/333"
-						/>
-						<img
-							className="img"
-							src="https://via.placeholder.com/256x256/666/ccc"
-						/>
+			<div {...useBlockProps()}>
+				<div className="orbital-view">
+					<ul className={`orbiters count-${count}`}>{viewList}</ul>
+
+					<div className="inner-content">
+						<div className="image-hover">
+							<img
+								className="img"
+								src="https://via.placeholder.com/256x256/999/333"
+							/>
+							<img
+								className="img"
+								src="https://via.placeholder.com/256x256/666/ccc"
+							/>
+						</div>
 					</div>
 				</div>
-			</div>
 
-			<div class="block-list">
-				<InnerBlocks />
+				<div class="block-list">
+					<InnerBlocks renderAppender={false} allowedBlocks={['red-block/red-orbiter']} />
+				</div>
 			</div>
 		</>
 	);
diff --git a/src/editor.scss b/src/editor.scss
index 3f065ab..8affd4b 100644
--- a/src/editor.scss
+++ b/src/editor.scss
@@ -5,6 +5,15 @@
  */
 
 .wp-block-red-block-red-orbital {
+	height: auto;
+
+	.orbital-view {
+		position: relative;
+		width: 80vw;
+		max-width: 100%;
+		height: 80vh;
+	}
+
 	.orbiter-bg {
 		position: absolute;
 		inset: 0;
@@ -62,3 +71,7 @@
 		}
 	}
 }
+
+.block-list {
+	margin-top: 0;
+}
diff --git a/src/style.scss b/src/style.scss
index 98d0a62..597e6c1 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -217,11 +217,12 @@
 		animation: rotate var(--duration__rotation) linear infinite running;
 
 		.orbiter-content {
-			animation: rotate var(--duration__rotation) reverse linear infinite running;
+			animation: rotate var(--duration__rotation) reverse linear infinite
+				running;
 		}
 	}
 
-		// TOOD set this with block variant
+	// TOOD set this with block variant
 	.anti-clockwise {
 		animation: rotate var(--duration__rotation) reverse linear infinite running;
 
@@ -231,11 +232,11 @@
 	}
 
 	@keyframes rotate {
-	from {
-	transform: rotate(0);
-	}
-	to {
-	transform: rotate(360deg);
-	}
+		from {
+			transform: rotate(0);
+		}
+		to {
+			transform: rotate(360deg);
+		}
 	}
 }