rayelliott
/
wp-red-orbital
1
0
Fork 0
Code Issues Pull Requests Projects 2 Releases Wiki Activity

refactor controls to separate component

This commit is contained in:
Ray Elliott 2022-07-25 15:19:11 +01:00
parent a6aab3aacc
commit fb31dcbb8d
2 changed files with 122 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/controls.js vendored Normal file
View File

@ -0,0 +1,113 @@
import { InspectorControls, MediaPlaceholder } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import {
__experimentalNumberControl as NumberControl,
Button,
ToggleControl,
Panel,
PanelBody,
PanelRow,
} from "@wordpress/components";
export default function Controls({
attributes,
setAttributes,
innerBlocks,
onCountChange,
isAnimating,
setIsAnimating,
}) {
return (
<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>
<PanelRow>
<MediaPlaceholder
onSelect={(img) => {
setAttributes({ imgUrl: img.url });
}}
allowedTypes={["image"]}
multiple={false}
mediaPreview={
attributes.imgUrl !== "" ? (
<div>
<img src={attributes.imgUrl} alt="" />
<Button
onClick={() => {
setAttributes({ imgUrl: "" });
}}
isSmall={true}
isDestructive={true}
>
Remove
</Button>
</div>
) : (
<p>No image selected.</p>
)
}
/>
</PanelRow>
<PanelRow></PanelRow>
<PanelRow>
<MediaPlaceholder
onSelect={(img) => {
setAttributes({ imgUrlHover: img.url });
}}
allowedTypes={["image"]}
multiple={false}
mediaPreview={
attributes.imgUrlHover !== "" ? (
<div>
<img src={attributes.imgUrlHover} alt="" />
<Button
onClick={() => {
setAttributes({ imgUrlHover: "" });
}}
isSmall={true}
isDestructive={true}
>
Remove
</Button>
</div>
) : (
<p>No image selected.</p>
)
}
/>
</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>
);
}

97
src/edit.js
View File

@ -1,6 +1,5 @@
import { useSelect, dispatch } from "@wordpress/data"; import { useSelect, dispatch } from "@wordpress/data";
import { useState } from "@wordpress/element"; import { useState } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { import {
useBlockProps, useBlockProps,
InnerBlocks, InnerBlocks,
@ -19,6 +18,7 @@ import { getSaveElement, createBlock } from "@wordpress/blocks";
import "./editor.scss"; import "./editor.scss";
import Controls from "./controls.js";
import Orbiter from "./orbiter.js"; import Orbiter from "./orbiter.js";
export default function Edit({ attributes, setAttributes, clientId }) { export default function Edit({ attributes, setAttributes, clientId }) {
@ -98,95 +98,14 @@ export default function Edit({ attributes, setAttributes, clientId }) {
return ( return (
<> <>
<InspectorControls key="setting"> <Controls
<div id="red-orbital-controls"> setAttributes={setAttributes}
<Panel> attributes={attributes}
<PanelBody title="Settings" initialOpen={true}> innerBlocks={innerBlocks}
<PanelRow> onCountChange={onCountChange}
<legend className="blocks-base-control__label"> isAnimating={isAnimating}
{__("Orbital count", "red-orbital")} setIsAnimating={setIsAnimating}
</legend>
<NumberControl
value={innerBlocks.length}
min={1}
max={12}
onChange={onCountChange}
/> />
</PanelRow>
<PanelRow>
<MediaPlaceholder
onSelect={(img) => {
console.log("onSelect", img);
setAttributes({ imgUrl: img.url });
}}
allowedTypes={["image"]}
multiple={false}
mediaPreview={
attributes.imgUrl !== "" ? (
<div>
<img src={attributes.imgUrl} alt="" />
<Button
onClick = {() => {setAttributes({ imgUrl: "" })}}
isSmall={true}
isDestructive={true}
>
Remove
</Button>
</div>
) : (
<p>No image selected.</p>
)
}
/>
</PanelRow>
<PanelRow>
</PanelRow>
<PanelRow>
<MediaPlaceholder
onSelect={(img) => {
console.log("onSelect", img);
setAttributes({ imgUrlHover: img.url });
}}
allowedTypes={["image"]}
multiple={false}
mediaPreview={
attributes.imgUrlHover !== "" ? (
<div>
<img src={attributes.imgUrlHover} alt="" />
<Button
onClick = {() => {setAttributes({ imgUrlHover: "" })}}
isSmall={true}
isDestructive={true}
>
Remove
</Button>
</div>
) : (
<p>No image selected.</p>
)
}
/>
</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 {...useBlockProps()}>
<div className="orbital-view"> <div className="orbital-view">