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