diff --git a/src/block.json b/src/block.json
index 45021a8..0437c5a 100644
--- a/src/block.json
+++ b/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": ""
}
}
diff --git a/src/edit.js b/src/edit.js
index 62bba54..ae89ff2 100644
--- a/src/edit.js
+++ b/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 !== "" ? (
-
+
+
+
+
) : (
No image selected.
)
@@ -132,6 +141,9 @@ export default function Edit({ attributes, setAttributes, clientId }) {
/>
+
+
+
{
@@ -140,10 +152,18 @@ export default function Edit({ attributes, setAttributes, clientId }) {
}}
allowedTypes={["image"]}
multiple={false}
- labels={{ title: "Central Image On Hover" }}
mediaPreview={
attributes.imgUrlHover !== "" ? (
-
+
+
+
+
) : (
No image selected.
)
@@ -180,8 +200,12 @@ export default function Edit({ attributes, setAttributes, clientId }) {
-
-
+ { attributes.imgUrl !== '' ? (
+
+ ) : null }
+ { attributes.imgUrlHover !== '' ? (
+
+ ) : null }
diff --git a/src/save.js b/src/save.js
index 7dc1b11..2b74c23 100644
--- a/src/save.js
+++ b/src/save.js
@@ -31,8 +31,24 @@ export default function save({ attributes }) {
-
-
+ {attributes.imgUrl !== "" ? (
+
+ ) : (
+
+ )}
+ {attributes.imgUrlHover !== "" ? (
+
+ ) : (
+
+ )}
diff --git a/src/style.scss b/src/style.scss
index 08a0be9..9b9b36e 100644
--- a/src/style.scss
+++ b/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;
}