refactor controls to separate component
This commit is contained in:
parent
a6aab3aacc
commit
fb31dcbb8d
|
@ -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
97
src/edit.js
|
@ -1,6 +1,5 @@
|
|||
import { useSelect, dispatch } from "@wordpress/data";
|
||||
import { useState } from "@wordpress/element";
|
||||
import { __ } from "@wordpress/i18n";
|
||||
import {
|
||||
useBlockProps,
|
||||
InnerBlocks,
|
||||
|
@ -19,6 +18,7 @@ import { getSaveElement, createBlock } from "@wordpress/blocks";
|
|||
|
||||
import "./editor.scss";
|
||||
|
||||
import Controls from "./controls.js";
|
||||
import Orbiter from "./orbiter.js";
|
||||
|
||||
export default function Edit({ attributes, setAttributes, clientId }) {
|
||||
|
@ -98,95 +98,14 @@ export default function Edit({ attributes, setAttributes, clientId }) {
|
|||
|
||||
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}
|
||||
<Controls
|
||||
setAttributes={setAttributes}
|
||||
attributes={attributes}
|
||||
innerBlocks={innerBlocks}
|
||||
onCountChange={onCountChange}
|
||||
isAnimating={isAnimating}
|
||||
setIsAnimating={setIsAnimating}
|
||||
/>
|
||||
</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 className="orbital-view">
|
||||
|
|
Loading…
Reference in New Issue