120 lines
2.7 KiB
JavaScript
120 lines
2.7 KiB
JavaScript
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 className="row-inner-imgs">
|
|
<h2>Inner Images</h2>
|
|
</PanelRow>
|
|
|
|
<PanelRow>
|
|
<MediaPlaceholder
|
|
onSelect={(img) => {
|
|
setAttributes({ imgUrl: img.url });
|
|
}}
|
|
allowedTypes={["image"]}
|
|
multiple={false}
|
|
className="img-selector"
|
|
mediaPreview={
|
|
attributes.imgUrl !== "" ? (
|
|
<div>
|
|
<img src={attributes.imgUrl} alt="" />
|
|
<Button
|
|
onClick={() => {
|
|
setAttributes({ imgUrl: "" });
|
|
}}
|
|
isSmall={true}
|
|
isDestructive={true}
|
|
icon="dismiss"
|
|
label="Remove"
|
|
className="remove-img"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<p>No image selected.</p>
|
|
)
|
|
}
|
|
/>
|
|
</PanelRow>
|
|
|
|
<PanelRow>
|
|
<MediaPlaceholder
|
|
onSelect={(img) => {
|
|
setAttributes({ imgUrlHover: img.url });
|
|
}}
|
|
allowedTypes={["image"]}
|
|
multiple={false}
|
|
className="img-selector"
|
|
mediaPreview={
|
|
attributes.imgUrlHover !== "" ? (
|
|
<div>
|
|
<img src={attributes.imgUrlHover} alt="" />
|
|
<Button
|
|
onClick={() => {
|
|
setAttributes({ imgUrlHover: "" });
|
|
}}
|
|
icon="dismiss"
|
|
label="Remove"
|
|
isSmall={true}
|
|
isDestructive={true}
|
|
className="remove-img"
|
|
/>
|
|
</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>
|
|
);
|
|
}
|