properly display in editor

src/edit.js

@@ -1,29 +1,35 @@
-import { useSelect, dispatch } 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, createBlock } from '@wordpress/blocks';
+import {
+	useBlockProps,
+	InnerBlocks,
+	InspectorControls,
+} from "@wordpress/block-editor";
+import { __experimentalNumberControl as NumberControl } from "@wordpress/components";
+import { getSaveElement, createBlock } from "@wordpress/blocks";
 
 import "./editor.scss";
 
-import Orbiter from './orbiter.js';
+import Orbiter from "./orbiter.js";
 
 export default function Edit({ attributes, setAttributes, clientId }) {
-	const { innerBlocks } = useSelect(select => select('core/block-editor').getBlock(clientId));
+	const { innerBlocks } = useSelect((select) =>
+		select("core/block-editor").getBlock(clientId)
+	);
 
 	const [count, setCount] = useState(innerBlocks.length);
 
 	const onCountChange = (value) => {
 		if (value > count) {
-			const orbiter = createBlock('red-block/red-orbiter');
+			const orbiter = createBlock("red-block/red-orbiter");
 			const index = count;
-			dispatch('core/editor').insertBlock(orbiter, index, clientId);
+			dispatch("core/editor").insertBlock(orbiter, index, clientId);
 		}
 		setCount(value);
-	}
+	};
 
-	const viewList = innerBlocks.map(block => {
+	const viewList = innerBlocks.map((block) => {
 		let primary = null;
 		let secondary = null;
 
@@ -39,25 +45,22 @@ export default function Edit( { attributes, setAttributes, clientId }) {
 			secondary = element;
 		}
 
-		return (
-			<Orbiter primary={primary} secondary={secondary}/>
-		)
+		return <Orbiter
+			primary={primary}
+			secondary={secondary}
+			backgroundColor={block.attributes.backgroundColor}
+		/>;
 	});
 
 	return (
 		<>
 			<InspectorControls>
 				<div>
-					<NumberControl
-            value={ count }
-						min={1}
-						onChange={ onCountChange }
-					/>
+					<NumberControl value={count} min={1} onChange={onCountChange} />
 				</div>
 			</InspectorControls>
 			<div {...useBlockProps()}>
-
-				<ul className={`orbiters clockwise count-${count}`}>{viewList}</ul>
+				<ul className={`orbiters count-${count}`}>{viewList}</ul>
 
 				<div className="inner-content">
 					<div className="image-hover">

src/editor.scss

@@ -5,4 +5,60 @@
  */
 
 .wp-block-red-block-red-orbital {
+	.orbiter-bg {
+		position: absolute;
+		inset: 0;
+		border-radius: 50%;
+	}
+
+	.feature {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		text-align: center;
+
+		figure {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		img {
+			width: 75%;
+			height: 75%;
+			object-fit: contain;
+		}
+
+		& > * {
+			position: absolute;
+			inset: 0;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			margin: 0;
+
+			transition: opacity var(--duration__feature-hover);
+
+			&:nth-child(1) {
+				opacity: 1;
+			}
+
+			&:nth-child(2) {
+				opacity: 0;
+			}
+		}
+
+		&:hover {
+			& > * {
+				&:first-child {
+					opacity: 0;
+				}
+
+				&:last-child {
+					opacity: 1;
+				}
+			}
+		}
+	}
 }

src/orbiter.js

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

src/style.scss

@@ -7,7 +7,7 @@
 
 .wp-block-red-block-red-orbital {
 	--width__inner-content: 11em;
-	--width__orbital: 7.5em;
+	--width__orbiter: 7.5em;
 
 	--radius: 14em;
 
@@ -215,10 +215,19 @@
 
 	.clockwise {
 		animation: rotate var(--duration__rotation) linear infinite running;
+
+		.orbiter-content {
+			animation: rotate var(--duration__rotation) reverse linear infinite running;
+		}
 	}
 
+		// TOOD set this with block variant
 	.anti-clockwise {
 		animation: rotate var(--duration__rotation) reverse linear infinite running;
+
+		.orbiter-content {
+			animation: rotate var(--duration__rotation) linear infinite running;
+		}
 	}
 
 	@keyframes rotate {