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; }