add orbiters programatically

src/edit.js

@@ -1,20 +1,25 @@
-import { useSelect } from '@wordpress/data';
+import { useSelect, dispatch } from '@wordpress/data';
 import {useState, createElement} from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import { useBlockProps, InnerBlocks, InspectorControls } from "@wordpress/block-editor";
 import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
-import {  getSaveElement } from '@wordpress/blocks';
+import {  getSaveElement, createBlock } from '@wordpress/blocks';
 
 import "./editor.scss";
 
-import Orbital from './orbital.js';
+import Orbiter from './orbiter.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 [count, setCount] = useState(innerBlocks.length);
 
 	const onCountChange = (value) => {
+		if (value > count) {
+			const orbiter = createBlock('red-block/red-orbiter');
+			const index = count;
+			dispatch('core/editor').insertBlock(orbiter, index, clientId);
+		}
 		setCount(value);
 	}
 
@@ -35,7 +40,7 @@ export default function Edit( { attributes, setAttributes, clientId }) {
 		}
 
 		return (
-			<Orbital primary={primary} secondary={secondary}/>
+			<Orbiter primary={primary} secondary={secondary}/>
 		)
 	});
 
@@ -52,7 +57,7 @@ export default function Edit( { attributes, setAttributes, clientId }) {
 			</InspectorControls>
 			<div {...useBlockProps()}>
 
-				<ul className={`orbitals clockwise count-${count}`}>{viewList}</ul>
+				<ul className={`orbiters clockwise count-${count}`}>{viewList}</ul>
 
 				<div className="inner-content">
 					<div className="image-hover">

src/orbital.js

@@ -1,7 +1,7 @@
-export default function Orbital({ primary, secondary }) {
+export default function Orbiter({ primary, secondary }) {
 	return (
-		<li className="orbital bg bg--red pulse">
+		<li className="orbiter bg bg--red pulse">
-			<div className="orbital-content content-center anti-clockwise">
+			<div className="orbiter-content content-center anti-clockwise">
 				<div className="feature">
 					<div className="feature-item primary">{primary}</div>
 					<div className="feature-item secondary">{secondary}</div>

src/orbiter.js

@@ -0,0 +1,12 @@
+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">{primary}</div>
+					<div className="feature-item secondary">{secondary}</div>
+				</div>
+			</div>
+		</li>
+	);
+}

src/save.js

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

src/style.scss

@@ -12,9 +12,7 @@
 	--radius: 14em;
 
 	--duration__rotation: 50s;
-	--duration__pulse: 1.5s;
 	--duration__image-hover: 0.3s;
-	--duration__feature-hover: 0.3s;
 
 	position: relative;
 	width: 80vw;
@@ -34,11 +32,11 @@
 		list-style: none;
 	}
 
-	.orbitals {
+	.orbiters {
-		--count__orbitals: 4;
+		--count__orbiters: 4;
 		@for $i from 1 through 12 {
 			&.count-#{$i} {
-				--count__orbitals: #{$i};
+				--count__orbiters: #{$i};
 			}
 		}
 
@@ -49,10 +47,10 @@
 		top: 50%;
 	}
 
-	.orbital {
+	.orbiter {
 		position: absolute;
-		width: var(--width__orbital);
+		width: var(--width__orbiter);
-		height: var(--width__orbital);
+		height: var(--width__orbiter);
 		border-radius: 50%;
 		left: 50%;
 		top: 50%;
@@ -62,9 +60,9 @@
 		);
 	}
 
-	.orbital {
+	.orbiter {
 		/* --angle must be in radians so multiply by 2 * pi  */
-		--angle: calc(6.2831853036 * var(--index) / var(--count__orbitals));
+		--angle: calc(6.2831853036 * var(--index) / var(--count__orbiters));
 
 		/* thanks to https://gist.github.com/stereokai/7666bfe93929b14c2dced148c79e0e97 */
 		--sin-term1: var(--angle);
@@ -160,7 +158,7 @@
 		}
 	}
 
-	.orbital-content {
+	.orbiter-content {
 		width: 100%;
 		height: 100%;
 	}
@@ -188,14 +186,14 @@
 			inset: 0;
 			object-fit: cover;
 
-			&:last-child {
+			&:nth-child(2) {
 				transition: opacity var(--duration__image-hover);
 				opacity: 0;
 			}
 		}
 
 		&:hover > .img {
-			&:last-child {
+			&:nth-child(2) {
 				opacity: 1;
 			}
 		}
@@ -208,106 +206,13 @@
 		align-items: center;
 	}
 
-	.bg {
+	.orbiters:hover {
-		&::before {
-			content: "";
-			display: block;
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			top: 0;
-			left: 0;
-			border-radius: 50%;
-
-			transition: background-color var(--duration__feature-hover);
-		}
-	}
-
-	.bg--red {
-		&::before {
-			background-color: rgba(255, 200, 200);
-		}
-
-		&:hover::before {
-			background-color: rgba(255, 150, 150);
-		}
-	}
-
-	.bg--green {
-		&::before {
-			background-color: rgba(200, 255, 200);
-		}
-
-		&:hover::before {
-			background-color: rgba(150, 255, 150);
-		}
-	}
-
-	.bg--blue {
-		&::before {
-			background-color: rgba(200, 200, 255);
-		}
-
-		&:hover::before {
-			background-color: rgba(150, 150, 255);
-		}
-	}
-
-	.feature {
-		position: relative;
-		width: 100%;
-		height: 100%;
-		text-align: center;
-
-		& > *[class*=' wp-block-'],
-		& > *[class^='wp-block-'],
-		& > .feature-item {
-			position: absolute;
-			inset: 0;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-
-			transition: opacity var(--duration__feature-hover);
-
-			&:first-child {
-				opacity: 1;
-			}
-
-			&:last-child {
-				opacity: 0;
-			}
-		}
-
-		&:hover {
-			& > *[class*=' wp-block-'],
-			& > *[class^='wp-block-'],
-			& > .feature-item {
-				&:first-child {
-					opacity: 0;
-				}
-
-				&:last-child {
-					opacity: 1;
-				}
-			}
-		}
-	}
-
-	.orbitals:hover {
 		&.clockwise,
 		& .anti-clockwise {
 			animation-play-state: paused;
 		}
 	}
 
-	.orbital.pulse:hover {
-		&::before {
-			animation-play-state: paused;
-		}
-	}
-
 	.clockwise {
 		animation: rotate var(--duration__rotation) linear infinite running;
 	}
@@ -316,55 +221,6 @@
 		animation: rotate var(--duration__rotation) reverse linear infinite running;
 	}
 
-	.pulse {
-		&::before {
-			animation: pulse var(--duration__pulse) alternate ease-in-out infinite
-				running;
-		}
-
-		&:nth-child(2) {
-			&::before {
-				animation-delay: 2s;
-			}
-		}
-
-		&:nth-child(3) {
-			&::before {
-				animation-delay: 0.4s;
-			}
-		}
-
-		&:nth-child(4) {
-			&::before {
-				animation-delay: 1.5s;
-			}
-		}
-
-		&:nth-child(5) {
-			&::before {
-				animation-delay: 0.7s;
-			}
-		}
-
-		&:nth-child(6) {
-			&::before {
-				animation-delay: 0.2s;
-			}
-		}
-
-		&:nth-child(7) {
-			&::before {
-				animation-delay: 1.1s;
-			}
-		}
-
-		&:nth-child(8) {
-			&::before {
-				animation-delay: 0.4s;
-			}
-		}
-	}
-
 	@keyframes rotate {
 		from {
 			transform: rotate(0);
@@ -373,30 +229,4 @@
 			transform: rotate(360deg);
 		}
 	}
-
-	@keyframes pulse {
-		from {
-			transform: scale(1);
-		}
-		to {
-			transform: scale(1.1);
-		}
-	}
-}
-
-body.wp-admin .wp-block-red-block-red-orbital {
-	.clockwise {
-		animation-play-state: paused;
-	}
-
-	.anti-clockwise {
-		animation-play-state: paused;
-	}
-
-	.pulse {
-		&::before {
-			animation: rotate var(--duration__rotation) reverse linear infinite
-				running;
-		}
-	}
 }