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

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 (
<Orbiter
primary={primary} primary={primary}
secondary={secondary} secondary={secondary}
backgroundColor={block.attributes.backgroundColor} backgroundColor={block.attributes.backgroundColor}
/>; />
);
}); });
return ( return (
@ -59,7 +64,9 @@ 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()}> <div {...useBlockProps()}>
<div className="orbital-view">
<ul className={`orbiters count-${count}`}>{viewList}</ul> <ul className={`orbiters count-${count}`}>{viewList}</ul>
<div className="inner-content"> <div className="inner-content">
@ -77,7 +84,8 @@ export default function Edit({ clientId }) {
</div> </div>
<div class="block-list"> <div class="block-list">
<InnerBlocks /> <InnerBlocks renderAppender={false} allowedBlocks={['red-block/red-orbiter']} />
</div>
</div> </div>
</> </>
); );

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

View File

@ -217,7 +217,8 @@
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;
} }
} }