tidy up settings, add view control
This commit is contained in:
parent
b31320d3f6
commit
45ff8ba411
|
@ -14,5 +14,9 @@
|
|||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style-index.css",
|
||||
"attributes": {}
|
||||
"attributes": {
|
||||
"count": {
|
||||
"type": "number"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
55
src/edit.js
55
src/edit.js
|
@ -6,23 +6,29 @@ import {
|
|||
InnerBlocks,
|
||||
InspectorControls,
|
||||
} from "@wordpress/block-editor";
|
||||
import { __experimentalNumberControl as NumberControl } from "@wordpress/components";
|
||||
import { __experimentalNumberControl as NumberControl, ToggleControl, Panel, PanelBody, PanelRow } from "@wordpress/components";
|
||||
import { getSaveElement, createBlock } from "@wordpress/blocks";
|
||||
|
||||
import "./editor.scss";
|
||||
|
||||
import Orbiter from "./orbiter.js";
|
||||
|
||||
export default function Edit({ clientId }) {
|
||||
export default function Edit({ attributes, setAttributes, clientId }) {
|
||||
const { innerBlocks } = useSelect((select) =>
|
||||
select("core/block-editor").getBlock(clientId)
|
||||
);
|
||||
|
||||
if (isNaN(parseInt(attributes.count, 10))) {
|
||||
setAttributes({count: innerBlocks.length});
|
||||
}
|
||||
|
||||
const [removedBlocks, setRemovedBlocks] = useState([]);
|
||||
const [isAnimating, setIsAnimating] = useState(false);
|
||||
|
||||
const animatingClass = ' clockwise';
|
||||
|
||||
const addBlock = () => {
|
||||
const index = innerBlocks.length - 1;
|
||||
console.log(index);
|
||||
let block;
|
||||
|
||||
if (removedBlocks.length > 0) {
|
||||
|
@ -33,6 +39,7 @@ export default function Edit({ clientId }) {
|
|||
}
|
||||
|
||||
dispatch("core/block-editor").insertBlock(block, index, clientId, false);
|
||||
setAttributes({count: parseInt(attributes.count, 10) + 1});
|
||||
};
|
||||
|
||||
const removeBlock = () => {
|
||||
|
@ -44,6 +51,8 @@ export default function Edit({ clientId }) {
|
|||
const removedBlocksUpdate = removedBlocks;
|
||||
removedBlocksUpdate.push(block);
|
||||
setRemovedBlocks(removedBlocksUpdate);
|
||||
|
||||
setAttributes({count: parseInt(attributes.count, 10) - 1});
|
||||
};
|
||||
|
||||
const onCountChange = (value) => {
|
||||
|
@ -81,20 +90,42 @@ export default function Edit({ clientId }) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<InspectorControls>
|
||||
<div>
|
||||
<NumberControl
|
||||
value={innerBlocks.length}
|
||||
min={1}
|
||||
max={12}
|
||||
onChange={onCountChange}
|
||||
/>
|
||||
<InspectorControls key="setting">
|
||||
<div id="red-orbital-controls">
|
||||
<Panel>
|
||||
<PanelBody title="Settings" initialOpen={ true }>
|
||||
<PanelRow>
|
||||
<legend className="blocks-base-control__label">
|
||||
{ __( 'Orbital count', 'red-orbital' ) }
|
||||
</legend>
|
||||
<NumberControl
|
||||
value={innerBlocks.length}
|
||||
min={1}
|
||||
max={12}
|
||||
onChange={onCountChange}
|
||||
/>
|
||||
</PanelRow>
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
<Panel>
|
||||
<PanelBody title="View Controls" initialOpen={ true }>
|
||||
<PanelRow>
|
||||
<ToggleControl
|
||||
label="Play"
|
||||
checked={ isAnimating }
|
||||
onChange={ () => {
|
||||
setIsAnimating( ( state ) => ! state );
|
||||
} }
|
||||
/>
|
||||
</PanelRow>
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
</div>
|
||||
</InspectorControls>
|
||||
|
||||
<div {...useBlockProps()}>
|
||||
<div className="orbital-view">
|
||||
<ul className={`orbiters count-${innerBlocks.length}`}>{viewList}</ul>
|
||||
<ul className={`orbiters count-${innerBlocks.length}${isAnimating ? animatingClass : ''}`}>{viewList}</ul>
|
||||
|
||||
<div className="inner-content">
|
||||
<div className="image-hover">
|
||||
|
|
|
@ -23,14 +23,13 @@ import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
|
|||
* @return {WPElement} Element to render.
|
||||
*/
|
||||
export default function save({ attributes }) {
|
||||
|
||||
const blockProps = useBlockProps.save({
|
||||
className: "pulse",
|
||||
});
|
||||
|
||||
return (
|
||||
<div {...blockProps}>
|
||||
<ul className={`orbiters clockwise`}>
|
||||
<ul className={`orbiters clockwise count-${attributes.count}`}>
|
||||
<InnerBlocks.Content />
|
||||
</ul>
|
||||
|
||||
|
|
Loading…
Reference in New Issue