diff --git a/plugins/carhop-blocks/src/narrative-card/Cover.jsx b/plugins/carhop-blocks/src/narrative-card/Cover.jsx index 66cf13c..f459341 100644 --- a/plugins/carhop-blocks/src/narrative-card/Cover.jsx +++ b/plugins/carhop-blocks/src/narrative-card/Cover.jsx @@ -1,8 +1,15 @@ import { MediaPlaceholder } from "@wordpress/block-editor"; -export default function Cover({ coverUrl, coverAlt, onSelect }) { +export default function Cover({ coverUrl, coverAlt, onSelect, aspectRatio }) { + const ratioClass = + aspectRatio && aspectRatio !== "auto" + ? ` narrative-card__cover--ratio-${String(aspectRatio).replace( + /[/:]/g, + "-" + )}` + : ""; return ( -
+
{coverUrl && {coverAlt}} {!coverUrl && ( + setAttributes({ aspectRatio: value })} + help={__( + "Sélectionnez la proportion d'affichage de la carte.", + "carhop-blocks" + )} + /> + )}
)} diff --git a/plugins/carhop-blocks/src/narrative-card/save.js b/plugins/carhop-blocks/src/narrative-card/save.js index 34c9f02..657f0b7 100644 --- a/plugins/carhop-blocks/src/narrative-card/save.js +++ b/plugins/carhop-blocks/src/narrative-card/save.js @@ -2,8 +2,14 @@ import { useBlockProps } from "@wordpress/block-editor"; import { InnerBlocks } from "@wordpress/block-editor"; export default function save({ attributes }) { - const { hasCover, coverUrl, coverAlt, coverPosition, blackWhiteCoverFilter } = - attributes; + const { + hasCover, + coverUrl, + coverAlt, + coverPosition, + blackWhiteCoverFilter, + aspectRatio, + } = attributes; return (
{hasCover && coverPosition === "left" && ( -
+
{hasCover && coverUrl && {coverAlt}}
)} @@ -44,7 +59,16 @@ export default function save({ attributes }) {
{hasCover && coverPosition === "right" && ( -
+
{hasCover && coverUrl && {coverAlt}}
)}