FEATURE Extending block features with border and background shape refactoring into dedicated components

plugins/carhop-blocks/src/chapter-section/block.json

@@ -9,7 +9,12 @@
 	"description": "Example block scaffolded with Create Block tool.",
 	"example": {},
 	"supports": {
-		"html": false
+		"html": false,
+		"border": {
+			"color": true,
+			"style": true,
+			"width": true
+		}
 	},
 	"textdomain": "carhop-blocks",
 	"editorScript": "file:./index.js",
@@ -65,10 +70,23 @@
 				"right"
 			]
 		},
-		"hasBackgroundColor": {
+		"hasBorder": {
 			"type": "boolean",
 			"default": false
 		},
+		"blockVariant": {
+			"type": "string",
+			"default": "framed",
+			"enum": [
+				"framed",
+				"backgrounded",
+				"nude"
+			]
+		},
+		"borderColor": {
+			"type": "string",
+			"default": "#136f63"
+		},
 		"backgroundColor": {
 			"type": "string",
 			"default": "#ffffff"
@@ -88,14 +106,6 @@
 				"variationA",
 				"variationB"
 			]
-		},
-		"backgroundOrientation": {
-			"type": "string",
-			"default": "left",
-			"enum": [
-				"left",
-				"right"
-			]
 		}
 	},
 	"usesContext": [

plugins/carhop-blocks/src/chapter-section/edit.js

@@ -7,6 +7,8 @@ import {
 	MediaPlaceholder,
 	useSetting,
 } from "@wordpress/block-editor";
+import shapeA from "./shapeA.jsx";
+import shapeB from "./shapeB.jsx";
 import { lock, trash } from "@wordpress/icons";
 import { ColorPalette } from "@wordpress/components";
 import {
@@ -19,6 +21,8 @@ import {
 
 import "./editor.scss";
 import { isColorLight } from "../../_utilities/utilities";
+import ShapeA from "./shapeA.jsx";
+import ShapeB from "./shapeB.jsx";
 
 export default function Edit({ attributes, setAttributes, ...props }) {
 	const colors = useSetting("color.palette.theme");
@@ -30,12 +34,13 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 		coverAlt,
 		coverId,
 		coverSize,
-		hasBackgroundColor,
 		backgroundColor,
-		backgroundOrientation,
+
 		blockWidth,
 		textColor,
 		shapeType,
+		blockVariant,
+		borderColor,
 	} = attributes;
 
 	function onDispositionChange(disposition) {
@@ -61,34 +66,37 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 		setAttributes({ backgroundColor: value });
 		setHasLightBackground(value);
 	}
-	function onHasBackgroundColorChange(value) {
+
-		setAttributes({ hasBackgroundColor: value });
-		if (!value) {
-			setAttributes({ backgroundColor: null });
-		}
-	}
 	function onCoverTypeChange(value) {
 		setAttributes({ coverType: value });
 	}
 
-	function onBackgroundOrientationChange(value) {
+	function onBlockVariantChange(value) {
-		setAttributes({ backgroundOrientation: value });
+		setAttributes({ blockVariant: value });
+
+		if (value === "framed" || value === "nude") {
+			setAttributes({ backgroundColor: "#fff" });
+			setAttributes({ hasLightBackground: true });
+		}
 	}
+
 	function setHasLightBackground(backgroundColor) {
 		if (!backgroundColor) return;
 
 		const isLightBackgroundColor = isColorLight(backgroundColor);
-		console.log(isLightBackgroundColor);
 		setAttributes({ hasLightBackground: isLightBackgroundColor });
 	}
+	console.log(backgroundColor);
+	console.log(isColorLight(backgroundColor));
 
 	return (
 		<>
 			<InspectorControls>
 				<PanelBody
 					className="deligraph-blocks-components-image__panel-body"
-					title={__("Largeur", "deligraph-blocks")}
+					title={__("Aspect & Variante de bloc", "deligraph-blocks")}
 				>
+					{/* Largeur du bloc */}
 					<ToggleGroupControl
 						className="deligraph-blocks__variant"
 						isBlock
@@ -99,10 +107,95 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 						<ToggleGroupControlOption label="Contenue" value="contained" />
 						<ToggleGroupControlOption label="Pleine largeur" value="full" />
 					</ToggleGroupControl>
+					{/* Modèle de bloc */}
+					<ToggleGroupControl
+						className="deligraph-blocks__variant"
+						isBlock
+						label="Modèle de bloc"
+						onChange={onBlockVariantChange}
+						value={blockVariant}
+					>
+						<ToggleGroupControlOption label="Nu" value="nude" />
+						<ToggleGroupControlOption label="Encadré" value="framed" />
+						<ToggleGroupControlOption
+							label="Fond Coloré"
+							value="backgrounded"
+						/>
+					</ToggleGroupControl>
+					{/* Disposition */}
+					<ToggleGroupControl
+						className="deligraph-blocks__variant"
+						isBlock
+						label="Disposition"
+						onChange={onDispositionChange}
+						value={disposition}
+					>
+						<ToggleGroupControlOption label="Gauche" value="left" />
+						<ToggleGroupControlOption label="Droite" value="right" />
+					</ToggleGroupControl>
 				</PanelBody>
+
+				{blockVariant === "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="Variation A"
+								value="variationA"
+							/>
+							<ToggleGroupControlOption
+								label="Variation B"
+								value="variationB"
+							/>
+						</ToggleGroupControl>
+						<ColorPalette
+							colors={colors}
+							value={backgroundColor}
+							onChange={onBackgroundColorChange}
+						/>
+					</PanelBody>
+				)}
+				{blockVariant === "framed" && (
+					<PanelBody
+						className="deligraph-blocks-components-image__panel-body"
+						title={__("Bordure", "deligraph-blocks")}
+					>
+						<ToggleGroupControl
+							className="deligraph-blocks__variant"
+							isBlock
+							label="Type de forme"
+							onChange={(value) => setAttributes({ shapeType: value })}
+							value={shapeType}
+						>
+							<ToggleGroupControlOption
+								label="Variation A"
+								value="variationA"
+							/>
+							<ToggleGroupControlOption
+								label="Variation B"
+								value="variationB"
+							/>
+						</ToggleGroupControl>
+						<ColorPalette
+							colors={colors}
+							value={borderColor}
+							onChange={(value) => setAttributes({ borderColor: value })}
+						/>
+					</PanelBody>
+				)}
+
 				<PanelBody
 					className="deligraph-blocks-components-image__panel-body"
 					title={__("Image d'accompagnement", "deligraph-blocks")}
+					initialOpen={false}
 				>
 					{coverUrl && <img src={coverUrl} alt={coverAlt} />}
 					<div className="media-replace-container">
@@ -141,16 +234,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 						<ToggleGroupControlOption label="Classique" value="classic" />
 						<ToggleGroupControlOption label="Encadrée" value="photoframe" />
 					</ToggleGroupControl>
-					<ToggleGroupControl
+
-						className="deligraph-blocks__variant"
-						isBlock
-						label="Disposition"
-						onChange={onDispositionChange}
-						value={disposition}
-					>
-						<ToggleGroupControlOption label="Gauche" value="left" />
-						<ToggleGroupControlOption label="Droite" value="right" />
-					</ToggleGroupControl>
 					<ToggleGroupControl
 						className="deligraph-blocks__variant"
 						isBlock
@@ -165,45 +249,10 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 					</ToggleGroupControl>
 				</PanelBody>
 
-				<PanelBody
-					className="deligraph-blocks-components-image__panel-body"
-					title={__("Arrière plan", "deligraph-blocks")}
-				>
-					<CheckboxControl
-						label="Arrière plan coloré"
-						checked={hasBackgroundColor}
-						onChange={onHasBackgroundColorChange}
-					/>
-					{hasBackgroundColor && (
-						<>
-							<ToggleGroupControl
-								className="deligraph-blocks__variant"
-								isBlock
-								label="Type de forme"
-								onChange={(value) => setAttributes({ shapeType: value })}
-								value={shapeType}
-							>
-								<ToggleGroupControlOption
-									label="Variation A"
-									value="variationA"
-								/>
-								<ToggleGroupControlOption
-									label="Variation B"
-									value="variationB"
-								/>
-							</ToggleGroupControl>
-							<ColorPalette
-								colors={colors}
-								value={backgroundColor}
-								onChange={onBackgroundColorChange}
-							/>
-						</>
-					)}
-				</PanelBody>
-
 				<PanelBody
 					className="deligraph-blocks-components-image__panel-body"
 					title={__("Couleur du texte", "deligraph-blocks")}
+					initialOpen={false}
 				>
 					<ColorPalette
 						colors={colors}
@@ -214,62 +263,47 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 			</InspectorControls>
 			<section
 				{...useBlockProps({
-					className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} 
+					className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} chapter-section--${blockVariant}
-					${
+						${
-						blockWidth === "full"
+							blockWidth === "full"
-							? "chapter-section--width-full"
+								? "chapter-section--width-full"
-							: "chapter-section--width-contained"
+								: "chapter-section--width-contained"
-					}
+						}
-					${
+			
-						hasBackgroundColor && backgroundColor
+						${
-							? "chapter-section--has-background"
+							hasLightBackground
-							: ""
+								? "chapter-section--bg-light"
-					}
+								: "chapter-section--bg-dark"
-					${
+						}`,
-						hasLightBackground
-							? "chapter-section--bg-light"
-							: "chapter-section--bg-dark"
-					}`,
 
 					style: {
 						"--chapter-section-text-color": textColor ? textColor : "#136f63",
+						"--cta-current-color":
+							blockVariant === "backgrounded"
+								? "inherit"
+								: "var(--wp--preset--color--primary) !important",
 					},
 				})}
 			>
-				{hasBackgroundColor &&
+				{blockVariant === "backgrounded" &&
 					backgroundColor &&
 					shapeType === "variationA" && (
-						<>
+						<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
-							<svg
-								width="1440"
-								height="744"
-								viewBox="0 0 1440 744"
-								fill="none"
-								xmlns="http://www.w3.org/2000/svg"
-								className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
-								preserveAspectRatio="none"
-							>
-								<path d="M0 0H1440V686.701L0 744V0Z" fill={backgroundColor} />
-							</svg>
-						</>
 					)}
-				{hasBackgroundColor &&
+				{blockVariant === "backgrounded" &&
 					backgroundColor &&
 					shapeType === "variationB" && (
-						<>
+						<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
-							<svg
+					)}
-								className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
+				{blockVariant === "framed" &&
-								width="1302"
+					backgroundColor &&
-								height="654"
+					shapeType === "variationA" && (
-								viewBox="0 0 1302 654"
+						<ShapeA backgroundColor={"none"} borderColor={borderColor} />
-								preserveAspectRatio="none"
+					)}
-							>
+				{blockVariant === "framed" &&
-								<path
+					backgroundColor &&
-									d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z"
+					shapeType === "variationB" && (
-									fill={backgroundColor}
+						<ShapeB backgroundColor={"none"} borderColor={borderColor} />
-								/>
-							</svg>
-						</>
 					)}
 				<div className="chapter-section__content">
 					<div className="chapter-section__innerblocks">

plugins/carhop-blocks/src/chapter-section/save.js

@@ -1,4 +1,6 @@
 import { useBlockProps, RichText, InnerBlocks } from "@wordpress/block-editor";
+import ShapeA from "./shapeA.jsx";
+import ShapeB from "./shapeB.jsx";
 export default function save({ attributes }) {
 	const {
 		hasLightBackground,
@@ -8,64 +10,57 @@ export default function save({ attributes }) {
 		coverSize,
 		coverType,
 		backgroundColor,
-		hasBackgroundColor,
-		backgroundOrientation,
 		blockWidth,
 		textColor,
 		shapeType,
+		blockVariant,
+		borderColor,
 	} = attributes;
 
 	return (
 		<section
 			{...useBlockProps.save({
-				className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition} 
+				className: `deligraph-blocks-chapter-section chapter-section chapter-section--${disposition}  chapter-section--${blockVariant}
 			${
 				blockWidth === "full"
 					? "chapter-section--width-full"
 					: "chapter-section--width-contained"
 			}
-				${hasLightBackground ? "chapter-section--bg-light" : "chapter-section--bg-dark"}
+			
-			${
+					${
-				hasBackgroundColor && backgroundColor
+						hasLightBackground
-					? "chapter-section--has-background"
+							? "chapter-section--bg-light"
-					: ""
+							: "chapter-section--bg-dark"
-			}`,
+					}`,
 				style: {
 					"--chapter-section-text-color": textColor ? textColor : "#136f63",
+					"--cta-current-color":
+						blockVariant === "backgrounded"
+							? "inherit"
+							: "var(--wp--preset--color--primary) !important",
 				},
 			})}
 		>
-			{hasBackgroundColor && backgroundColor && shapeType === "variationA" && (
+			{blockVariant === "backgrounded" &&
-				<>
+				backgroundColor &&
-					<svg
+				shapeType === "variationA" && (
-						width="1440"
+					<ShapeA backgroundColor={backgroundColor} borderColor={"none"} />
-						height="744"
+				)}
-						viewBox="0 0 1440 744"
+			{blockVariant === "backgrounded" &&
-						fill="none"
+				backgroundColor &&
-						xmlns="http://www.w3.org/2000/svg"
+				shapeType === "variationB" && (
-						className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
+					<ShapeB backgroundColor={backgroundColor} borderColor={"none"} />
-						preserveAspectRatio="none"
+				)}
-					>
+			{blockVariant === "framed" &&
-						<path d="M0 0H1440V686.701L0 744V0Z" fill={backgroundColor} />
+				backgroundColor &&
-					</svg>
+				shapeType === "variationA" && (
-				</>
+					<ShapeA backgroundColor={"none"} borderColor={borderColor} />
-			)}
+				)}
-			{hasBackgroundColor && backgroundColor && shapeType === "variationB" && (
+			{blockVariant === "framed" &&
-				<>
+				backgroundColor &&
-					<svg
+				shapeType === "variationB" && (
-						className={`chapter-section__background chapter-section__background--${backgroundOrientation}`}
+					<ShapeB backgroundColor={"none"} borderColor={borderColor} />
-						width="1302"
+				)}
-						height="654"
-						viewBox="0 0 1302 654"
-						preserveAspectRatio="none"
-					>
-						<path
-							d="M1302 0L0 15.8281V654L1302 642.633L1302 0Z"
-							fill={backgroundColor}
-						/>
-					</svg>
-				</>
-			)}
 
 			<div className="chapter-section__content">
 				<div className="chapter-section__innerblocks">

plugins/carhop-blocks/src/chapter-section/shapeA.jsx

@@ -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={`chapter-section__background chapter-section__background--${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>
+	);
+}

plugins/carhop-blocks/src/chapter-section/shapeB.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+export default function ShapeB({
+	backgroundOrientation,
+	backgroundColor,
+	borderColor,
+}) {
+	return (
+		<svg
+			className={`chapter-section__background chapter-section__background--${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>
+	);
+}