FEATURE Update sticky column variant

plugins/carhop-blocks/src/core-variants/core-columns/editor.js

@@ -1,23 +1,18 @@
 import { registerBlockStyle } from "@wordpress/blocks";
 import { addFilter } from "@wordpress/hooks";
-import {
-	createElement,
-	Fragment,
-	cloneElement,
-	Children,
-} from "@wordpress/element";
+import { createElement, cloneElement, Children } from "@wordpress/element";
 import { createHigherOrderComponent } from "@wordpress/compose";
 
 // Enregistrement du style de bloc
-registerBlockStyle("core/column", {
-	name: "sticky-column",
-	label: "Colonne sticky",
+registerBlockStyle("core/columns", {
+	name: "sticky-columns",
+	label: "Colonnes sticky",
 });
 
 // Fonction pour vérifier si le style sticky-columns est appliqué
-const hasStickyColumnStyle = (attributes) => {
+const hasStickyColumnsStyle = (attributes) => {
 	const className = attributes?.className || "";
-	return className.includes("is-style-sticky-column");
+	return className.includes("is-style-sticky-columns");
 };
 
 // -----------------------------
@@ -28,7 +23,10 @@ addFilter(
 	"carhop/sticky-columns-wrapper",
 	(element, blockType, attributes) => {
 		// Vérifier si c'est le bloc core/columns et si le style sticky-columns est appliqué
-		if (blockType.name !== "core/column" || !hasStickyColumnStyle(attributes)) {
+		if (
+			blockType.name !== "core/columns" ||
+			!hasStickyColumnsStyle(attributes)
+		) {
 			return element;
 		}
 
@@ -37,47 +35,68 @@ addFilter(
 			return element;
 		}
 
-		// Envelopper les enfants dans une div avec la classe "sticky-column-wrapper"
-		const wrappedChildren = createElement(
-			"div",
-			{ className: "sticky-column-wrapper" },
-			element.props.children,
-		);
+		// Envelopper chaque colonne individuellement dans une div avec la classe "test"
+		const children = Children.toArray(element.props.children);
+		const wrappedChildren = children.map((child, index) => {
+			// Si c'est un élément React (une colonne), l'envelopper dans une div
+			if (child && typeof child === "object" && child.type) {
+				return createElement(
+					"div",
+					{ key: `sticky-column-wrapper-${index}`, className: "test" },
+					child,
+				);
+			}
+			// Sinon, retourner tel quel
+			return child;
+		});
 
 		// Retourner l'élément avec les enfants enveloppés
-		return createElement(
-			element.type,
-			{
-				...element.props,
-				children: wrappedChildren,
-			},
-			wrappedChildren,
-		);
+		return cloneElement(element, {
+			...element.props,
+			children: wrappedChildren,
+		});
 	},
 );
 
 // -----------------------------
 // 2. Modifier l'affichage dans l'éditeur pour envelopper les colonnes dans une div avec la classe "test"
+// Note: Le rendu côté serveur est géré par render.php
+// Pour l'éditeur, on utilise un filtre sur BlockEdit pour modifier le rendu
 // -----------------------------
 addFilter(
 	"editor.BlockEdit",
 	"carhop/sticky-columns-editor-wrapper",
 	createHigherOrderComponent((BlockEdit) => {
 		return (props) => {
-			// Vérifier si c'est le bloc core/column et si le style sticky-column est appliqué
+			// Vérifier si c'est le bloc core/columns et si le style sticky-columns est appliqué
 			if (
-				props.name !== "core/column" ||
-				!hasStickyColumnStyle(props.attributes)
+				props.name !== "core/columns" ||
+				!hasStickyColumnsStyle(props.attributes)
 			) {
 				return <BlockEdit {...props} />;
 			}
-			console.log(props);
 
-			return createElement(
-				"div",
-				{ className: "sticky-column-wrapper" },
-				<BlockEdit {...props} />,
-			);
+			// Récupérer le rendu du bloc
+			const blockEditElement = <BlockEdit {...props} />;
+
+			// Si l'élément a des enfants (les inner blocks), on les enveloppe dans une div avec la classe "test"
+			if (
+				blockEditElement &&
+				blockEditElement.props &&
+				blockEditElement.props.children
+			) {
+				// Cloner l'élément et envelopper les enfants dans une div avec la classe "test"
+				return cloneElement(blockEditElement, {
+					...blockEditElement.props,
+					children: createElement(
+						"div",
+						{ className: "test" },
+						blockEditElement.props.children,
+					),
+				});
+			}
+
+			return blockEditElement;
 		};
-	}, "withStickyColumnWrapper"),
+	}, "withStickyColumnsWrapper"),
 );