wip

src/edit.js

@@ -1,27 +1,26 @@
-import { __ } from '@wordpress/i18n';
+import { __ } from "@wordpress/i18n";
 
-import { useBlockProps, InnerBlocks, InspectorControls } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { ColorPicker } from '@wordpress/components';
+import {
+	useBlockProps,
+	InnerBlocks,
+	InspectorControls,
+} from "@wordpress/block-editor";
+import { useSelect } from "@wordpress/data";
+import { ColorPicker } from "@wordpress/components";
 
-import './editor.scss';
+import "./editor.scss";
 
-const InnerBlocksWithLimit = ( {clientId, limit=2, ...rest} ) => {
-	const { blockCount } = useSelect(select => ({
-		blockCount: select('core/block-editor').getBlockCount(clientId)
-	}))
+const InnerBlocksWithLimit = ({ clientId, limit = 2, ...rest }) => {
+	const { blockCount } = useSelect((select) => ({
+		blockCount: select("core/block-editor").getBlockCount(clientId),
+	}));
 
 	const blockAppender = () => {
-		return blockCount < limit ? (<InnerBlocks.DefaultBlockAppender />) : false;
-	}
+		return blockCount < limit ? <InnerBlocks.DefaultBlockAppender /> : false;
+	};
 
-	return (
-		<InnerBlocks
-			renderAppender={ () => blockAppender() }
-			{...rest}
-		/>
-	)
-}
+	return <InnerBlocks renderAppender={() => blockAppender()} {...rest} />;
+};
 
 export default function Edit({ attributes, setAttributes, clientId }) {
 	return (
@@ -29,26 +28,21 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 			<InspectorControls>
 				<ColorPicker
 					color={attributes.backgroundColor}
-					onChange={(color) => 
-						setAttributes({backgroundColor: color})
-					}
+					onChange={(color) => setAttributes({ backgroundColor: color })}
 					enableAlpha
 					defaultValue="#000"
 				/>
 			</InspectorControls>
 
-			<li { ...useBlockProps({
-				className: 'orbital',
-				style: {
-					color: attributes.backgroundColor,
-				}
-			}) }>
-				<div className="orbital-content content-center anti-clockwise">
-					<div className="feature">
-						<InnerBlocksWithLimit  orientation="horizontal" clientId={clientId} />
-					</div>
-				</div>
-			</li>
+			<div
+				{...useBlockProps({
+					style: {
+						backgroundColor: attributes.backgroundColor,
+					},
+				})}
+			>
+				<InnerBlocksWithLimit orientation="horizontal" clientId={clientId} />
+			</div>
 		</>
 	);
 }

src/editor.scss

@@ -8,15 +8,8 @@
 	display: flex;
 	align-items: center;
 	list-style: none;
+	margin-bottom: 16px;
 	padding: 16px;
-	background-color: currentColor;
-
-	> .orbital-content {
-		z-index: 20;
-		position: relative;
-
-		color: #555;
-	}
 
 	.block-editor-inner-blocks > .block-editor-block-list__layout {
 		display: flex;

src/save.js

@@ -26,13 +26,16 @@ export default function save({ attributes }) {
 	return (
 		<li
 			{...useBlockProps.save({
-				className: "orbital",
-				style: {
-					color: attributes.backgroundColor,
-				},
+				className: "orbiter",
 			})}
 		>
-			<div className="orbital-content content-center anti-clockwise">
+			<div
+				className="orbiter-bg"
+				style={{
+					backgroundColor: attributes.backgroundColor,
+				}}
+			/>
+			<div className="orbiter-content content-center anti-clockwise">
 				<div className="feature">
 					<InnerBlocks.Content />
 				</div>

src/style.scss

@@ -6,4 +6,123 @@
  */
 
 .wp-block-red-block-red-orbiter {
+	--duration__feature-hover: 0.3s;
+	--duration__pulse: 1.5s;
+
+	.orbiter-bg {
+		position: absolute;
+		inset: 0;
+		border-radius: 50%;
+	}
+
+	.feature {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		text-align: 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;
+				}
+			}
+		}
+	}
+}
+
+.wp-block-red-block-red-orbital.pulse {
+	.orbiter:hover {
+		> .orbiter-bg {
+			animation-play-state: paused;
+		}
+	}
+
+	.orbiter {
+		> .orbiter-bg {
+			animation: pulse var(--duration__pulse) alternate ease-in-out infinite
+				running;
+		}
+
+		&:nth-child(2) > .orbiter-bg {
+			&::before {
+				animation-delay: 2s;
+			}
+		}
+
+		&:nth-child(3) > .orbiter-bg {
+			&::before {
+				animation-delay: 0.4s;
+			}
+		}
+
+		&:nth-child(4) > .orbiter-bg {
+			&::before {
+				animation-delay: 1.5s;
+			}
+		}
+
+		&:nth-child(5) > .orbiter-bg {
+			&::before {
+				animation-delay: 0.7s;
+			}
+		}
+
+		&:nth-child(6) > .orbiter-bg {
+			&::before {
+				animation-delay: 0.2s;
+			}
+		}
+
+		&:nth-child(7) > .orbiter-bg {
+			&::before {
+				animation-delay: 1.1s;
+			}
+		}
+
+		&:nth-child(8) > .orbiter-bg {
+			&::before {
+				animation-delay: 0.4s;
+			}
+		}
+	}
+}
+
+@keyframes pulse {
+	from {
+		transform: scale(1);
+	}
+	to {
+		transform: scale(1.1);
+	}
 }