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

select central images

This commit is contained in:
Ray Elliott 2022-07-23 15:43:54 +01:00
parent 3626a1083a
commit d5b97d6efa
2 changed files with 58 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/block.json
View File

@ -17,6 +17,14 @@
"attributes": {
"count": {
"type": "number"
},
"imgId": {
"type": "number",
"default": 0
},
"imgIdHover": {
"type": "number",
"default": 0
}
}
}

51
src/edit.js
View File

@ -5,8 +5,9 @@ import {
useBlockProps,
InnerBlocks,
InspectorControls,
MediaPlaceholder,
} from "@wordpress/block-editor";
import { __experimentalNumberControl as NumberControl, ToggleControl, Panel, PanelBody, PanelRow } from "@wordpress/components";
import { __experimentalNumberControl as NumberControl, Button, ToggleControl, Panel, PanelBody, PanelRow } from "@wordpress/components";
import { getSaveElement, createBlock } from "@wordpress/blocks";
import "./editor.scss";
@ -18,6 +19,18 @@ export default function Edit({ attributes, setAttributes, 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))) {
setAttributes({count: innerBlocks.length});
}
@ -94,6 +107,7 @@ export default function Edit({ attributes, setAttributes, clientId }) {
<div id="red-orbital-controls">
<Panel>
<PanelBody title="Settings" initialOpen={ true }>
<PanelRow>
<legend className="blocks-base-control__label">
{ __( 'Orbital count', 'red-orbital' ) }
@ -105,6 +119,41 @@ export default function Edit({ attributes, setAttributes, clientId }) {
onChange={onCountChange}
/>
</PanelRow>
<PanelRow>
<MediaPlaceholder
onSelect = {
( img ) => {
setAttributes( { imgId: img.id } );
}
}
allowedTypes = { [ 'image' ] }
multiple = { false }
labels = { { title: 'Central Image' } }
value = {attributes.imgId}
mediaPreview = {imgThumbUrl ? (
<img src={imgThumbUrl} alt="" />
) : <p>No image selected.</p>}
/>
</PanelRow>
<PanelRow>
<MediaPlaceholder
onSelect = {
( img ) => {
setAttributes( { imgIdHover: img.id } );
}
}
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>
</PanelBody>
</Panel>
<Panel>