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

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

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",

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,6 +276,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
}, },
})} })}
> >
<div className="chapter-section__inner">
{blockVariant === "backgrounded" && {blockVariant === "backgrounded" &&
backgroundColor && backgroundColor &&
shapeType === "variationA" && ( shapeType === "variationA" && (
@ -359,6 +354,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
handleUpload={true} handleUpload={true}
/> />
)} )}
</div>
</section> </section>
</> </>
); );

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,6 +36,7 @@ export default function save({ attributes }) {
}, },
})} })}
> >
<div className="chapter-section__inner">
{blockVariant === "backgrounded" && {blockVariant === "backgrounded" &&
backgroundColor && backgroundColor &&
shapeType === "variationA" && ( shapeType === "variationA" && (
@ -76,6 +70,7 @@ export default function save({ attributes }) {
alt={coverAlt} alt={coverAlt}
/> />
)} )}
</div>
</section> </section>
); );
} }