diff --git a/src/edit.js b/src/edit.js index b50e856..4215118 100644 --- a/src/edit.js +++ b/src/edit.js @@ -26,6 +26,9 @@ export default function Edit({ clientId }) { const index = count; dispatch("core/editor").insertBlock(orbiter, index, clientId); } + if (value < count) { + // remove block and append to deleted blocks list + } setCount(value); }; @@ -45,11 +48,13 @@ export default function Edit({ clientId }) { secondary = element; } - return ; + return ( + + ); }); return ( @@ -59,25 +64,28 @@ export default function Edit({ clientId }) { -
-
    {viewList}
-
-
- - +
+
+
    {viewList}
+ +
+
+ + +
-
-
- +
+ +
); diff --git a/src/editor.scss b/src/editor.scss index 3f065ab..8affd4b 100644 --- a/src/editor.scss +++ b/src/editor.scss @@ -5,6 +5,15 @@ */ .wp-block-red-block-red-orbital { + height: auto; + + .orbital-view { + position: relative; + width: 80vw; + max-width: 100%; + height: 80vh; + } + .orbiter-bg { position: absolute; inset: 0; @@ -62,3 +71,7 @@ } } } + +.block-list { + margin-top: 0; +} diff --git a/src/style.scss b/src/style.scss index 98d0a62..597e6c1 100644 --- a/src/style.scss +++ b/src/style.scss @@ -217,11 +217,12 @@ animation: rotate var(--duration__rotation) linear infinite running; .orbiter-content { - animation: rotate var(--duration__rotation) reverse linear infinite running; + animation: rotate var(--duration__rotation) reverse linear infinite + running; } } - // TOOD set this with block variant + // TOOD set this with block variant .anti-clockwise { animation: rotate var(--duration__rotation) reverse linear infinite running; @@ -231,11 +232,11 @@ } @keyframes rotate { - from { - transform: rotate(0); - } - to { - transform: rotate(360deg); - } + from { + transform: rotate(0); + } + to { + transform: rotate(360deg); + } } }