Antoine/carhop__plugins__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE handlign a cover ratio variant

Browse Source
This commit is contained in:
Antoine M 2025-12-04 16:58:11 +01:00
parent bf417b4e59
commit 0e6a01205f
4 changed files with 86 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
plugins/carhop-blocks/src/narrative-card/Cover.jsx
View File

@ -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 (
<div className="narrative-card__cover">
<div className={`narrative-card__cover${ratioClass}`}>
{coverUrl && <img src={coverUrl} alt={coverAlt} />}
{!coverUrl && (
<MediaPlaceholder

16
plugins/carhop-blocks/src/narrative-card/block.json
View File

@ -21,6 +21,22 @@
"type": "boolean",
"default": true
},
"aspectRatio": {
"type": "string",
"default": "auto",
"enum": [
"auto",
"1/1",
"4/3",
"3/4",
"3/2",
"2/3",
"16/9",
"21/9",
"9/16",
"9/21"
]
},
"coverPosition": {
"type": "string",
"default": "right",

34
plugins/carhop-blocks/src/narrative-card/edit.js
View File

@ -15,6 +15,7 @@ import {
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
Button,
CheckboxControl,
SelectControl,
} from "@wordpress/components";
import "./editor.scss";
import { lock, trash } from "@wordpress/icons";
@ -28,6 +29,7 @@ export default function Edit({ attributes, setAttributes }) {
coverPosition,
hasCover,
blackWhiteCoverFilter,
aspectRatio,
} = attributes;
const colors = useSetting("color.palette.theme");
@ -101,6 +103,28 @@ export default function Edit({ attributes, setAttributes }) {
<ToggleGroupControlOption label="Droite" value="right" />
</ToggleGroupControl>
<SelectControl
label={__("Proportion", "carhop-blocks")}
value={aspectRatio || "auto"}
options={[
{ label: __("Auto", "carhop-blocks"), value: "auto" },
{ label: "1:1", value: "1/1" },
{ label: "4:3", value: "4/3" },
{ label: "3:4", value: "3/4" },
{ label: "3:2", value: "3/2" },
{ label: "2:3", value: "2/3" },
{ label: "16:9", value: "16/9" },
{ label: "21:9", value: "21/9" },
{ label: "9:16", value: "9/16" },
{ label: "9:21", value: "9/21" },
]}
onChange={(value) => setAttributes({ aspectRatio: value })}
help={__(
"Sélectionnez la proportion d'affichage de la carte.",
"carhop-blocks"
)}
/>
<ToggleGroupControl
className="deligraph-blocks__variant"
isBlock
@ -150,13 +174,20 @@ export default function Edit({ attributes, setAttributes }) {
<CoverImage
coverUrl={coverUrl}
coverAlt={coverAlt}
aspectRatio={aspectRatio}
onSelect={setCoverAttributes}
/>
)}
<div className="narrative-card__content">
<InnerBlocks
allowedBlocks={["core/paragraph", "core/heading", "core/image"]}
allowedBlocks={[
"core/paragraph",
"core/heading",
"core/image",
"carhop-blocks/cta",
"carhop-blocks/cta-group",
]}
template={[
["core/heading", { content: "Lorem ipsum" }],
[
@ -174,6 +205,7 @@ export default function Edit({ attributes, setAttributes }) {
<CoverImage
coverUrl={coverUrl}
coverAlt={coverAlt}
aspectRatio={aspectRatio}
onSelect={setCoverAttributes}
/>
)}

32
plugins/carhop-blocks/src/narrative-card/save.js
View File

@ -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 (
<div
@ -36,7 +42,16 @@ export default function save({ attributes }) {
</svg>
{hasCover && coverPosition === "left" && (
<div className="narrative-card__cover">
<div
className={`narrative-card__cover${
aspectRatio && aspectRatio !== "auto"
? ` narrative-card__cover--ratio-${String(aspectRatio).replace(
/[/:]/g,
"-"
)}`
: ""
}`}
>
{hasCover && coverUrl && <img src={coverUrl} alt={coverAlt} />}
</div>
)}
@ -44,7 +59,16 @@ export default function save({ attributes }) {
<InnerBlocks.Content />
</div>
{hasCover && coverPosition === "right" && (
<div className="narrative-card__cover">
<div
className={`narrative-card__cover${
aspectRatio && aspectRatio !== "auto"
? ` narrative-card__cover--ratio-${String(aspectRatio).replace(
/[/:]/g,
"-"
)}`
: ""
}`}
>
{hasCover && coverUrl && <img src={coverUrl} alt={coverAlt} />}
</div>
)}