rayelliott
/
wp-red-orbital
1
0
Fork 0
Code Issues Pull Requests Projects 2 Releases Wiki Activity

disable adding inner blocks using appender

This commit is contained in:
Ray Elliott 2022-07-21 12:52:27 +01:00
parent f2a2442063
commit 87afd2d60b
3 changed files with 50 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/edit.js
View File

@ -26,6 +26,9 @@ export default function Edit({ clientId }) {
const index = count; const index = count;
dispatch("core/editor").insertBlock(orbiter, index, clientId); dispatch("core/editor").insertBlock(orbiter, index, clientId);
} }
if (value < count) {
// remove block and append to deleted blocks list
}
setCount(value); setCount(value);
}; };
@ -45,11 +48,13 @@ export default function Edit({ clientId }) {
secondary = element; secondary = element;
} }
return <Orbiter return (
primary={primary} <Orbiter
secondary={secondary} primary={primary}
backgroundColor={block.attributes.backgroundColor} secondary={secondary}
/>; backgroundColor={block.attributes.backgroundColor}
/>
);
}); });
return ( return (
@ -59,25 +64,28 @@ export default function Edit({ clientId }) {
<NumberControl value={count} min={1} onChange={onCountChange} /> <NumberControl value={count} min={1} onChange={onCountChange} />
</div> </div>
</InspectorControls> </InspectorControls>
<div {...useBlockProps()}>
<ul className={`orbiters count-${count}`}>{viewList}</ul>
<div className="inner-content"> <div {...useBlockProps()}>
<div className="image-hover"> <div className="orbital-view">
<img <ul className={`orbiters count-${count}`}>{viewList}</ul>
className="img"
src="https://via.placeholder.com/256x256/999/333" <div className="inner-content">
/> <div className="image-hover">
<img <img
className="img" className="img"
src="https://via.placeholder.com/256x256/666/ccc" src="https://via.placeholder.com/256x256/999/333"
/> />
<img
className="img"
src="https://via.placeholder.com/256x256/666/ccc"
/>
</div>
</div> </div>
</div> </div>
</div>
<div class="block-list"> <div class="block-list">
<InnerBlocks /> <InnerBlocks renderAppender={false} allowedBlocks={['red-block/red-orbiter']} />
</div>
</div> </div>
</> </>
); );

13
src/editor.scss
View File

@ -5,6 +5,15 @@
*/ */
.wp-block-red-block-red-orbital { .wp-block-red-block-red-orbital {
height: auto;
.orbital-view {
position: relative;
width: 80vw;
max-width: 100%;
height: 80vh;
}
.orbiter-bg { .orbiter-bg {
position: absolute; position: absolute;
inset: 0; inset: 0;
@ -62,3 +71,7 @@
} }
} }
} }
.block-list {
margin-top: 0;
}

17
src/style.scss
View File

@ -217,11 +217,12 @@
animation: rotate var(--duration__rotation) linear infinite running; animation: rotate var(--duration__rotation) linear infinite running;
.orbiter-content { .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 { .anti-clockwise {
animation: rotate var(--duration__rotation) reverse linear infinite running; animation: rotate var(--duration__rotation) reverse linear infinite running;
@ -231,11 +232,11 @@
} }
@keyframes rotate { @keyframes rotate {
from { from {
transform: rotate(0); transform: rotate(0);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
} }