FEATURE Refactoring block to handle native align width feature and remove duplicated initial blockWidth function

plugins/carhop-blocks/build/content-box/block.json

@@ -44,7 +44,13 @@
     },
     "blockVariant": {
       "type": "string",
-      "default": "framed"
+      "default": "backgrounded",
+      "enum": [
+        "nude",
+        "framed",
+        "framed-backgrounded",
+        "backgrounded"
+      ]
     },
     "shapeType": {
       "type": "string",

plugins/carhop-blocks/build/content-box/index-rtl.css

@@ -1,6 +1,22 @@
 /*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
   !*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.103.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.103.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.1_webpack@5.103.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/content-box/editor.scss ***!
   \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
+.content-box {
+  padding-right: 2.5rem !important;
+  padding-left: 2.5rem !important;
+}
 .content-box a {
   color: var(--content-box-text-color) !important;
 }
+.editor-styles-wrapper .deligraph-blocks-chapter-section {
+  padding-right: 2.5rem !important;
+  padding-left: 2.5rem !important;
+}
+.content-box .wp-block-columns {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+.content-box .block-editor-block-list__layout > .wp-block-columns {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}

plugins/carhop-blocks/build/content-box/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => '1e2c2d08d328ea46924d');
+<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-i18n'), 'version' => '4627138f4496bef9907c');

plugins/carhop-blocks/build/content-box/index.css

@@ -1,8 +1 @@
-/*!*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
+.content-box{padding-left:2.5rem!important;padding-right:2.5rem!important}.content-box a{color:var(--content-box-text-color)!important}.editor-styles-wrapper .deligraph-blocks-chapter-section{padding-left:2.5rem!important;padding-right:2.5rem!important}.content-box .block-editor-block-list__layout>.wp-block-columns,.content-box .wp-block-columns{margin-bottom:0!important;margin-top:0!important}
-  !*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.103.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.103.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.1_webpack@5.103.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/content-box/editor.scss ***!
-  \*************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
-.content-box a {
-  color: var(--content-box-text-color) !important;
-}
-
-/*# sourceMappingURL=index.css.map*/

plugins/carhop-blocks/build/content-box/index.css.map

@@ -1 +0,0 @@
-{"version":3,"file":"content-box/index.css","mappings":";;;AACC;EACC;AAAF,C","sources":["webpack://carhop-blocks/./src/content-box/editor.scss"],"sourcesContent":[".content-box {\n\ta {\n\t\tcolor: var(--content-box-text-color) !important;\n\t}\n}\n"],"names":[],"ignoreList":[],"sourceRoot":""}

plugins/carhop-blocks/build/content-box/style-index.css

@@ -1,4 +1 @@
-/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** css ./node_modules/.pnpm/css-loader@6.11.0_webpack@5.103.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/.pnpm/postcss-loader@6.2.1_postcss@8.5.6_webpack@5.103.0/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/.pnpm/sass-loader@16.0.6_sass@1.94.1_webpack@5.103.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/content-box/style.scss ***!
-  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
 

plugins/carhop-blocks/build/content-box/view.js

@@ -1,7 +0,0 @@
-/******/ (() => { // webpackBootstrap
-/*!*********************************!*\
-  !*** ./src/content-box/view.js ***!
-  \*********************************/
-
-/******/ })()
-;

plugins/carhop-blocks/src/content-box/block.json

@@ -44,7 +44,13 @@
 		},
 		"blockVariant": {
 			"type": "string",
-			"default": "framed"
+			"default": "backgrounded",
+			"enum": [
+				"nude",
+				"framed",
+				"framed-backgrounded",
+				"backgrounded"
+			]
 		},
 		"shapeType": {
 			"type": "string",

plugins/carhop-blocks/src/content-box/deprecated-save.js

@@ -0,0 +1,95 @@
+import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
+import ShapeA from "./shapeA.jsx";
+import ShapeB from "./shapeB.jsx";
+import ShapeC from "./shapeC.jsx";
+
+/**
+ * Ancien save (blockWidth) — conservé pour la migration des blocs.
+ */
+export default function deprecatedSave({ attributes }) {
+	const {
+		backgroundColor,
+		textColor,
+		hasLightBackground,
+		blockVariant,
+		blockWidth,
+		shapeType,
+		borderColor,
+	} = attributes;
+
+	const blockWidthClass =
+		blockWidth === "contained"
+			? "aligncontained"
+			: blockWidth === "wide"
+				? "alignwide"
+				: "alignfull";
+
+	const lightnessClass = hasLightBackground
+		? "content-box--bg-light"
+		: "content-box--bg-dark";
+
+	return (
+		<section
+			{...useBlockProps.save({
+				className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${lightnessClass} ${blockWidthClass}`,
+				style: {
+					"--content-box-text-color": textColor ?? "inherit",
+					"--content-box-background-color":
+						blockVariant === "backgrounded" ||
+						blockVariant === "framed-backgrounded"
+							? backgroundColor
+							: "transparent",
+				},
+			})}
+		>
+			{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} />
+				)}
+			{blockVariant === "framed-backgrounded" &&
+				backgroundColor &&
+				shapeType === "shapeA" && (
+					<ShapeA backgroundColor={backgroundColor} borderColor={borderColor} />
+				)}
+			{blockVariant === "framed-backgrounded" &&
+				backgroundColor &&
+				shapeType === "shapeB" && (
+					<ShapeB backgroundColor={backgroundColor} borderColor={borderColor} />
+				)}
+			{blockVariant === "framed-backgrounded" &&
+				backgroundColor &&
+				shapeType === "shapeC" && (
+					<ShapeC backgroundColor={backgroundColor} borderColor={borderColor} />
+				)}
+			<div className="content-box__innerblocks">
+				<InnerBlocks.Content />
+			</div>
+		</section>
+	);
+}

plugins/carhop-blocks/src/content-box/edit.js

@@ -37,11 +37,11 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 
 	const {
 		hasBackgroundColor,
+		align,
 		backgroundColor,
 		textColor,
 		hasLightBackground,
 		blockVariant,
-		blockWidth,
 		shapeType,
 		borderColor,
 	} = attributes;
@@ -91,8 +91,14 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 		}
 	}
 
-	console.log(shapeType);
+	const alignClass =
-	console.log(blockVariant);
+		align === "full"
+			? "alignfull"
+			: align === "wide"
+				? "alignwide"
+				: "aligncontained";
+
+	console.log(align);
 	return (
 		<>
 			<InspectorControls>
@@ -118,20 +124,19 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 					</ToggleGroupControl>
 					<ToggleGroupControl
 						label="Largeur du bloc"
-						value={blockWidth}
+						value={align}
-						onChange={(value) => setAttributes({ blockWidth: value })}
+						onChange={(value) => setAttributes({ align: value })}
 						isBlock
 						__nextHasNoMarginBottom
 						__next40pxDefaultSize
 					>
-						<ToggleGroupControlOption value="contained" label="Contenue" />
+						<ToggleGroupControlOption value="" label="Contenue" />
 						<ToggleGroupControlOption value="wide" label="Large" />
 						<ToggleGroupControlOption value="full" label="Pleine largeur" />
 					</ToggleGroupControl>
 				</PanelBody>
 
-				{(blockVariant === "backgrounded" ||
+				{blockVariant !== "nude" && (
-					blockVariant === "framed-backgrounded") && (
 					<PanelBody
 						className="deligraph-blocks-components-image__panel-body"
 						title={__("Arrière plan", "deligraph-blocks")}
@@ -210,8 +215,7 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 						hasLightBackground
 							? "content-box--bg-light"
 							: "content-box--bg-dark"
-					}
+					} ${alignClass}`,
-					${blockWidth === "contained" ? "aligncontained" : blockWidth === "wide" ? "alignwide" : "alignfull"}`,
 					style: {
 						"--content-box-text-color": textColor ?? "inherit",
 						"--content-box-background-color":
@@ -252,6 +256,30 @@ export default function Edit({ attributes, setAttributes, ...props }) {
 					shapeType === "shapeC" && (
 						<ShapeC backgroundColor={"none"} borderColor={borderColor} />
 					)}
+				{blockVariant === "framed-backgrounded" &&
+					backgroundColor &&
+					shapeType === "shapeA" && (
+						<ShapeA
+							backgroundColor={backgroundColor}
+							borderColor={borderColor}
+						/>
+					)}
+				{blockVariant === "framed-backgrounded" &&
+					backgroundColor &&
+					shapeType === "shapeB" && (
+						<ShapeB
+							backgroundColor={backgroundColor}
+							borderColor={borderColor}
+						/>
+					)}
+				{blockVariant === "framed-backgrounded" &&
+					backgroundColor &&
+					shapeType === "shapeC" && (
+						<ShapeC
+							backgroundColor={backgroundColor}
+							borderColor={borderColor}
+						/>
+					)}
 				<div className="content-box__innerblocks">
 					<InnerBlocks
 						template={[

plugins/carhop-blocks/src/content-box/editor.scss

@@ -1,5 +1,24 @@
 .content-box {
+	padding-left: 2.5rem !important;
+	padding-right: 2.5rem !important;
+
 	a {
 		color: var(--content-box-text-color) !important;
 	}
 }
+
+.editor-styles-wrapper .deligraph-blocks-chapter-section {
+	padding-left: 2.5rem !important;
+	padding-right: 2.5rem !important;
+}
+
+.content-box {
+	.wp-block-columns {
+		margin-top: 0 !important;
+		margin-bottom: 0 !important;
+	}
+	.block-editor-block-list__layout > .wp-block-columns {
+		margin-top: 0 !important;
+		margin-bottom: 0 !important;
+	}
+}

plugins/carhop-blocks/src/content-box/save.js

@@ -9,18 +9,26 @@ export default function save({ attributes }) {
 		hasLightBackground,
 		hasBackgroundColor,
 		blockVariant,
-		blockWidth,
+		align,
 		shapeType,
 		borderColor,
 	} = attributes;
 
+	const lightnessClass = hasLightBackground
+		? "content-box--bg-light"
+		: "content-box--bg-dark";
+
+	const alignClass =
+		align === "full"
+			? "alignfull"
+			: align === "wide"
+				? "alignwide"
+				: "aligncontained";
+
 	return (
 		<section
 			{...useBlockProps.save({
-				className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${
+				className: `content-box content-box--variant-${blockVariant} content-box--${shapeType} ${lightnessClass} ${alignClass}`,
-					hasLightBackground ? "content-box--bg-light" : "content-box--bg-dark"
-				}
-			${blockWidth === "contained" ? "aligncontained" : blockWidth === "wide" ? "alignwide" : "alignfull"}`,
 				style: {
 					"--content-box-text-color": textColor ?? "inherit",
 					"--content-box-background-color":
@@ -61,6 +69,21 @@ export default function save({ attributes }) {
 				shapeType === "shapeC" && (
 					<ShapeC backgroundColor={"none"} borderColor={borderColor} />
 				)}
+			{blockVariant === "framed-backgrounded" &&
+				backgroundColor &&
+				shapeType === "shapeA" && (
+					<ShapeA backgroundColor={backgroundColor} borderColor={borderColor} />
+				)}
+			{blockVariant === "framed-backgrounded" &&
+				backgroundColor &&
+				shapeType === "shapeB" && (
+					<ShapeB backgroundColor={backgroundColor} borderColor={borderColor} />
+				)}
+			{blockVariant === "framed-backgrounded" &&
+				backgroundColor &&
+				shapeType === "shapeC" && (
+					<ShapeC backgroundColor={backgroundColor} borderColor={borderColor} />
+				)}
 			<div className="content-box__innerblocks">
 				<InnerBlocks.Content />
 			</div>