diff --git a/src/controls.js b/src/controls.js
new file mode 100644
index 0000000..b1b2f16
--- /dev/null
+++ b/src/controls.js
@@ -0,0 +1,113 @@
+import { InspectorControls, MediaPlaceholder } from "@wordpress/block-editor";
+import { __ } from "@wordpress/i18n";
+
+import {
+ __experimentalNumberControl as NumberControl,
+ Button,
+ ToggleControl,
+ Panel,
+ PanelBody,
+ PanelRow,
+} from "@wordpress/components";
+
+export default function Controls({
+ attributes,
+ setAttributes,
+ innerBlocks,
+ onCountChange,
+ isAnimating,
+ setIsAnimating,
+}) {
+ return (
+
+
+
+
+
+
+
+
+
+
+ {
+ setAttributes({ imgUrl: img.url });
+ }}
+ allowedTypes={["image"]}
+ multiple={false}
+ mediaPreview={
+ attributes.imgUrl !== "" ? (
+
+
+
+
+ ) : (
+ No image selected.
+ )
+ }
+ />
+
+
+
+
+
+ {
+ setAttributes({ imgUrlHover: img.url });
+ }}
+ allowedTypes={["image"]}
+ multiple={false}
+ mediaPreview={
+ attributes.imgUrlHover !== "" ? (
+
+
+
+
+ ) : (
+ No image selected.
+ )
+ }
+ />
+
+
+
+
+
+
+ {
+ setIsAnimating((state) => !state);
+ }}
+ />
+
+
+
+
+
+ );
+}
diff --git a/src/edit.js b/src/edit.js
index ae89ff2..1c2891c 100644
--- a/src/edit.js
+++ b/src/edit.js
@@ -1,6 +1,5 @@
import { useSelect, dispatch } from "@wordpress/data";
import { useState } from "@wordpress/element";
-import { __ } from "@wordpress/i18n";
import {
useBlockProps,
InnerBlocks,
@@ -19,6 +18,7 @@ import { getSaveElement, createBlock } from "@wordpress/blocks";
import "./editor.scss";
+import Controls from "./controls.js";
import Orbiter from "./orbiter.js";
export default function Edit({ attributes, setAttributes, clientId }) {
@@ -98,95 +98,14 @@ export default function Edit({ attributes, setAttributes, clientId }) {
return (
<>
-
-
-
-
-
-
-
-
-
-
- {
- console.log("onSelect", img);
- setAttributes({ imgUrl: img.url });
- }}
- allowedTypes={["image"]}
- multiple={false}
- mediaPreview={
- attributes.imgUrl !== "" ? (
-
-
-
-
- ) : (
- No image selected.
- )
- }
- />
-
-
-
-
-
-
- {
- console.log("onSelect", img);
- setAttributes({ imgUrlHover: img.url });
- }}
- allowedTypes={["image"]}
- multiple={false}
- mediaPreview={
- attributes.imgUrlHover !== "" ? (
-
-
-
-
- ) : (
- No image selected.
- )
- }
- />
-
-
-
-
-
-
- {
- setIsAnimating((state) => !state);
- }}
- />
-
-
-
-
-
+