From 0296b12d4c6e1c8791c5a8d7b59081b7b5121d8c Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Fri, 30 Jan 2026 10:13:03 +0100
Subject: [PATCH] FEATURE Handling a sticky column style

---
 .../src/core-variants/core-columns/editor.js  | 83 +++++++++++++++++++
 .../src/core-variants/variants.js             |  1 +
 .../src/core-variants/variants.scss           | 18 ++++
 3 files changed, 102 insertions(+)
 create mode 100644 plugins/carhop-blocks/src/core-variants/core-columns/editor.js

diff --git a/plugins/carhop-blocks/src/core-variants/core-columns/editor.js b/plugins/carhop-blocks/src/core-variants/core-columns/editor.js
new file mode 100644
index 0000000..5d78aea
--- /dev/null
+++ b/plugins/carhop-blocks/src/core-variants/core-columns/editor.js
@@ -0,0 +1,83 @@
+import { registerBlockStyle } from "@wordpress/blocks";
+import { addFilter } from "@wordpress/hooks";
+import {
+	createElement,
+	Fragment,
+	cloneElement,
+	Children,
+} from "@wordpress/element";
+import { createHigherOrderComponent } from "@wordpress/compose";
+
+// Enregistrement du style de bloc
+registerBlockStyle("core/column", {
+	name: "sticky-column",
+	label: "Colonne sticky",
+});
+
+// Fonction pour vérifier si le style sticky-columns est appliqué
+const hasStickyColumnStyle = (attributes) => {
+	const className = attributes?.className || "";
+	return className.includes("is-style-sticky-column");
+};
+
+// -----------------------------
+// 1. Modifier le HTML sauvegardé pour envelopper les colonnes dans une div avec la classe "test"
+// -----------------------------
+addFilter(
+	"blocks.getSaveElement",
+	"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)) {
+			return element;
+		}
+
+		// Si l'élément est null ou n'a pas d'enfants, retourner tel quel
+		if (!element || !element.props || !element.props.children) {
+			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,
+		);
+
+		// Retourner l'élément avec les enfants enveloppés
+		return createElement(
+			element.type,
+			{
+				...element.props,
+				children: wrappedChildren,
+			},
+			wrappedChildren,
+		);
+	},
+);
+
+// -----------------------------
+// 2. Modifier l'affichage dans l'éditeur pour envelopper les colonnes dans une div avec la classe "test"
+// -----------------------------
+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é
+			if (
+				props.name !== "core/column" ||
+				!hasStickyColumnStyle(props.attributes)
+			) {
+				return <BlockEdit {...props} />;
+			}
+			console.log(props);
+
+			return createElement(
+				"div",
+				{ className: "sticky-column-wrapper" },
+				<BlockEdit {...props} />,
+			);
+		};
+	}, "withStickyColumnWrapper"),
+);
diff --git a/plugins/carhop-blocks/src/core-variants/variants.js b/plugins/carhop-blocks/src/core-variants/variants.js
index b29cf75..c61f231 100644
--- a/plugins/carhop-blocks/src/core-variants/variants.js
+++ b/plugins/carhop-blocks/src/core-variants/variants.js
@@ -3,5 +3,6 @@ import "./core-image-variant/editor.js";
 import "./core-embed-variant/editor.js";
 import "./core-list-variant/editor.js";
 import "./core-buttons/editor.js";
+import "./core-columns/editor.js";
 
 import "./variants.scss";
diff --git a/plugins/carhop-blocks/src/core-variants/variants.scss b/plugins/carhop-blocks/src/core-variants/variants.scss
index fc0ed84..07b327c 100644
--- a/plugins/carhop-blocks/src/core-variants/variants.scss
+++ b/plugins/carhop-blocks/src/core-variants/variants.scss
@@ -74,3 +74,21 @@
 		background-image: url("../core-variants/core-list-variant/icons/carhop-pendule.svg");
 	}
 }
+
+.wp-block-column.is-style-sticky-column {
+	.sticky-column-wrapper {
+		position: sticky;
+		top: 0;
+	}
+}
+
+body.wp-admin {
+	.sticky-column-wrapper {
+		flex-basis: 0;
+		flex-grow: 1;
+		.block-editor-block-list__block {
+			position: sticky;
+			top: 0;
+		}
+	}
+}