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

FEATURE refactoriong component to handle background shapes

Browse Source
This commit is contained in:
Antoine M 2026-03-25 16:02:08 +01:00
parent 330f140e04
commit d3ad12d653
6 changed files with 257 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,10 +38,24 @@
"type": "string", "type": "string",
"default": "inherit" "default": "inherit"
}, },
"borderColor": {
"type": "string",
"default": null
},
"blockVariant": { "blockVariant": {
"type": "string", "type": "string",
"default": "framed" "default": "framed"
}, },
"shapeType": {
"type": "string",
"default": "straight",
"enum": [
"straight",
"shapeA",
"shapeB",
"shapeC"
]
},
"blockWidth": { "blockWidth": {
"type": "string", "type": "string",
"default": "full", "default": "full",

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

@ -24,8 +24,12 @@ import {
Button, Button,
CheckboxControl, CheckboxControl,
ColorPalette, ColorPalette,
SelectControl,
} from "@wordpress/components"; } from "@wordpress/components";
import ShapeA from "./shapeA.jsx";
import ShapeB from "./shapeB.jsx";
import ShapeC from "./shapeC.jsx";
import { filterBgColors, filterTextColors } from "./utilities"; import { filterBgColors, filterTextColors } from "./utilities";
export default function Edit({ attributes, setAttributes, ...props }) { export default function Edit({ attributes, setAttributes, ...props }) {
@ -38,6 +42,8 @@ export default function Edit({ attributes, setAttributes, ...props }) {
hasLightBackground, hasLightBackground,
blockVariant, blockVariant,
blockWidth, blockWidth,
shapeType,
borderColor,
} = attributes; } = attributes;
// Détecter le type de post actuel // Détecter le type de post actuel
@ -84,6 +90,9 @@ export default function Edit({ attributes, setAttributes, ...props }) {
setAttributes({ hasLightBackground: true }); setAttributes({ hasLightBackground: true });
} }
} }
console.log(shapeType);
console.log(blockVariant);
return ( return (
<> <>
<InspectorControls> <InspectorControls>
@ -119,48 +128,85 @@ export default function Edit({ attributes, setAttributes, ...props }) {
<ToggleGroupControlOption value="wide" label="Large" /> <ToggleGroupControlOption value="wide" label="Large" />
<ToggleGroupControlOption value="full" label="Pleine largeur" /> <ToggleGroupControlOption value="full" label="Pleine largeur" />
</ToggleGroupControl> </ToggleGroupControl>
{blockVariant === "backgrounded" ||
(blockVariant === "framed-backgrounded" && (
<Card>
<CardHeader>
<h1>Couleur de fond</h1>
</CardHeader>
<CardBody>
<>
<ColorPalette
colors={filteredBgColors}
value={backgroundColor}
onChange={onBackgroundColorChange}
/>
</>
</CardBody>
</Card>
))}
{(blockVariant === "backgrounded" ||
blockVariant === "framed-backgrounded") &&
postType !== "articles" && (
<Card>
<CardHeader>
<h1>Couleur du texte </h1>
</CardHeader>
<CardBody>
<ColorPalette
colors={filteredTextColors}
value={textColor}
onChange={onTextColorChange}
/>
</CardBody>
</Card>
)}
</PanelBody> </PanelBody>
{(blockVariant === "backgrounded" ||
blockVariant === "framed-backgrounded") && (
<PanelBody
className="deligraph-blocks-components-image__panel-body"
title={__("Arrière plan", "deligraph-blocks")}
>
<ToggleGroupControl
className="deligraph-blocks__variant"
isBlock
label="Type de forme"
onChange={(value) => setAttributes({ shapeType: value })}
value={shapeType}
>
<ToggleGroupControlOption label="Droite" value="straight" />
<ToggleGroupControlOption label="Forme A" value="shapeA" />
<ToggleGroupControlOption label="Forme B" value="shapeB" />
<ToggleGroupControlOption label="Forme C" value="shapeC" />
</ToggleGroupControl>
<SelectControl
__next40pxDefaultSize
label="Type de forme"
onChange={(value) => setAttributes({ shapeType: value })}
value={shapeType}
options={[
{
disabled: true,
label: "Type de forme",
value: "",
},
{
label: "Droite",
value: "straight",
},
{
label: "Forme A",
value: "shapeA",
},
{
label: "Forme B",
value: "shapeB",
},
{
label: "Forme C",
value: "shapeC",
},
]}
/>
<ColorPalette
colors={filteredBgColors}
value={backgroundColor}
onChange={onBackgroundColorChange}
/>
</PanelBody>
)}
{(blockVariant === "backgrounded" ||
blockVariant === "framed-backgrounded") &&
postType !== "articles" && (
<PanelBody
className="deligraph-blocks-components-image__panel-body"
title={__("Couleur du texte", "deligraph-blocks")}
>
<ColorPalette
colors={filteredTextColors}
value={textColor}
onChange={onTextColorChange}
/>
</PanelBody>
)}
</InspectorControls> </InspectorControls>
<section <section
{...useBlockProps({ {...useBlockProps({
className: `${ className: `${
postType !== "articles" && "alignfull" postType !== "articles" && "alignfull"
} content-box content-box--variant-${blockVariant} ${ } content-box content-box--variant-${blockVariant} content-box--${shapeType} ${
hasLightBackground hasLightBackground
? "content-box--bg-light" ? "content-box--bg-light"
: "content-box--bg-dark" : "content-box--bg-dark"
@ -176,6 +222,36 @@ export default function Edit({ attributes, setAttributes, ...props }) {
}, },
})} })}
> >
{blockVariant === "backgrounded" &&
backgroundColor &&
shapeType === "shapeA" && (
<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
)}
{blockVariant === "backgrounded" &&
backgroundColor &&
shapeType === "shapeB" && (
<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
)}
{blockVariant === "backgrounded" &&
backgroundColor &&
shapeType === "shapeC" && (
<ShapeC backgroundColor={backgroundColor} borderColor={"none"} />
)}
{blockVariant === "framed" &&
backgroundColor &&
shapeType === "shapeA" && (
<ShapeA backgroundColor={"none"} borderColor={borderColor} />
)}
{blockVariant === "framed" &&
backgroundColor &&
shapeType === "shapeB" && (
<ShapeB backgroundColor={"none"} borderColor={borderColor} />
)}
{blockVariant === "framed" &&
backgroundColor &&
shapeType === "shapeC" && (
<ShapeC backgroundColor={"none"} borderColor={borderColor} />
)}
<div className="content-box__innerblocks"> <div className="content-box__innerblocks">
<InnerBlocks <InnerBlocks
template={[ template={[

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

@ -1,6 +1,7 @@
import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
import { isColorLight } from "../../_utilities/utilities"; import ShapeA from "./shapeA.jsx";
import ShapeB from "./shapeB.jsx";
import ShapeC from "./shapeC.jsx";
export default function save({ attributes }) { export default function save({ attributes }) {
const { const {
backgroundColor, backgroundColor,
@ -9,11 +10,14 @@ export default function save({ attributes }) {
hasBackgroundColor, hasBackgroundColor,
blockVariant, blockVariant,
blockWidth, blockWidth,
shapeType,
borderColor,
} = attributes; } = attributes;
return ( return (
<section <section
{...useBlockProps.save({ {...useBlockProps.save({
className: `content-box content-box--variant-${blockVariant} ${ className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${
hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark" hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"
} }
${blockWidth === "contained" ? "aligncontained" : blockWidth === "wide" ? "alignwide" : "alignfull"}`, ${blockWidth === "contained" ? "aligncontained" : blockWidth === "wide" ? "alignwide" : "alignfull"}`,
@ -27,6 +31,36 @@ export default function save({ attributes }) {
}, },
})} })}
> >
{blockVariant === "backgrounded" &&
backgroundColor &&
shapeType === "shapeA" && (
<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
)}
{blockVariant === "backgrounded" &&
backgroundColor &&
shapeType === "shapeB" && (
<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
)}
{blockVariant === "backgrounded" &&
backgroundColor &&
shapeType === "shapeC" && (
<ShapeC backgroundColor={backgroundColor} borderColor={"none"} />
)}
{blockVariant === "framed" &&
backgroundColor &&
shapeType === "shapeA" && (
<ShapeA backgroundColor={"none"} borderColor={borderColor} />
)}
{blockVariant === "framed" &&
backgroundColor &&
shapeType === "shapeB" && (
<ShapeB backgroundColor={"none"} borderColor={borderColor} />
)}
{blockVariant === "framed" &&
backgroundColor &&
shapeType === "shapeC" && (
<ShapeC backgroundColor={"none"} borderColor={borderColor} />
)}
<div className="content-box__innerblocks"> <div className="content-box__innerblocks">
<InnerBlocks.Content /> <InnerBlocks.Content />
</div> </div>

32
plugins/carhop-blocks/src/content-box/shapeA.jsx Normal file
View File

@ -0,0 +1,32 @@
import React from "react";
export default function ShapeA({
backgroundOrientation,
backgroundColor,
borderColor,
}) {
return (
<svg
width="1440"
height="744"
viewBox="0 0 1440 744"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={`content-box__shape content-box__shape--${backgroundOrientation}`}
preserveAspectRatio="none"
vectorEffect="non-scaling-stroke"
overflow="visible"
>
<path
d="M0 0H1440V686.701L0 744V0Z"
fill={backgroundColor}
stroke={borderColor}
strokeWidth={borderColor ? "2px" : "0"}
style={{
strokeLinejoin: "round",
vectorEffect: "non-scaling-stroke",
}}
/>
</svg>
);
}

30
plugins/carhop-blocks/src/content-box/shapeB.jsx Normal file
View File

@ -0,0 +1,30 @@
import React from "react";
export default function ShapeB({
backgroundOrientation,
backgroundColor,
borderColor,
}) {
return (
<svg
className={`content-box__shape content-box__shape--${backgroundOrientation}`}
width="1302"
height="654"
viewBox="0 0 1302 654"
preserveAspectRatio="none"
vectorEffect="non-scaling-stroke"
overflow="visible"
>
<path
d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z"
fill={backgroundColor}
stroke={borderColor}
strokeWidth={borderColor ? "2px" : "0"}
style={{
strokeLinejoin: "round",
vectorEffect: "non-scaling-stroke",
}}
/>
</svg>
);
}

32
plugins/carhop-blocks/src/content-box/shapeC.jsx Normal file
View File

@ -0,0 +1,32 @@
import React from "react";
export default function ShapeB({
backgroundOrientation,
backgroundColor,
borderColor,
}) {
return (
<>
<svg
width="1440"
height="997"
viewBox="0 0 1440 997"
className={`content-box__shape content-box__shape--${backgroundOrientation}`}
preserveAspectRatio="none"
vectorEffect="non-scaling-stroke"
overflow="visible"
>
<path
d="M1440 29.8887L0 0V997L1440 979.242V29.8887Z"
fill={backgroundColor}
stroke={borderColor}
strokeWidth={borderColor ? "2px" : "0"}
style={{
strokeLinejoin: "round",
vectorEffect: "non-scaling-stroke",
}}
/>
</svg>
</>
);
}