select central images

src/block.json

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

src/edit.js

@@ -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>