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

add central images

This commit is contained in:
Ray Elliott 2022-07-25 13:46:41 +01:00
parent d5b97d6efa
commit 8725e3fe72
3 changed files with 80 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/block.json
View File

@ -18,13 +18,19 @@
"count": { "count": {
"type": "number" "type": "number"
}, },
"imgId": { "imgUrl": {
"type": "number", "type": "string",
"default": 0 "source": "attribute",
"selector": ".img-primary",
"attribute": "src",
"default": ""
}, },
"imgIdHover": { "imgUrlHover": {
"type": "number", "type": "string",
"default": 0 "source": "attribute",
"selector": ".img-secondary",
"attribute": "src",
"default": ""
} }
} }
} }

112
src/edit.js
View File

@ -1,5 +1,5 @@
import { useSelect, dispatch } from "@wordpress/data"; import { useSelect, dispatch } from "@wordpress/data";
import { useState, createElement } from "@wordpress/element"; import { useState } from "@wordpress/element";
import { __ } from "@wordpress/i18n"; import { __ } from "@wordpress/i18n";
import { import {
useBlockProps, useBlockProps,
@ -7,7 +7,13 @@ import {
InspectorControls, InspectorControls,
MediaPlaceholder, MediaPlaceholder,
} from "@wordpress/block-editor"; } from "@wordpress/block-editor";
import { __experimentalNumberControl as NumberControl, Button, ToggleControl, Panel, PanelBody, PanelRow } from "@wordpress/components"; import {
__experimentalNumberControl as NumberControl,
ToggleControl,
Panel,
PanelBody,
PanelRow,
} from "@wordpress/components";
import { getSaveElement, createBlock } from "@wordpress/blocks"; import { getSaveElement, createBlock } from "@wordpress/blocks";
import "./editor.scss"; import "./editor.scss";
@ -19,26 +25,14 @@ export default function Edit({ attributes, setAttributes, clientId }) {
select("core/block-editor").getBlock(clientId) select("core/block-editor").getBlock(clientId)
); );
const centralImg = useSelect((select) =>
select( "core" ).getEntityRecord( "postType", "attachment", attributes.imgId),
);
console.log(centralImg);
const imgThumbUrl = centralImg ? centralImg?.media_details?.sizes?.thumbnail?.source_url : '';
const centralImgHover = useSelect((select) =>
select( "core" ).getEntityRecord( "postType", "attachment", attributes.imgIdHover),
);
console.log(centralImgHover);
const imgThumbHoverUrl = centralImg ? centralImgHover?.media_details?.sizes?.thumbnail?.source_url : '';
if (isNaN(parseInt(attributes.count, 10))) { if (isNaN(parseInt(attributes.count, 10))) {
setAttributes({count: innerBlocks.length}); setAttributes({ count: innerBlocks.length });
} }
const [removedBlocks, setRemovedBlocks] = useState([]); const [removedBlocks, setRemovedBlocks] = useState([]);
const [isAnimating, setIsAnimating] = useState(false); const [isAnimating, setIsAnimating] = useState(false);
const animatingClass = ' clockwise pulse'; const animatingClass = " clockwise pulse";
const addBlock = () => { const addBlock = () => {
const index = innerBlocks.length - 1; const index = innerBlocks.length - 1;
@ -52,7 +46,7 @@ export default function Edit({ attributes, setAttributes, clientId }) {
} }
dispatch("core/block-editor").insertBlock(block, index, clientId, false); dispatch("core/block-editor").insertBlock(block, index, clientId, false);
setAttributes({count: parseInt(attributes.count, 10) + 1}); setAttributes({ count: parseInt(attributes.count, 10) + 1 });
}; };
const removeBlock = () => { const removeBlock = () => {
@ -65,7 +59,7 @@ export default function Edit({ attributes, setAttributes, clientId }) {
removedBlocksUpdate.push(block); removedBlocksUpdate.push(block);
setRemovedBlocks(removedBlocksUpdate); setRemovedBlocks(removedBlocksUpdate);
setAttributes({count: parseInt(attributes.count, 10) - 1}); setAttributes({ count: parseInt(attributes.count, 10) - 1 });
}; };
const onCountChange = (value) => { const onCountChange = (value) => {
@ -106,11 +100,10 @@ export default function Edit({ attributes, setAttributes, clientId }) {
<InspectorControls key="setting"> <InspectorControls key="setting">
<div id="red-orbital-controls"> <div id="red-orbital-controls">
<Panel> <Panel>
<PanelBody title="Settings" initialOpen={ true }> <PanelBody title="Settings" initialOpen={true}>
<PanelRow> <PanelRow>
<legend className="blocks-base-control__label"> <legend className="blocks-base-control__label">
{ __( 'Orbital count', 'red-orbital' ) } {__("Orbital count", "red-orbital")}
</legend> </legend>
<NumberControl <NumberControl
value={innerBlocks.length} value={innerBlocks.length}
@ -122,49 +115,52 @@ export default function Edit({ attributes, setAttributes, clientId }) {
<PanelRow> <PanelRow>
<MediaPlaceholder <MediaPlaceholder
onSelect = { onSelect={(img) => {
( img ) => { console.log("onSelect", img);
setAttributes( { imgId: img.id } ); setAttributes({ imgUrl: img.url });
}}
allowedTypes={["image"]}
multiple={false}
labels={{ title: "Central Image" }}
mediaPreview={
attributes.imgUrl !== "" ? (
<img src={attributes.imgUrl} alt="" />
) : (
<p>No image selected.</p>
)
} }
}
allowedTypes = { [ 'image' ] }
multiple = { false }
labels = { { title: 'Central Image' } }
value = {attributes.imgId}
mediaPreview = {imgThumbUrl ? (
<img src={imgThumbUrl} alt="" />
) : <p>No image selected.</p>}
/> />
</PanelRow> </PanelRow>
<PanelRow> <PanelRow>
<MediaPlaceholder <MediaPlaceholder
onSelect = { onSelect={(img) => {
( img ) => { console.log("onSelect", img);
setAttributes( { imgIdHover: img.id } ); setAttributes({ imgUrlHover: img.url });
}}
allowedTypes={["image"]}
multiple={false}
labels={{ title: "Central Image On Hover" }}
mediaPreview={
attributes.imgUrlHover !== "" ? (
<img src={attributes.imgUrlHover} alt="" />
) : (
<p>No image selected.</p>
)
} }
}
allowedTypes = { [ 'image' ] }
multiple = { false }
labels = { { title: 'Central Image On Hover' } }
value = {attributes.imgIdHover}
mediaPreview = {imgThumbHoverUrl ? (
<img src={imgThumbHoverUrl} alt="" />
) : <p>No image selected.</p>}
/> />
</PanelRow> </PanelRow>
</PanelBody> </PanelBody>
</Panel> </Panel>
<Panel> <Panel>
<PanelBody title="View Controls" initialOpen={ true }> <PanelBody title="View Controls" initialOpen={true}>
<PanelRow> <PanelRow>
<ToggleControl <ToggleControl
label="Play" label="Play"
checked={ isAnimating } checked={isAnimating}
onChange={ () => { onChange={() => {
setIsAnimating( ( state ) => ! state ); setIsAnimating((state) => !state);
} } }}
/> />
</PanelRow> </PanelRow>
</PanelBody> </PanelBody>
@ -174,18 +170,18 @@ export default function Edit({ attributes, setAttributes, clientId }) {
<div {...useBlockProps()}> <div {...useBlockProps()}>
<div className="orbital-view"> <div className="orbital-view">
<ul className={`orbiters count-${innerBlocks.length}${isAnimating ? animatingClass : ''}`}>{viewList}</ul> <ul
className={`orbiters count-${innerBlocks.length}${
isAnimating ? animatingClass : ""
}`}
>
{viewList}
</ul>
<div className="inner-content"> <div className="inner-content">
<div className="image-hover"> <div className="image-hover">
<img <img className="img" src={attributes.imgUrl} />
className="img" <img className="img" src={attributes.imgUrlHover} />
src="https://via.placeholder.com/256x256/999/333"
/>
<img
className="img"
src="https://via.placeholder.com/256x256/666/ccc"
/>
</div> </div>
</div> </div>
</div> </div>

10
src/save.js
View File

@ -31,14 +31,8 @@ export default function save({ attributes }) {
<div className="inner-content"> <div className="inner-content">
<div className="image-hover"> <div className="image-hover">
<img <img className="img img-primary" src={attributes.imgUrl} />
className="img" <img className="img img-secondary" src={attributes.imgUrlHover} />
src="https://via.placeholder.com/256x256/999/333"
/>
<img
className="img"
src="https://via.placeholder.com/256x256/666/ccc"
/>
</div> </div>
</div> </div>
</div> </div>