use inner blocks as orbital content

src/edit.js

@@ -1,37 +1,41 @@
-import {useState} from "@wordpress/element";
+import { useSelect } from '@wordpress/data';
+import {useState, createElement} from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
-import { useBlockProps, InspectorControls } from "@wordpress/block-editor";
+import { useBlockProps, InnerBlocks, InspectorControls } from "@wordpress/block-editor";
 import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
-
-import Orbital from "./orbital.js";
+import {  getSaveElement } from '@wordpress/blocks';
 
 import "./editor.scss";
 
-export default function Edit( { attributes, setAttributes }) {
-	const [discardedPrimaries, setDiscardedPrimaries] = useState([]);
+import Orbital from './orbital.js';
+
+export default function Edit( { attributes, setAttributes, clientId }) {
+	const { innerBlocks } = useSelect(select => select('core/block-editor').getBlock(clientId));
+
 	const [count, setCount] = useState(attributes.primaries.length);
 
 	const onCountChange = (value) => {
-		 if (value > attributes.primaries.length) {
-			const newPrimary = discardedPrimaries.length < 1 ?
-				{ url: "https://via.placeholder.com/64x64" } :
-				discardedPrimaries.pop();
-			const newPrimaries = attributes.primaries.concat([newPrimary]);
-			setAttributes({ primaries: newPrimaries });
-		}
-
-		if (value < attributes.primaries.length) {
-			const newPrimaries = attributes.primaries;
-			setDiscardedPrimaries(discardedPrimaries.concat([newPrimaries.pop()]));
-			setAttributes({ primaries: newPrimaries });
-		}
-
 		setCount(value);
 	}
 
-	const primaryList = attributes.primaries.map((primary) => {
+	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 (
-			<Orbital img={primary.url} />
+			<Orbital primary={primary} secondary={secondary}/>
 		)
 	});
 
@@ -48,9 +52,7 @@ export default function Edit( { attributes, setAttributes }) {
 			</InspectorControls>
 			<div {...useBlockProps()}>
 
-				<ul className="orbitals clockwise">
-					{primaryList}
-				</ul>
+				<ul className={`orbitals clockwise count-${count}`}>{viewList}</ul>
 
 				<div className="inner-content">
 					<div className="image-hover">
@@ -65,6 +67,10 @@ export default function Edit( { attributes, setAttributes }) {
 					</div>
 				</div>
 			</div>
+
+			<div class="block-list">
+				<InnerBlocks />
+			</div>
 		</>
 	);
 }

src/orbital.js

@@ -1,14 +1,10 @@
-export default function Orbital({ img }) {
+export default function Orbital({ primary, secondary }) {
 	return (
 		<li className="orbital bg bg--red pulse">
 			<div className="orbital-content content-center anti-clockwise">
 				<div className="feature">
-					<div className="feature-item primary">
-						<img className="img" src={img} />
-					</div>
-					<div className="feature-item secondary">
-						<p>Hallo!</p>
-					</div>
+					<div className="feature-item primary">{primary}</div>
+					<div className="feature-item secondary">{secondary}</div>
 				</div>
 			</div>
 		</li>

src/save.js

@@ -11,8 +11,7 @@ import { __ } from "@wordpress/i18n";
  *
  * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
  */
-import { useBlockProps } from "@wordpress/block-editor";
-import Orbital from "./orbital.js";
+import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
 
 /**
  * The save function defines the way in which the different attributes should
@@ -23,34 +22,27 @@ import Orbital from "./orbital.js";
  *
  * @return {WPElement} Element to render.
  */
-export default function save( {attributes} ) {
+export default function save({ attributes }) {
 	const blockProps = useBlockProps.save();
 
-	const primaryList = attributes.primaries.map((primary) => {
-		return (
-			<Orbital img={primary.url} />
-		)
-	});
-
 	return (
-			<div {...blockProps}>
+		<div {...blockProps}>
+			<ul className={`orbitals clockwise count-${attributes.primaries.length}`}>
+				<InnerBlocks.Content />
+			</ul>
 
-				<ul className="orbitals clockwise">
-					{primaryList}
-				</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 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>
 	);
 }

src/style.scss

@@ -6,8 +6,6 @@
  */
 
 .wp-block-red-block-red-orbital {
-	--count__orbitals: 8;
-
 	--width__inner-content: 11em;
 	--width__orbital: 7.5em;
 
@@ -37,6 +35,13 @@
 	}
 
 	.orbitals {
+		--count__orbitals: 4;
+		@for $i from 1 through 12 {
+			&.count-#{$i} {
+				--count__orbitals: #{$i};
+			}
+		}
+
 		position: relative;
 		width: 0;
 		height: 0;
@@ -254,6 +259,8 @@
 		height: 100%;
 		text-align: center;
 
+		& > *[class*=' wp-block-'],
+		& > *[class^='wp-block-'],
 		& > .feature-item {
 			position: absolute;
 			inset: 0;
@@ -274,6 +281,8 @@
 		}
 
 		&:hover {
+			& > *[class*=' wp-block-'],
+			& > *[class^='wp-block-'],
 			& > .feature-item {
 				&:first-child {
 					opacity: 0;