[FIX] website: hide block in mobile display mode

Before this commit, display mode is changed to block after hiding it on mobile mode.
After this commit, only change display mode for mobile and use inherited mode otherwise.

task-2431659

closes odoo/odoo#65716

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

2 files changed, 38 insertions, 2 deletions

diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index abd32016131..d830c99afa8 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -1967,6 +1967,42 @@ options.registry.topMenuColor = options.Class.extend({
 });
 
 /**
+ * Manage the visibility of snippets on mobile.
+ */
+options.registry.MobileVisibility = options.Class.extend({
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Allows to show or hide the associated snippet in mobile display mode.
+     *
+     * @see this.selectClass for parameters
+     */
+    showOnMobile(previewMode, widgetValue, params) {
+        const classes = `d-none d-md-${this.$target.css('display')}`;
+        this.$target.toggleClass(classes, !widgetValue);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    async _computeWidgetState(methodName, params) {
+        if (methodName === 'showOnMobile') {
+            const classList = [...this.$target[0].classList];
+            return classList.includes('d-none') &&
+                classList.some(className => className.startsWith('d-md-')) ? '' : 'true';
+        }
+        return await this._super(...arguments);
+    },
+});
+
+/**
  * Hide/show footer in the current page.
  */
 options.registry.HideFooter = VisibilityPageOptionUpdate.extend({
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 9a8035325ae..241933b6324 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -482,9 +482,9 @@
     </div>
 
     <!-- Mobile display options -->
-    <div data-option-name="showMobile" data-selector="section .row > div"
+    <div data-js="MobileVisibility" data-option-name="showMobile" data-selector="section .row > div"
          data-exclude=".s_col_no_resize.row > div">
-        <we-checkbox string="Shown On Mobile" data-select-class="d-none d-md-block|" data-no-preview="true"/>
+        <we-checkbox string="Shown On Mobile" data-show-on-mobile="true" data-no-preview="true"/>
     </div>
 
     <div data-js="sizing_y"