tidy up settings, add view control

src/block.json

@@ -14,5 +14,9 @@
 	"editorScript": "file:./index.js",
 	"editorStyle": "file:./index.css",
 	"style": "file:./style-index.css",
-	"attributes": {}
+	"attributes": {
+		"count": {
+			"type": "number"
+		}
+	}
 }

src/edit.js

@@ -6,23 +6,29 @@ import {
 	InnerBlocks,
 	InspectorControls,
 } from "@wordpress/block-editor";
-import { __experimentalNumberControl as NumberControl } from "@wordpress/components";
+import { __experimentalNumberControl as NumberControl, ToggleControl, Panel, PanelBody, PanelRow } from "@wordpress/components";
 import { getSaveElement, createBlock } from "@wordpress/blocks";
 
 import "./editor.scss";
 
 import Orbiter from "./orbiter.js";
 
-export default function Edit({ clientId }) {
+export default function Edit({ attributes, setAttributes, clientId }) {
 	const { innerBlocks } = useSelect((select) =>
 		select("core/block-editor").getBlock(clientId)
 	);
 
+	if (isNaN(parseInt(attributes.count, 10))) {
+		setAttributes({count: innerBlocks.length});
+	}
+
 	const [removedBlocks, setRemovedBlocks] = useState([]);
+	const [isAnimating, setIsAnimating] = useState(false);
+
+	const animatingClass = ' clockwise';
 
 	const addBlock = () => {
 		const index = innerBlocks.length - 1;
-		console.log(index);
 		let block;
 
 		if (removedBlocks.length > 0) {
@@ -33,6 +39,7 @@ export default function Edit({ clientId }) {
 		}
 
 		dispatch("core/block-editor").insertBlock(block, index, clientId, false);
+		setAttributes({count: parseInt(attributes.count, 10) + 1});
 	};
 
 	const removeBlock = () => {
@@ -44,6 +51,8 @@ export default function Edit({ clientId }) {
 		const removedBlocksUpdate = removedBlocks;
 		removedBlocksUpdate.push(block);
 		setRemovedBlocks(removedBlocksUpdate);
+
+		setAttributes({count: parseInt(attributes.count, 10) - 1});
 	};
 
 	const onCountChange = (value) => {
@@ -81,20 +90,42 @@ export default function Edit({ clientId }) {
 
 	return (
 		<>
-			<InspectorControls>
+			<InspectorControls key="setting">
-				<div>
+				<div id="red-orbital-controls">
-					<NumberControl
+					<Panel>
-						value={innerBlocks.length}
+						<PanelBody title="Settings" initialOpen={ true }>
-						min={1}
+							<PanelRow>
-						max={12}
+							<legend className="blocks-base-control__label">
-						onChange={onCountChange}
+									{ __( 'Orbital count', 'red-orbital' ) }
-					/>
+							</legend>
+							<NumberControl
+								value={innerBlocks.length}
+								min={1}
+								max={12}
+								onChange={onCountChange}
+							/>
+							</PanelRow>
+						</PanelBody>
+					</Panel>
+					<Panel>
+						<PanelBody title="View Controls" initialOpen={ true }>
+							<PanelRow>
+								<ToggleControl
+									label="Play"
+									checked={ isAnimating }
+									onChange={ () => {
+										setIsAnimating( ( state ) => ! state );
+									} }
+								/>
+							</PanelRow>
+						</PanelBody>
+					</Panel>
 				</div>
 			</InspectorControls>
 
 			<div {...useBlockProps()}>
 				<div className="orbital-view">
-					<ul className={`orbiters count-${innerBlocks.length}`}>{viewList}</ul>
+					<ul className={`orbiters count-${innerBlocks.length}${isAnimating ? animatingClass : ''}`}>{viewList}</ul>
 
 					<div className="inner-content">
 						<div className="image-hover">

src/save.js

@@ -23,14 +23,13 @@ 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}>
-			<ul className={`orbiters clockwise`}>
+			<ul className={`orbiters clockwise count-${attributes.count}`}>
 				<InnerBlocks.Content />
 			</ul>