editor styling

src/edit.js

@@ -25,7 +25,7 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 	const [removedBlocks, setRemovedBlocks] = useState([]);
 	const [isAnimating, setIsAnimating] = useState(false);
 
-	const animatingClass = ' clockwise';
+	const animatingClass = ' clockwise pulse';
 
 	const addBlock = () => {
 		const index = innerBlocks.length - 1;

src/editor.scss

@@ -6,6 +6,9 @@
 
 .wp-block-red-block-red-orbital {
 	height: auto;
+	padding: 8px;
+	border: 1px solid #ddd;
+	border-radius: 2px;
 
 	.orbital-view {
 		position: relative;

src/save.js

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

src/style.scss

@@ -21,10 +21,6 @@
 
 	font-size: 1rem;
 
-	background-color: white;
-
-	background-color: #21759b;
-
 	ul,
 	li {
 		padding: 0;