FEATURE Handling a sticky column style

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"),
+);

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";

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;
+		}
+	}
+}