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;
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 <Orbiter
primary={primary}
secondary={secondary}
backgroundColor={block.attributes.backgroundColor}
/>;
return (
<Orbiter
primary={primary}
secondary={secondary}
backgroundColor={block.attributes.backgroundColor}
/>
);
});
return (
@ -59,25 +64,28 @@ export default function Edit({ clientId }) {
<NumberControl value={count} min={1} onChange={onCountChange} />
</div>
</InspectorControls>
<div {...useBlockProps()}>
<ul className={`orbiters count-${count}`}>{viewList}</ul>
<div className="inner-content">
<div className="image-hover">
<img
className="img"
src="https://via.placeholder.com/256x256/999/333"
/>
<img
className="img"
src="https://via.placeholder.com/256x256/666/ccc"
/>
<div {...useBlockProps()}>
<div className="orbital-view">
<ul className={`orbiters count-${count}`}>{viewList}</ul>
<div className="inner-content">
<div className="image-hover">
<img
className="img"
src="https://via.placeholder.com/256x256/999/333"
/>
<img
className="img"
src="https://via.placeholder.com/256x256/666/ccc"
/>
</div>
</div>
</div>
</div>
<div class="block-list">
<InnerBlocks />
<div class="block-list">
<InnerBlocks renderAppender={false} allowedBlocks={['red-block/red-orbiter']} />
</div>
</div>
</>
);

13
src/editor.scss
View File

@ -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;
}

17
src/style.scss
View File

@ -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);
}
}
}