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 ;
+ }
+ console.log(props);
+
+ return createElement(
+ "div",
+ { className: "sticky-column-wrapper" },
+ ,
+ );
+ };
+ }, "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;
+ }
+ }
+}