improve central image functionality

src/block.json

@@ -22,14 +22,14 @@
 			"type": "string",
 			"source": "attribute",
 			"selector": ".img-primary",
-			"attribute": "src",
+			"attribute": "data-src",
 			"default": ""
 		},
 		"imgUrlHover": {
 			"type": "string",
 			"source": "attribute",
 			"selector": ".img-secondary",
-			"attribute": "src",
+			"attribute": "data-src",
 			"default": ""
 		}
 	}

src/edit.js

@@ -9,6 +9,7 @@ import {
 } from "@wordpress/block-editor";
 import {
 	__experimentalNumberControl as NumberControl,
+	Button,
 	ToggleControl,
 	Panel,
 	PanelBody,
@@ -121,10 +122,18 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 									}}
 									allowedTypes={["image"]}
 									multiple={false}
-									labels={{ title: "Central Image" }}
 									mediaPreview={
 										attributes.imgUrl !== "" ? (
-											<img src={attributes.imgUrl} alt="" />
+											<div>
+												<img src={attributes.imgUrl} alt="" />
+												<Button
+													onClick = {() => {setAttributes({ imgUrl: "" })}}
+													isSmall={true}
+													isDestructive={true}
+												>
+													Remove
+												</Button>
+										</div>
 										) : (
 											<p>No image selected.</p>
 										)
@@ -132,6 +141,9 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 								/>
 							</PanelRow>
 
+							<PanelRow>
+							</PanelRow>
+
 							<PanelRow>
 								<MediaPlaceholder
 									onSelect={(img) => {
@@ -140,10 +152,18 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 									}}
 									allowedTypes={["image"]}
 									multiple={false}
-									labels={{ title: "Central Image On Hover" }}
 									mediaPreview={
 										attributes.imgUrlHover !== "" ? (
-											<img src={attributes.imgUrlHover} alt="" />
+											<div>
+												<img src={attributes.imgUrlHover} alt="" />
+												<Button
+													onClick = {() => {setAttributes({ imgUrlHover: "" })}}
+													isSmall={true}
+													isDestructive={true}
+												>
+													Remove
+												</Button>
+										</div>
 										) : (
 											<p>No image selected.</p>
 										)
@@ -180,8 +200,12 @@ export default function Edit({ attributes, setAttributes, clientId }) {
 
 					<div className="inner-content">
 						<div className="image-hover">
-							<img className="img" src={attributes.imgUrl} />
-							<img className="img" src={attributes.imgUrlHover} />
+							{ attributes.imgUrl !== '' ? (
+								<img src={attributes.imgUrl} />
+							) : null }
+							{ attributes.imgUrlHover !== '' ? (
+								<img src={attributes.imgUrlHover} />
+							) : null }
 						</div>
 					</div>
 				</div>

src/save.js

@@ -31,8 +31,24 @@ export default function save({ attributes }) {
 
 			<div className="inner-content">
 				<div className="image-hover">
-					<img className="img img-primary" src={attributes.imgUrl} />
-					<img className="img img-secondary" src={attributes.imgUrlHover} />
+					{attributes.imgUrl !== "" ? (
+						<img
+							className="img-primary"
+							src={attributes.imgUrl}
+							data-src={attributes.imgUrl}
+						/>
+					) : (
+						<span class="img-primary" data-src={attributes.imgUrl} />
+					)}
+					{attributes.imgUrlHover !== "" ? (
+						<img
+							className="img-secondary"
+							src={attributes.imgUrlHover}
+							data-src={attributes.imgUrlHover}
+						/>
+					) : (
+						<span class="img-secondary" data-src={attributes.imgUrlHover} />
+					)}
 				</div>
 			</div>
 		</div>

src/style.scss

@@ -175,20 +175,20 @@
 		width: 100%;
 		height: 100%;
 
-		& > .img {
+		& > img {
 			position: absolute;
 			width: 100%;
 			height: 100%;
 			inset: 0;
 			object-fit: cover;
 
-			&:nth-child(2) {
+			&:nth-of-type(2) {
 				transition: opacity var(--duration__image-hover);
 				opacity: 0;
 			}
 		}
 
-		&:hover > .img {
+		&:hover > img {
 			&:nth-child(2) {
 				opacity: 1;
 			}