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

FEATURE Add block width option to content box with full and contained variants

Browse Source
This commit is contained in:
Antoine M 2025-11-26 11:55:05 +01:00
parent a9f613d8cb
commit c456d7c999
3 changed files with 31 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
plugins/carhop-blocks/src/content-box/block.json
View File

@ -37,6 +37,14 @@
"blockVariant": {
"type": "string",
"default": "framed"
},
"blockWidth": {
"type": "string",
"default": "full",
"enum": [
"full",
"contained"
]
}
}
}

21
plugins/carhop-blocks/src/content-box/edit.js
View File

@ -37,6 +37,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
textColor,
hasLightBackground,
blockVariant,
blockWidth,
} = attributes;
// Détecter le type de post actuel
@ -77,6 +78,11 @@ export default function Edit({ attributes, setAttributes, ...props }) {
}
function onBlockVariantChange(value) {
setAttributes({ blockVariant: value });
if (value === "framed" || value === "nude") {
setAttributes({ backgroundColor: "#fff" });
setAttributes({ hasLightBackground: true });
}
}
return (
<>
@ -90,12 +96,24 @@ export default function Edit({ attributes, setAttributes, ...props }) {
__nextHasNoMarginBottom
__next40pxDefaultSize
>
<ToggleGroupControlOption value="nude" label="Nu" />
<ToggleGroupControlOption value="framed" label="Encadré" />
<ToggleGroupControlOption
value="backgrounded"
label="Fond coloré"
/>
</ToggleGroupControl>
<ToggleGroupControl
label="Largeur du bloc"
value={blockWidth}
onChange={(value) => setAttributes({ blockWidth: value })}
isBlock
__nextHasNoMarginBottom
__next40pxDefaultSize
>
<ToggleGroupControlOption value="full" label="Pleine largeur" />
<ToggleGroupControlOption value="contained" label="Contenue" />
</ToggleGroupControl>
{blockVariant === "backgrounded" && (
<Card>
@ -138,7 +156,8 @@ export default function Edit({ attributes, setAttributes, ...props }) {
hasLightBackground
? "content-box--bg-light"
: "content-box--bg-dark"
}`,
}
${blockWidth === "contained" ? "alignwide" : "alignfull"}`,
style: {
"--content-box-text-color": textColor ?? "inherit",
"--content-box-background-color":

4
plugins/carhop-blocks/src/content-box/save.js
View File

@ -8,13 +8,15 @@ export default function save({ attributes }) {
hasLightBackground,
hasBackgroundColor,
blockVariant,
blockWidth,
} = attributes;
return (
<section
{...useBlockProps.save({
className: `content-box content-box--variant-${blockVariant} ${
hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"
}`,
}
${blockWidth === "contained" ? "alignwide" : "alignfull"}`,
style: {
"--content-box-text-color": textColor ?? "inherit",
"--content-box-background-color":