[IMP] web_editor, website: add a spacing option to modify the grid gaps

The `display: grid` property allows to modify the spacing (or gaps)
between the rows and columns of the grid with the `row-gap` and `column-
gap` CSS properties. When the grid mode was added with [1], these
properties were deliberately ignored and the gaps were forced to 0px.

This commit adds the "Spacing (Y, X)" option that allows to modify these
grid gaps. A grid preview is also added when using this option, in order
to visualize what is being changed in the grid.

[1]: https://github.com/odoo/odoo/commit/cc406afcea7bf5846233a9f97a4a8ac5f618f3ec

task-3369695

Part-of: odoo/odoo#136683

addons/web_editor/static/src/js/common/grid_layout_utils.js

@@ -29,7 +29,8 @@ export function _getGridProperties(rowEl) {
  * @param {Element} rowEl the parent grid element of the element
  */
 export function _setElementToMaxZindex(element, rowEl) {
-    const childrenEls = [...rowEl.children].filter(el => el !== element);
+    const childrenEls = [...rowEl.children].filter(el => el !== element
+        && !el.classList.contains("o_we_grid_preview"));
     element.style.zIndex = Math.max(...childrenEls.map(el => el.style.zIndex)) + 1;
 }
 /**

addons/web_editor/static/src/js/editor/snippets.options.js

@@ -5111,6 +5111,12 @@ registry.Box = SnippetOptionWidget.extend({
 
 
 registry.layout_column = SnippetOptionWidget.extend({
+    /**
+     * @override
+     */
+    cleanUI() {
+        this._removeGridPreview();
+    },
 
     //--------------------------------------------------------------------------
     // Options
@@ -5257,6 +5263,30 @@ registry.layout_column = SnippetOptionWidget.extend({
         gridUtils._resizeGrid(rowEl);
         this.trigger_up('activate_snippet', {$snippet: $(newColumnEl)});
     },
+    /**
+     * @override
+     */
+    async selectStyle(previewMode, widgetValue, params) {
+        await this._super(previewMode, widgetValue, params);
+
+        const rowEl = this.$target[0];
+        const mobileViewThreshold = MEDIAS_BREAKPOINTS[SIZES.LG].minWidth;
+        const isMobileView = rowEl.ownerDocument.defaultView.frameElement.clientWidth < mobileViewThreshold;
+        if (["row-gap", "column-gap"].includes(params.cssProperty) && !isMobileView) {
+            // Reset the animation.
+            this._removeGridPreview();
+            void rowEl.offsetWidth; // Trigger a DOM reflow.
+
+            // Add an animated grid preview.
+            this.options.wysiwyg.odooEditor.observerUnactive("addGridPreview");
+            this.gridPreviewEl = gridUtils._addBackgroundGrid(rowEl, 0);
+            this.gridPreviewEl.classList.add("o_we_grid_preview");
+            gridUtils._setElementToMaxZindex(this.gridPreviewEl, rowEl);
+            this.options.wysiwyg.odooEditor.observerActive("addGridPreview");
+            this.removeGridPreview = this._removeGridPreview.bind(this);
+            rowEl.addEventListener("animationend", this.removeGridPreview);
+        }
+    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -5377,6 +5407,22 @@ registry.layout_column = SnippetOptionWidget.extend({
         // Kept for compatibility.
         rowEl.style.removeProperty('--grid-item-padding-x');
         rowEl.style.removeProperty('--grid-item-padding-y');
+        rowEl.style.removeProperty("gap");
+    },
+    /**
+     * Removes the grid preview that was added when changing the grid gaps.
+     *
+     * @private
+     */
+    _removeGridPreview() {
+        this.options.wysiwyg.odooEditor.observerUnactive("removeGridPreview");
+        this.$target[0].removeEventListener("animationend", this.removeGridPreview);
+        if (this.gridPreviewEl) {
+            this.gridPreviewEl.remove();
+            delete this.gridPreviewEl;
+        }
+        delete this.removeGridPreview;
+        this.options.wysiwyg.odooEditor.observerActive("removeGridPreview");
     },
 });
 

addons/web_editor/static/src/scss/web_editor.frontend.scss

@@ -34,6 +34,11 @@
 
 // GRID LAYOUT
 .o_grid_mode {
+    @include media-breakpoint-down(lg) {
+        // No gaps in mobile view.
+        row-gap: 0px !important;
+        column-gap: 0px !important;
+    }
     @include media-breakpoint-up(lg) {
         display: grid !important;
         grid-auto-rows: 50px;

addons/web_editor/static/src/scss/wysiwyg_snippets.scss

@@ -2614,6 +2614,22 @@ we-select.o_grid we-toggler {
         stroke-opacity: .2;
         stroke-width: 1px;
     }
+
+    &.o_we_grid_preview {
+        pointer-events: none;
+
+        .o_we_cell {
+            animation: gridPreview 2s 0.5s;
+        }
+    }
+}
+
+// Grid preview.
+@keyframes gridPreview {
+    to {
+        fill-opacity: 0;
+        stroke-opacity: 0;
+    }
 }
 
 .o_we_drag_helper {

addons/website/views/snippets/snippets.xml

@@ -361,6 +361,10 @@
         <we-button class="o_we_bg_brand_primary o_grid" data-add-element="text" title="Text" data-name="text">Text</we-button>
         <we-button class="o_we_bg_brand_primary o_grid" data-add-element="button" title="Button" data-name="button">Button</we-button>
     </we-button-group>
+    <we-row t-att-class="indent and 'o_we_sublevel_1'" string="Spacing (Y, X)">
+        <we-input data-dependencies="grid_mode" data-select-style="" data-css-property="row-gap" data-unit="px" data-prevent-important="true" data-apply-to=".row"/>
+        <we-input data-dependencies="grid_mode" data-select-style="" data-css-property="column-gap" data-unit="px" data-max="60" data-prevent-important="true" data-apply-to=".row"/>
+    </we-row>
 </template>
 
 <template id="snippet_options" inherit_id="web_editor.snippet_options" primary="True">