tidy up settings, add view control

This commit is contained in:
Ray Elliott 2022-07-22 15:19:36 +01:00
parent b31320d3f6
commit 45ff8ba411
3 changed files with 49 additions and 15 deletions

View File

@ -14,5 +14,9 @@
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"attributes": {}
"attributes": {
"count": {
"type": "number"
}
}
}

View File

@ -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">

View File

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