82 lines
2.1 KiB
JavaScript
82 lines
2.1 KiB
JavaScript
import { useSelect, dispatch } from '@wordpress/data';
|
|
import {useState, createElement} from "@wordpress/element";
|
|
import { __ } from "@wordpress/i18n";
|
|
import { useBlockProps, InnerBlocks, InspectorControls } from "@wordpress/block-editor";
|
|
import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
|
|
import { getSaveElement, createBlock } from '@wordpress/blocks';
|
|
|
|
import "./editor.scss";
|
|
|
|
import Orbiter from './orbiter.js';
|
|
|
|
export default function Edit( { attributes, setAttributes, clientId }) {
|
|
const { innerBlocks } = useSelect(select => select('core/block-editor').getBlock(clientId));
|
|
|
|
const [count, setCount] = useState(innerBlocks.length);
|
|
|
|
const onCountChange = (value) => {
|
|
if (value > count) {
|
|
const orbiter = createBlock('red-block/red-orbiter');
|
|
const index = count;
|
|
dispatch('core/editor').insertBlock(orbiter, index, clientId);
|
|
}
|
|
setCount(value);
|
|
}
|
|
|
|
const viewList = innerBlocks.map(block => {
|
|
let primary = null;
|
|
let secondary = null;
|
|
|
|
if(block.innerBlocks.length > 0) {
|
|
const {name, attributes, innerBlocks} = block.innerBlocks[0];
|
|
const element = getSaveElement( name, attributes, innerBlocks );
|
|
primary = element;
|
|
}
|
|
|
|
if(block.innerBlocks.length > 1) {
|
|
const {name, attributes, innerBlocks} = block.innerBlocks[1];
|
|
const element = getSaveElement( name, attributes, innerBlocks );
|
|
secondary = element;
|
|
}
|
|
|
|
return (
|
|
<Orbiter primary={primary} secondary={secondary}/>
|
|
)
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<InspectorControls>
|
|
<div>
|
|
<NumberControl
|
|
value={ count }
|
|
min={1}
|
|
onChange={ onCountChange }
|
|
/>
|
|
</div>
|
|
</InspectorControls>
|
|
<div {...useBlockProps()}>
|
|
|
|
<ul className={`orbiters clockwise 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 class="block-list">
|
|
<InnerBlocks />
|
|
</div>
|
|
</>
|
|
);
|
|
}
|