diff --git a/plugins/carhop-blocks/src/core-variants/core-columns/editor.js b/plugins/carhop-blocks/src/core-variants/core-columns/editor.js
index 5d78aea..2653c3b 100644
--- a/plugins/carhop-blocks/src/core-variants/core-columns/editor.js
+++ b/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 ;
}
- console.log(props);
- return createElement(
- "div",
- { className: "sticky-column-wrapper" },
- ,
- );
+ // Récupérer le rendu du bloc
+ const blockEditElement = ;
+
+ // 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"),
);