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

FEATURE replacing the block width by a native align support
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Antoine M 2026-05-19 15:36:18 +02:00
parent 0a64a8a4d6
commit b0973a13d5
3 changed files with 116 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
plugins/carhop-blocks/src/chapter-section/block.json
View File

@ -14,7 +14,11 @@
"color": true, "color": true,
"style": true, "style": true,
"width": true "width": true
} },
"align": [
"wide",
"full"
]
}, },
"textdomain": "carhop-blocks", "textdomain": "carhop-blocks",
"editorScript": "file:./index.js", "editorScript": "file:./index.js",
@ -27,14 +31,6 @@
"type": "string", "type": "string",
"default": "full" "default": "full"
}, },
"blockWidth": {
"type": "string",
"default": "full",
"enum": [
"full",
"contained"
]
},
"coverType": { "coverType": {
"type": "string", "type": "string",
"default": "image", "default": "image",

162
plugins/carhop-blocks/src/chapter-section/edit.js
View File

@ -27,6 +27,7 @@ import ShapeB from "./shapeB.jsx";
export default function Edit({ attributes, setAttributes, ...props }) { export default function Edit({ attributes, setAttributes, ...props }) {
const colors = useSetting("color.palette.theme"); const colors = useSetting("color.palette.theme");
const { const {
align,
hasLightBackground, hasLightBackground,
disposition, disposition,
coverType, coverType,
@ -35,7 +36,6 @@ export default function Edit({ attributes, setAttributes, ...props }) {
coverId, coverId,
coverSize, coverSize,
backgroundColor, backgroundColor,
blockWidth,
textColor, textColor,
shapeType, shapeType,
blockVariant, blockVariant,
@ -98,10 +98,10 @@ export default function Edit({ attributes, setAttributes, ...props }) {
className="deligraph-blocks__variant" className="deligraph-blocks__variant"
isBlock isBlock
label="Largeur du bloc" label="Largeur du bloc"
onChange={(value) => setAttributes({ blockWidth: value })} onChange={(value) => setAttributes({ align: value })}
value={blockWidth} value={align || "wide"}
> >
<ToggleGroupControlOption label="Contenue" value="contained" /> <ToggleGroupControlOption label="Contenue" value="wide" />
<ToggleGroupControlOption label="Pleine largeur" value="full" /> <ToggleGroupControlOption label="Pleine largeur" value="full" />
</ToggleGroupControl> </ToggleGroupControl>
{/* Modèle de bloc */} {/* Modèle de bloc */}
@ -261,12 +261,6 @@ export default function Edit({ attributes, setAttributes, ...props }) {
<section <section
{...useBlockProps({ {...useBlockProps({
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} chapter-section--${blockVariant} className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} chapter-section--${blockVariant}
${
blockWidth === "full"
? "chapter-section--width-full"
: "chapter-section--width-contained"
}
${ ${
hasLightBackground hasLightBackground
? "chapter-section--bg-light" ? "chapter-section--bg-light"
@ -282,83 +276,85 @@ export default function Edit({ attributes, setAttributes, ...props }) {
}, },
})} })}
> >
{blockVariant === "backgrounded" && <div className="chapter-section__inner">
backgroundColor && {blockVariant === "backgrounded" &&
shapeType === "variationA" && ( backgroundColor &&
<ShapeA backgroundColor={backgroundColor} borderColor={"none"} /> shapeType === "variationA" && (
)} <ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
{blockVariant === "backgrounded" && )}
backgroundColor && {blockVariant === "backgrounded" &&
shapeType === "variationB" && ( backgroundColor &&
<ShapeB backgroundColor={backgroundColor} borderColor={"none"} /> shapeType === "variationB" && (
)} <ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
{blockVariant === "framed" && )}
backgroundColor && {blockVariant === "framed" &&
shapeType === "variationA" && ( backgroundColor &&
<ShapeA backgroundColor={"none"} borderColor={borderColor} /> shapeType === "variationA" && (
)} <ShapeA backgroundColor={"none"} borderColor={borderColor} />
{blockVariant === "framed" && )}
backgroundColor && {blockVariant === "framed" &&
shapeType === "variationB" && ( backgroundColor &&
<ShapeB backgroundColor={"none"} borderColor={borderColor} /> shapeType === "variationB" && (
)} <ShapeB backgroundColor={"none"} borderColor={borderColor} />
<div className="chapter-section__content"> )}
<div className="chapter-section__innerblocks"> <div className="chapter-section__content">
<InnerBlocks <div className="chapter-section__innerblocks">
template={[ <InnerBlocks
[ template={[
"carhop-blocks/heading", [
{ "carhop-blocks/heading",
innerBlocks: [ {
[ innerBlocks: [
"core/heading", [
{ "core/heading",
content: "Un titre précis ", {
}, content: "Un titre précis ",
},
],
], ],
], },
}, ],
], [
[ "core/paragraph",
{
className: "chapter-section__title",
placeholder: "Chapter Title",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue augue, sagittis quis mauris in, consequat vehicula est. Aliquam quis nulla ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum eget lorem eget aliquet. Fusce vel consequat neque. ",
},
],
]}
allowedBlocks={[
"core/heading",
"core/paragraph", "core/paragraph",
{ "core/list",
className: "chapter-section__title", "core/file",
placeholder: "Chapter Title", "core/button",
content: "core/buttons",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue augue, sagittis quis mauris in, consequat vehicula est. Aliquam quis nulla ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum eget lorem eget aliquet. Fusce vel consequat neque. ", "carhop-blocks/heading",
}, "carhop-blocks/cta",
], "carhop-blocks/cta-group",
]} ]}
allowedBlocks={[ />
"core/heading", </div>
"core/paragraph",
"core/list",
"core/file",
"core/button",
"core/buttons",
"carhop-blocks/heading",
"carhop-blocks/cta",
"carhop-blocks/cta-group",
]}
/>
</div> </div>
{coverUrl && (
<img
className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
src={coverUrl}
alt={coverAlt}
/>
)}
{!coverUrl && (
<MediaPlaceholder
accept="image/*"
allowedTypes={["image"]}
onSelect={setCoverAttributes}
multiple={false}
handleUpload={true}
/>
)}
</div> </div>
{coverUrl && (
<img
className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
src={coverUrl}
alt={coverAlt}
/>
)}
{!coverUrl && (
<MediaPlaceholder
accept="image/*"
allowedTypes={["image"]}
onSelect={setCoverAttributes}
multiple={false}
handleUpload={true}
/>
)}
</section> </section>
</> </>
); );

69
plugins/carhop-blocks/src/chapter-section/save.js
View File

@ -10,7 +10,6 @@ export default function save({ attributes }) {
coverSize, coverSize,
coverType, coverType,
backgroundColor, backgroundColor,
blockWidth,
textColor, textColor,
shapeType, shapeType,
blockVariant, blockVariant,
@ -21,12 +20,6 @@ export default function save({ attributes }) {
<section <section
{...useBlockProps.save({ {...useBlockProps.save({
className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} chapter-section--${blockVariant} className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} chapter-section--${blockVariant}
${
blockWidth === "full"
? "chapter-section--width-full"
: "chapter-section--width-contained"
}
${ ${
hasLightBackground hasLightBackground
? "chapter-section--bg-light" ? "chapter-section--bg-light"
@ -43,39 +36,41 @@ export default function save({ attributes }) {
}, },
})} })}
> >
{blockVariant === "backgrounded" && <div className="chapter-section__inner">
backgroundColor && {blockVariant === "backgrounded" &&
shapeType === "variationA" && ( backgroundColor &&
<ShapeA backgroundColor={backgroundColor} borderColor={"none"} /> shapeType === "variationA" && (
)} <ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
{blockVariant === "backgrounded" && )}
backgroundColor && {blockVariant === "backgrounded" &&
shapeType === "variationB" && ( backgroundColor &&
<ShapeB backgroundColor={backgroundColor} borderColor={"none"} /> shapeType === "variationB" && (
)} <ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
{blockVariant === "framed" && )}
backgroundColor && {blockVariant === "framed" &&
shapeType === "variationA" && ( backgroundColor &&
<ShapeA backgroundColor={"none"} borderColor={borderColor} /> shapeType === "variationA" && (
)} <ShapeA backgroundColor={"none"} borderColor={borderColor} />
{blockVariant === "framed" && )}
backgroundColor && {blockVariant === "framed" &&
shapeType === "variationB" && ( backgroundColor &&
<ShapeB backgroundColor={"none"} borderColor={borderColor} /> shapeType === "variationB" && (
)} <ShapeB backgroundColor={"none"} borderColor={borderColor} />
)}
<div className="chapter-section__content"> <div className="chapter-section__content">
<div className="chapter-section__innerblocks"> <div className="chapter-section__innerblocks">
<InnerBlocks.Content /> <InnerBlocks.Content />
</div>
</div> </div>
{coverUrl && (
<img
className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
src={coverUrl}
alt={coverAlt}
/>
)}
</div> </div>
{coverUrl && (
<img
className={`chapter-section__cover chapter-section__cover--${coverSize} chapter-section__cover--${coverType}`}
src={coverUrl}
alt={coverAlt}
/>
)}
</section> </section>
); );
} }