[IMP] web_editor, website: introduce foldable zones in the editor UI

Now any set of widgets and rows can be placed in a we-collapse element
so that those elements can be foldable. The first element inside (or
the mentioned "string" on the we-collapse element itself) is used as the
always shown element (with a toggler on its left to toggle the
visibility of the other items).

we-collapse inside other we-collapse is supported as well.

Limitations / Other infos:

- The use of '⌙' and   characters is not automatic (yet?).
  Sometimes it actually make sense to use them without a we-collapse or
  to not use them in a we-collapse.

- The use of we-collapse is limited to widgets inside the same option.
  So unfortunately, there is no current way to add all bg image options
  in a folable section as those contain many different options. Maybe
  in the future.

Part of https://github.com/odoo/odoo/pull/56350

closes odoo/odoo#56350

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

8 files changed, 380 insertions, 412 deletions

diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 7edee505ea1..23fe6ff1bfd 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -114,6 +114,41 @@ function _buildRowElement(title, options) {
     return groupEl;
 }
 /**
+ * Build the correct DOM for a we-collapse element.
+ *
+ * @param {string} [title] - @see _buildElement
+ * @param {Object} [options] - @see _buildElement
+ * @param {HTMLElement[]} [options.childNodes]
+ * @returns {HTMLElement}
+ */
+function _buildCollapseElement(title, options) {
+    const groupEl = _buildElement('we-collapse', title, options);
+    const titleEl = groupEl.querySelector('we-title');
+
+    const children = options && options.childNodes || [];
+    if (titleEl) {
+        titleEl.remove();
+        children.unshift(titleEl);
+    }
+    let i = 0;
+    for (i = 0; i < children.length; i++) {
+        groupEl.appendChild(children[i]);
+        if (children[i].nodeType === Node.ELEMENT_NODE) {
+            break;
+        }
+    }
+
+    const togglerEl = document.createElement('we-toggler');
+    togglerEl.classList.add('o_we_collapse_toggler');
+    groupEl.appendChild(togglerEl);
+
+    const containerEl = document.createElement('div');
+    children.slice(i + 1).forEach(node => containerEl.appendChild(node));
+    groupEl.appendChild(containerEl);
+
+    return groupEl;
+}
+/**
  * Creates a proxy for an object where one property is replaced by a different
  * value. This value is captured in the closure and can be read and written to.
  *
@@ -1729,6 +1764,9 @@ const userValueWidgetsRegistry = {
  */
 const SnippetOptionWidget = Widget.extend({
     tagName: 'we-customizeblock-option',
+    events: {
+        'click .o_we_collapse_toggler': '_onCollapseTogglerClick',
+    },
     custom_events: {
         'user_value_update': '_onUserValueUpdate',
         'user_value_widget_critical': '_onUserValueWidgetCritical',
@@ -2190,11 +2228,20 @@ const SnippetOptionWidget = Widget.extend({
 
         await Promise.all(proms);
 
-        // Hide rows which contains only hidden widgets
-        for (const rowEl of this.$el.find('we-row')) {
-            // TODO improve this, this is hackish to rely on DOM structure
-            // here. Rows should be handled as widgets or something like that.
-            rowEl.classList.toggle('d-none', $(rowEl).find('> div > .o_we_user_value_widget:not(.d-none)').length === 0);
+        // Hide layouting elements which contains only hidden widgets
+        // TODO improve this, this is hackish to rely on DOM structure here.
+        // Layouting elements should be handled as widgets or other.
+        for (const el of this.$el.find('we-row')) {
+            el.classList.toggle('d-none', !$(el).find('> div > .o_we_user_value_widget').not('.d-none').length);
+        }
+        for (const el of this.$el.find('we-collapse')) {
+            const $el = $(el);
+            el.classList.toggle('d-none', $el.children().first().hasClass('d-none'));
+            const hasNoVisibleElInCollapseMenu = !$el.children().last().children().not('.d-none').length;
+            if (hasNoVisibleElInCollapseMenu) {
+                this._toggleCollapseEl(el, false);
+            }
+            el.querySelector('.o_we_collapse_toggler').classList.toggle('d-none', hasNoVisibleElInCollapseMenu);
         }
     },
 
@@ -2399,12 +2446,14 @@ const SnippetOptionWidget = Widget.extend({
         await this._renderCustomXML(uiFragment);
 
         // Build layouting components first
-        uiFragment.querySelectorAll('we-row').forEach(el => {
-            const infos = this._extraInfoFromDescriptionElement(el);
-            const groupEl = _buildRowElement(infos.title, infos.options);
-            el.parentNode.insertBefore(groupEl, el);
-            el.parentNode.removeChild(el);
-        });
+        for (const [itemName, build] of [['we-row', _buildRowElement], ['we-collapse', _buildCollapseElement]]) {
+            uiFragment.querySelectorAll(itemName).forEach(el => {
+                const infos = this._extraInfoFromDescriptionElement(el);
+                const groupEl = build(infos.title, infos.options);
+                el.parentNode.insertBefore(groupEl, el);
+                el.parentNode.removeChild(el);
+            });
+        }
 
         // Load widgets
         await this._renderXMLWidgets(uiFragment);
@@ -2553,12 +2602,32 @@ const SnippetOptionWidget = Widget.extend({
         }
         return value;
     },
+    /**
+     * @private
+     * @param {HTMLElement} collapseEl
+     * @param {boolean|undefined} [show]
+     */
+    _toggleCollapseEl(collapseEl, show) {
+        collapseEl.classList.toggle('active', show);
+        collapseEl.querySelector('.o_we_collapse_toggler').classList.toggle('active', show);
+    },
 
     //--------------------------------------------------------------------------
     // Handlers
     //--------------------------------------------------------------------------
 
     /**
+     * @private
+     * @param {Event} ev
+     */
+    _onCollapseTogglerClick(ev) {
+        const currentCollapseEl = ev.currentTarget.parentNode;
+        this._toggleCollapseEl(currentCollapseEl);
+        for (const collapseEl of currentCollapseEl.querySelectorAll('we-collapse')) {
+            this._toggleCollapseEl(collapseEl, false);
+        }
+    },
+    /**
      * Called when a widget notifies a preview/change/reset.
      *
      * @private
@@ -4438,6 +4507,7 @@ return {
     buildElement: _buildElement,
     buildTitleElement: _buildTitleElement,
     buildRowElement: _buildRowElement,
+    buildCollapseElement: _buildCollapseElement,
 
     // Other names for convenience
     Class: SnippetOptionWidget,
diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss
index ca8f9e6a080..add424313c0 100644
--- a/addons/web_editor/static/src/scss/web_editor.variables.scss
+++ b/addons/web_editor/static/src/scss/web_editor.variables.scss
@@ -117,8 +117,7 @@ $o-we-sidebar-content-main-title-font-size: 13px !default;
 
 $o-we-sidebar-content-block-spacing: 10px !default;
 
-$o-we-sidebar-content-fold-block-bg: $o-we-bg-dark !default;
-$o-we-sidebar-content-fold-block-inner-spacing: $o-we-sidebar-content-block-spacing !default;
+$o-we-sidebar-content-fold-block-bg: $o-we-bg-light !default;
 
 $o-we-sidebar-content-field-spacing: $o-we-item-spacing !default;
 $o-we-sidebar-content-field-color: $o-we-fg-darker !default;
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 01963484889..5419eb8a133 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -427,14 +427,13 @@ body.editor_enable.editor_has_snippets {
         we-customizeblock-options {
             position: relative;
             display: block;
-            padding: 0 $o-we-sidebar-content-padding-base $o-we-sidebar-content-block-spacing * 1.5 $o-we-sidebar-content-indent;
+            padding: 0 0 ($o-we-sidebar-content-block-spacing * 1.5) 0;
             background-color: $o-we-bg-lighter;
             box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, 0.8);
 
             > we-title {
                 display: flex;
                 align-items: center;
-                margin: 0 (-$o-we-sidebar-content-padding-base) 0 (-$o-we-sidebar-content-indent);
                 padding: $o-we-sidebar-content-block-spacing * .3 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
                 background-color: $o-we-bg-light;
                 box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2), $o-we-item-standup-bottom rgba($o-we-item-standup-color-dark, .5);
@@ -454,7 +453,9 @@ body.editor_enable.editor_has_snippets {
                     .oe_snippet_remove {
                         font-size: 1.2em;
                     }
-
+                    we-customizeblock-option {
+                        padding: 0;
+                    }
                     we-button {
                         margin-left: $o-we-sidebar-content-field-multi-spacing;
                         padding: 0 $o-we-sidebar-content-field-multi-spacing;
@@ -470,6 +471,7 @@ body.editor_enable.editor_has_snippets {
         we-customizeblock-option {
             position: relative;
             display: block;
+            padding: 0 $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
 
             .dropdown-menu {
                 // FIXME temporary fix for m2o option for example
@@ -1063,6 +1065,56 @@ body.editor_enable.editor_has_snippets {
             }
         }
 
+        we-collapse {
+            position: relative;
+            display: block;
+            padding-left: $o-we-sidebar-content-indent;
+            padding-right: $o-we-sidebar-content-padding-base;
+            margin-right: -$o-we-sidebar-content-padding-base;
+            margin-left: -$o-we-sidebar-content-indent;
+            // Allow inner margin to be considered inside the block + Visual space after/before previous/next widget + No flickering on opening
+            $-inner-spacing: ceil($o-we-sidebar-content-field-spacing / 2);
+            border-top: ($o-we-sidebar-content-field-spacing - $-inner-spacing) solid transparent;
+            padding-bottom: ($o-we-sidebar-content-field-spacing - $-inner-spacing);
+            margin-bottom: -($o-we-sidebar-content-field-spacing - $-inner-spacing);
+            background-clip: padding-box;
+
+            > :first-child, .o_we_collapse_toggler {
+                margin-top: $-inner-spacing;
+            }
+            .o_we_collapse_toggler {
+                @include o-position-absolute($top: 0, $left: 0);
+                width: $o-we-sidebar-content-indent;
+                height: $o-we-sidebar-content-field-height;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 0;
+                background: none;
+                border: none;
+
+                &::after {
+                    content: '\f0da';
+                    position: static;
+                    transform: none;
+                }
+                &.active {
+
+                    &::after {
+                        content: '\f0d7';
+                    }
+                    + * {
+                        background: none;
+                        border: none;
+                        box-shadow: none;
+                    }
+                }
+            }
+            &.active {
+                background-color: $o-we-sidebar-content-fold-block-bg;
+            }
+        }
+
         .o_we_image_weight {
             display: flex;
             justify-content: flex-end;
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index e4233034308..cc3986d2417 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -45,76 +45,80 @@
         </we-title>
     </div>
 
-    <t t-set="filter_label">Filter</t>
-    <we-select t-att-string="indent and (' ⌙ %s' % filter_label) or filter_label">
-        <we-button data-gl-filter="">None</we-button>
-        <we-button data-gl-filter="blur">Blur</we-button>
-        <we-button data-gl-filter="1977">1977</we-button>
-        <we-button data-gl-filter="aden">Aden</we-button>
-        <we-button data-gl-filter="brannan">Brannan</we-button>
-        <we-button data-gl-filter="earlybird">EarlyBird</we-button>
-        <we-button data-gl-filter="inkwell">Inkwell</we-button>
-        <we-button data-gl-filter="maven">Maven</we-button>
-        <we-button data-gl-filter="toaster">Toaster</we-button>
-        <we-button data-gl-filter="walden">Walden</we-button>
-        <we-button data-gl-filter="valencia">Valencia</we-button>
-        <we-button data-gl-filter="xpro">Xpro</we-button>
-        <we-button data-gl-filter="custom" data-name="custom_glfilter_opt">Custom</we-button>
-    </we-select>
-    <t t-set="color_label">Color</t>
-    <t t-set="saturation_label">Saturation</t>
-    <t t-set="contrast_label">Contrast</t>
-    <t t-set="brightness_label">Brightness</t>
-    <t t-set="sepia_label">Sepia</t>
-    <t t-set="blur_label">Blur</t>
-    <we-row t-att-string="indent and ('  ⌙ %s' % color_label) or ('⌙ %s' % color_label)">
-        <we-select data-filter-property="blend" data-dependencies="custom_glfilter_opt">
-            <we-button data-custom-filter="normal">Normal</we-button>
-            <we-button data-custom-filter="overlay">overlay</we-button>
-            <we-button data-custom-filter="screen">screen</we-button>
-            <we-button data-custom-filter="multiply">multiply</we-button>
-            <we-button data-custom-filter="lighter">add</we-button>
-            <we-button data-custom-filter="exclusion">exclusion</we-button>
-            <we-button data-custom-filter="darken">darken</we-button>
-            <we-button data-custom-filter="lighten">lighten</we-button>
+    <we-collapse>
+        <t t-set="filter_label">Filter</t>
+        <we-select t-att-string="indent and (' ⌙ %s' % filter_label) or filter_label">
+            <we-button data-gl-filter="">None</we-button>
+            <we-button data-gl-filter="blur">Blur</we-button>
+            <we-button data-gl-filter="1977">1977</we-button>
+            <we-button data-gl-filter="aden">Aden</we-button>
+            <we-button data-gl-filter="brannan">Brannan</we-button>
+            <we-button data-gl-filter="earlybird">EarlyBird</we-button>
+            <we-button data-gl-filter="inkwell">Inkwell</we-button>
+            <we-button data-gl-filter="maven">Maven</we-button>
+            <we-button data-gl-filter="toaster">Toaster</we-button>
+            <we-button data-gl-filter="walden">Walden</we-button>
+            <we-button data-gl-filter="valencia">Valencia</we-button>
+            <we-button data-gl-filter="xpro">Xpro</we-button>
+            <we-button data-gl-filter="custom" data-name="custom_glfilter_opt">Custom</we-button>
         </we-select>
-        <we-colorpicker data-dependencies="custom_glfilter_opt" data-custom-filter="" data-filter-property="filterColor" data-excluded="common, theme"/>
-    </we-row>
-    <we-range t-att-string="indent and ('  ⌙ %s' % saturation_label) or ('⌙ %s' % saturation_label)"
-              data-dependencies="custom_glfilter_opt"
-              data-custom-filter=""
-              data-filter-property="saturation"
-              data-min="-100"
-              data-step="10"/>
-    <we-range t-att-string="indent and ('  ⌙ %s' % contrast_label) or ('⌙ %s' % contrast_label)"
-              data-dependencies="custom_glfilter_opt"
-              data-custom-filter=""
-              data-filter-property="contrast"
-              data-min="-100"
-              data-step="10"/>
-    <we-range t-att-string="indent and ('  ⌙ %s' % brightness_label) or ('⌙ %s' % brightness_label)"
-              data-dependencies="custom_glfilter_opt"
-              data-custom-filter=""
-              data-filter-property="brightness"
-              data-min="-100"
-              data-step="10"/>
-    <we-range t-att-string="indent and ('  ⌙ %s' % sepia_label) or ('⌙ %s' % sepia_label)"
-              data-dependencies="custom_glfilter_opt"
-              data-custom-filter=""
-              data-filter-property="sepia"
-              data-step="5"/>
-    <we-range t-att-string="indent and ('  ⌙ %s' % blur_label) or ('⌙ %s' % blur_label)"
-              data-dependencies="custom_glfilter_opt"
-              data-custom-filter=""
-              data-filter-property="blur"
-              data-max="2000"
-              data-step="100"/>
+        <t t-set="color_label">Color</t>
+        <t t-set="saturation_label">Saturation</t>
+        <t t-set="contrast_label">Contrast</t>
+        <t t-set="brightness_label">Brightness</t>
+        <t t-set="sepia_label">Sepia</t>
+        <t t-set="blur_label">Blur</t>
+        <we-row t-att-string="indent and ('  ⌙ %s' % color_label) or ('⌙ %s' % color_label)">
+            <we-select data-filter-property="blend" data-dependencies="custom_glfilter_opt">
+                <we-button data-custom-filter="normal">Normal</we-button>
+                <we-button data-custom-filter="overlay">overlay</we-button>
+                <we-button data-custom-filter="screen">screen</we-button>
+                <we-button data-custom-filter="multiply">multiply</we-button>
+                <we-button data-custom-filter="lighter">add</we-button>
+                <we-button data-custom-filter="exclusion">exclusion</we-button>
+                <we-button data-custom-filter="darken">darken</we-button>
+                <we-button data-custom-filter="lighten">lighten</we-button>
+            </we-select>
+            <we-colorpicker data-dependencies="custom_glfilter_opt" data-custom-filter="" data-filter-property="filterColor" data-excluded="common, theme"/>
+        </we-row>
+        <we-range t-att-string="indent and ('  ⌙ %s' % saturation_label) or ('⌙ %s' % saturation_label)"
+                data-dependencies="custom_glfilter_opt"
+                data-custom-filter=""
+                data-filter-property="saturation"
+                data-min="-100"
+                data-step="10"/>
+        <we-range t-att-string="indent and ('  ⌙ %s' % contrast_label) or ('⌙ %s' % contrast_label)"
+                data-dependencies="custom_glfilter_opt"
+                data-custom-filter=""
+                data-filter-property="contrast"
+                data-min="-100"
+                data-step="10"/>
+        <we-range t-att-string="indent and ('  ⌙ %s' % brightness_label) or ('⌙ %s' % brightness_label)"
+                data-dependencies="custom_glfilter_opt"
+                data-custom-filter=""
+                data-filter-property="brightness"
+                data-min="-100"
+                data-step="10"/>
+        <we-range t-att-string="indent and ('  ⌙ %s' % sepia_label) or ('⌙ %s' % sepia_label)"
+                data-dependencies="custom_glfilter_opt"
+                data-custom-filter=""
+                data-filter-property="sepia"
+                data-step="5"/>
+        <we-range t-att-string="indent and ('  ⌙ %s' % blur_label) or ('⌙ %s' % blur_label)"
+                data-dependencies="custom_glfilter_opt"
+                data-custom-filter=""
+                data-filter-property="blur"
+                data-max="2000"
+                data-step="100"/>
+    </we-collapse>
 
-    <t t-set="width_label">Width</t>
-    <we-select t-att-string="indent and (' ⌙ %s' % width_label) or width_label" data-name="width_select_opt"/>
+    <we-collapse>
+        <t t-set="width_label">Width</t>
+        <we-select t-att-string="indent and (' ⌙ %s' % width_label) or width_label" data-name="width_select_opt"/>
 
-    <t t-set="quality_label">Quality</t>
-    <we-range t-att-string="indent and (' ⌙ %s' % quality_label) or quality_label" data-set-quality=""/>
+        <t t-set="quality_label">Quality</t>
+        <we-range t-att-string="indent and (' ⌙ %s' % quality_label) or quality_label" data-set-quality=""/>
+    </we-collapse>
 
     <div class="o_we_image_weight d-none"><small/><b/></div>
 </template>
@@ -176,20 +180,22 @@
              t-att-data-selector="selector"
              t-att-data-exclude="exclude"
              t-att-data-target="target">
-            <we-row string=" ⌙ Position"><!-- &emsp; -->
-                <we-select data-no-preview="true">
-                    <we-button data-background-type="cover">Cover</we-button>
-                    <we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
-                </we-select>
-                <we-button title="Background Position" data-background-position-overlay="true" data-no-preview="true">
-                    <i class="fa fa-fw fa-crosshairs"/>
-                </we-button>
-            </we-row>
-            <we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
-                <!-- &emsp; -->
-                <we-input string="  ⌙ Width" data-select-style="auto" placeholder="auto" data-unit="px"/>
-                <we-input string="  ⌙ Height" data-select-style="auto" placeholder="auto" data-unit="px"/>
-            </we-multi>
+            <we-collapse>
+                <we-row string=" ⌙ Position"><!-- &emsp; -->
+                    <we-select data-no-preview="true">
+                        <we-button data-background-type="cover">Cover</we-button>
+                        <we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
+                    </we-select>
+                    <we-button title="Background Position" data-background-position-overlay="true" data-no-preview="true">
+                        <i class="fa fa-fw fa-crosshairs"/>
+                    </we-button>
+                </we-row>
+                <we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
+                    <!-- &emsp; -->
+                    <we-input string="  ⌙ Width" data-select-style="auto" placeholder="auto" data-unit="px"/>
+                    <we-input string="  ⌙ Height" data-select-style="auto" placeholder="auto" data-unit="px"/>
+                </we-multi>
+            </we-collapse>
         </div>
 
         <div data-js="BackgroundOptimize"
@@ -216,125 +222,127 @@
              t-att-data-selector="selector"
              t-att-data-exclude="exclude"
              t-att-data-target="target">
-            <we-select-pager class="o_we_shape_menu" string="⌙ Shape" data-dependencies="!shape_none_opt" data-name="bg_shape_opt">
-                <!-- Invisible None button to be used for select's placeholder text -->
-                <we-button data-shape="" data-name="shape_none_opt"/>
-                <we-select-page>
-                    <we-button data-shape="web_editor/Airy/01" data-select-label="Airy 01"/>
-                    <we-button data-shape="web_editor/Airy/02" data-select-label="Airy 02"/>
-                    <we-button data-shape="web_editor/Airy/03" data-select-label="Airy 03"/>
-                    <we-button data-shape="web_editor/Airy/04" data-select-label="Airy 04"/>
-                    <we-button data-shape="web_editor/Airy/05" data-select-label="Airy 05"/>
-                    <we-button data-shape="web_editor/Airy/06" data-select-label="Airy 06"/>
-                    <we-button data-shape="web_editor/Airy/07" data-select-label="Airy 07"/>
-                    <we-button data-shape="web_editor/Airy/08" data-select-label="Airy 08"/>
-                    <we-button data-shape="web_editor/Airy/09" data-select-label="Airy 09"/>
-                    <we-button data-shape="web_editor/Airy/10" data-select-label="Airy 10"/>
-                    <we-button data-shape="web_editor/Airy/11" data-select-label="Airy 11"/>
-                    <we-button data-shape="web_editor/Airy/12" data-select-label="Airy 12"/>
-                    <we-button data-shape="web_editor/Airy/13" data-select-label="Airy 13"/>
-                    <we-button data-shape="web_editor/Airy/14" data-select-label="Airy 14"/>
-                </we-select-page>
-                <we-select-page>
-                    <we-button data-shape="web_editor/Blobs/01" data-select-label="Blobs 01"/>
-                    <we-button data-shape="web_editor/Blobs/02" data-select-label="Blobs 02"/>
-                    <we-button data-shape="web_editor/Blobs/03" data-select-label="Blobs 03"/>
-                    <we-button data-shape="web_editor/Blobs/04" data-select-label="Blobs 04"/>
-                    <we-button data-shape="web_editor/Blobs/05" data-select-label="Blobs 05"/>
-                    <we-button data-shape="web_editor/Blobs/06" data-select-label="Blobs 06"/>
-                    <we-button data-shape="web_editor/Blobs/07" data-select-label="Blobs 07"/>
-                    <we-button data-shape="web_editor/Blobs/08" data-select-label="Blobs 08"/>
-                    <we-button data-shape="web_editor/Blobs/09" data-select-label="Blobs 09"/>
-                    <we-button data-shape="web_editor/Blobs/10" data-select-label="Blobs 10"/>
-                    <we-button data-shape="web_editor/Blobs/11" data-select-label="Blobs 11"/>
-                    <we-button data-shape="web_editor/Blobs/12" data-select-label="Blobs 12"/>
-                </we-select-page>
-                <we-select-page>
-                    <we-button data-shape="web_editor/Blocks/01" data-select-label="Blocks 01"/>
-                    <we-button data-shape="web_editor/Blocks/02" data-select-label="Blocks 02"/>
-                    <we-button data-shape="web_editor/Blocks/03" data-select-label="Blocks 03"/>
-                    <we-button data-shape="web_editor/Blocks/04" data-select-label="Blocks 04"/>
-                </we-select-page>
-                <we-select-page>
-                    <we-button data-shape="web_editor/Bold/01" data-select-label="Bold 01"/>
-                    <we-button data-shape="web_editor/Bold/02" data-select-label="Bold 02"/>
-                    <we-button data-shape="web_editor/Bold/03" data-select-label="Bold 03"/>
-                    <we-button data-shape="web_editor/Bold/04" data-select-label="Bold 04"/>
-                    <we-button data-shape="web_editor/Bold/05" data-select-label="Bold 05"/>
-                    <we-button data-shape="web_editor/Bold/06" data-select-label="Bold 06"/>
-                    <we-button data-shape="web_editor/Bold/07" data-select-label="Bold 07"/>
-                    <we-button data-shape="web_editor/Bold/08" data-select-label="Bold 08"/>
-                    <we-button data-shape="web_editor/Bold/09" data-select-label="Bold 09"/>
-                    <we-button data-shape="web_editor/Bold/10" data-select-label="Bold 10"/>
-                    <we-button data-shape="web_editor/Bold/11" data-select-label="Bold 11"/>
-                    <we-button data-shape="web_editor/Bold/12" data-select-label="Bold 12"/>
-                </we-select-page>
-                <we-select-page>
-                    <we-button data-shape="web_editor/Origins/01" data-select-label="Origins 01"/>
-                    <we-button data-shape="web_editor/Origins/02" data-select-label="Origins 02"/>
-                    <we-button data-shape="web_editor/Origins/03" data-select-label="Origins 03"/>
-                    <we-button data-shape="web_editor/Origins/04" data-select-label="Origins 04"/>
-                    <we-button data-shape="web_editor/Origins/05" data-select-label="Origins 05"/>
-                    <we-button data-shape="web_editor/Origins/06" data-select-label="Origins 06"/>
-                    <we-button data-shape="web_editor/Origins/07" data-select-label="Origins 07"/>
-                    <we-button data-shape="web_editor/Origins/08" data-select-label="Origins 08"/>
-                    <we-button data-shape="web_editor/Origins/09" data-select-label="Origins 09"/>
-                    <we-button data-shape="web_editor/Origins/10" data-select-label="Origins 10"/>
-                    <we-button data-shape="web_editor/Origins/11" data-select-label="Origins 11"/>
-                    <we-button data-shape="web_editor/Origins/12" data-select-label="Origins 12"/>
-                    <we-button data-shape="web_editor/Origins/13" data-select-label="Origins 13"/>
-                    <we-button data-shape="web_editor/Origins/14" data-select-label="Origins 14"/>
-                    <we-button data-shape="web_editor/Origins/15" data-select-label="Origins 15"/>
-                </we-select-page>
-                <we-select-page>
-                    <we-button data-shape="web_editor/Rainy/01" data-select-label="Rainy 01"/>
-                    <we-button data-shape="web_editor/Rainy/02" data-select-label="Rainy 02"/>
-                    <we-button data-shape="web_editor/Rainy/03" data-select-label="Rainy 03"/>
-                    <we-button data-shape="web_editor/Rainy/04" data-select-label="Rainy 04"/>
-                    <we-button data-shape="web_editor/Rainy/05" data-select-label="Rainy 05"/>
-                    <we-button data-shape="web_editor/Rainy/06" data-select-label="Rainy 06"/>
-                    <we-button data-shape="web_editor/Rainy/07" data-select-label="Rainy 07"/>
-                    <we-button data-shape="web_editor/Rainy/08" data-select-label="Rainy 08"/>
-                    <we-button data-shape="web_editor/Rainy/09" data-select-label="Rainy 09"/>
-                </we-select-page>
-                <we-select-page>
-                    <we-button data-shape="web_editor/Wavy/01" data-select-label="Wavy 01"/>
-                    <we-button data-shape="web_editor/Wavy/02" data-select-label="Wavy 02"/>
-                    <we-button data-shape="web_editor/Wavy/03" data-select-label="Wavy 03"/>
-                    <we-button data-shape="web_editor/Wavy/04" data-select-label="Wavy 04"/>
-                    <we-button data-shape="web_editor/Wavy/05" data-select-label="Wavy 05"/>
-                    <we-button data-shape="web_editor/Wavy/06" data-select-label="Wavy 06"/>
-                    <we-button data-shape="web_editor/Wavy/07" data-select-label="Wavy 07"/>
-                    <we-button data-shape="web_editor/Wavy/08" data-select-label="Wavy 08"/>
-                    <we-button data-shape="web_editor/Wavy/09" data-select-label="Wavy 09"/>
-                    <we-button data-shape="web_editor/Wavy/10" data-select-label="Wavy 10"/>
-                    <we-button data-shape="web_editor/Wavy/11" data-select-label="Wavy 11"/>
-                    <we-button data-shape="web_editor/Wavy/12" data-select-label="Wavy 12"/>
-                    <we-button data-shape="web_editor/Wavy/13" data-select-label="Wavy 13"/>
-                    <we-button data-shape="web_editor/Wavy/14" data-select-label="Wavy 14"/>
-                    <we-button data-shape="web_editor/Wavy/15" data-select-label="Wavy 15"/>
-                    <we-button data-shape="web_editor/Wavy/16" data-select-label="Wavy 16"/>
-                    <we-button data-shape="web_editor/Wavy/17" data-select-label="Wavy 17"/>
-                    <we-button data-shape="web_editor/Wavy/18" data-select-label="Wavy 18"/>
-                    <we-button data-shape="web_editor/Wavy/19" data-select-label="Wavy 19"/>
-                    <we-button data-shape="web_editor/Wavy/20" data-select-label="Wavy 20"/>
-                    <we-button data-shape="web_editor/Wavy/21" data-select-label="Wavy 21"/>
-                    <we-button data-shape="web_editor/Wavy/22" data-select-label="Wavy 22"/>
-                    <we-button data-shape="web_editor/Wavy/23" data-select-label="Wavy 23"/>
-                </we-select-page>
-                <we-select-page>
-                    <we-button data-shape="web_editor/Zigs/01" data-select-label="Zigs 01"/>
-                    <we-button data-shape="web_editor/Zigs/02" data-select-label="Zigs 02"/>
-                    <we-button data-shape="web_editor/Zigs/03" data-select-label="Zigs 03"/>
-                    <we-button data-shape="web_editor/Zigs/04" data-select-label="Zigs 04"/>
-                    <we-button data-shape="web_editor/Zigs/05" data-select-label="Zigs 05"/>
-                </we-select-page>
-            </we-select-pager>
-            <we-row string=" ⌙ Flip"><!-- &emsp; -->
-                <we-button data-flip-x="true" data-no-preview="true" data-dependencies="!shape_none_opt"><i class="fa fa-fw fa-arrows-h"/></we-button>
-                <we-button data-flip-y="true" data-no-preview="true" data-dependencies="!shape_none_opt"><i class="fa fa-fw fa-arrows-v"/></we-button>
-            </we-row>
-            <we-row string=" ⌙ Colors" data-name="colors"/>
+            <we-collapse>
+                <we-select-pager class="o_we_shape_menu" string="⌙ Shape" data-dependencies="!shape_none_opt" data-name="bg_shape_opt">
+                    <!-- Invisible None button to be used for select's placeholder text -->
+                    <we-button data-shape="" data-name="shape_none_opt"/>
+                    <we-select-page>
+                        <we-button data-shape="web_editor/Airy/01" data-select-label="Airy 01"/>
+                        <we-button data-shape="web_editor/Airy/02" data-select-label="Airy 02"/>
+                        <we-button data-shape="web_editor/Airy/03" data-select-label="Airy 03"/>
+                        <we-button data-shape="web_editor/Airy/04" data-select-label="Airy 04"/>
+                        <we-button data-shape="web_editor/Airy/05" data-select-label="Airy 05"/>
+                        <we-button data-shape="web_editor/Airy/06" data-select-label="Airy 06"/>
+                        <we-button data-shape="web_editor/Airy/07" data-select-label="Airy 07"/>
+                        <we-button data-shape="web_editor/Airy/08" data-select-label="Airy 08"/>
+                        <we-button data-shape="web_editor/Airy/09" data-select-label="Airy 09"/>
+                        <we-button data-shape="web_editor/Airy/10" data-select-label="Airy 10"/>
+                        <we-button data-shape="web_editor/Airy/11" data-select-label="Airy 11"/>
+                        <we-button data-shape="web_editor/Airy/12" data-select-label="Airy 12"/>
+                        <we-button data-shape="web_editor/Airy/13" data-select-label="Airy 13"/>
+                        <we-button data-shape="web_editor/Airy/14" data-select-label="Airy 14"/>
+                    </we-select-page>
+                    <we-select-page>
+                        <we-button data-shape="web_editor/Blobs/01" data-select-label="Blobs 01"/>
+                        <we-button data-shape="web_editor/Blobs/02" data-select-label="Blobs 02"/>
+                        <we-button data-shape="web_editor/Blobs/03" data-select-label="Blobs 03"/>
+                        <we-button data-shape="web_editor/Blobs/04" data-select-label="Blobs 04"/>
+                        <we-button data-shape="web_editor/Blobs/05" data-select-label="Blobs 05"/>
+                        <we-button data-shape="web_editor/Blobs/06" data-select-label="Blobs 06"/>
+                        <we-button data-shape="web_editor/Blobs/07" data-select-label="Blobs 07"/>
+                        <we-button data-shape="web_editor/Blobs/08" data-select-label="Blobs 08"/>
+                        <we-button data-shape="web_editor/Blobs/09" data-select-label="Blobs 09"/>
+                        <we-button data-shape="web_editor/Blobs/10" data-select-label="Blobs 10"/>
+                        <we-button data-shape="web_editor/Blobs/11" data-select-label="Blobs 11"/>
+                        <we-button data-shape="web_editor/Blobs/12" data-select-label="Blobs 12"/>
+                    </we-select-page>
+                    <we-select-page>
+                        <we-button data-shape="web_editor/Blocks/01" data-select-label="Blocks 01"/>
+                        <we-button data-shape="web_editor/Blocks/02" data-select-label="Blocks 02"/>
+                        <we-button data-shape="web_editor/Blocks/03" data-select-label="Blocks 03"/>
+                        <we-button data-shape="web_editor/Blocks/04" data-select-label="Blocks 04"/>
+                    </we-select-page>
+                    <we-select-page>
+                        <we-button data-shape="web_editor/Bold/01" data-select-label="Bold 01"/>
+                        <we-button data-shape="web_editor/Bold/02" data-select-label="Bold 02"/>
+                        <we-button data-shape="web_editor/Bold/03" data-select-label="Bold 03"/>
+                        <we-button data-shape="web_editor/Bold/04" data-select-label="Bold 04"/>
+                        <we-button data-shape="web_editor/Bold/05" data-select-label="Bold 05"/>
+                        <we-button data-shape="web_editor/Bold/06" data-select-label="Bold 06"/>
+                        <we-button data-shape="web_editor/Bold/07" data-select-label="Bold 07"/>
+                        <we-button data-shape="web_editor/Bold/08" data-select-label="Bold 08"/>
+                        <we-button data-shape="web_editor/Bold/09" data-select-label="Bold 09"/>
+                        <we-button data-shape="web_editor/Bold/10" data-select-label="Bold 10"/>
+                        <we-button data-shape="web_editor/Bold/11" data-select-label="Bold 11"/>
+                        <we-button data-shape="web_editor/Bold/12" data-select-label="Bold 12"/>
+                    </we-select-page>
+                    <we-select-page>
+                        <we-button data-shape="web_editor/Origins/01" data-select-label="Origins 01"/>
+                        <we-button data-shape="web_editor/Origins/02" data-select-label="Origins 02"/>
+                        <we-button data-shape="web_editor/Origins/03" data-select-label="Origins 03"/>
+                        <we-button data-shape="web_editor/Origins/04" data-select-label="Origins 04"/>
+                        <we-button data-shape="web_editor/Origins/05" data-select-label="Origins 05"/>
+                        <we-button data-shape="web_editor/Origins/06" data-select-label="Origins 06"/>
+                        <we-button data-shape="web_editor/Origins/07" data-select-label="Origins 07"/>
+                        <we-button data-shape="web_editor/Origins/08" data-select-label="Origins 08"/>
+                        <we-button data-shape="web_editor/Origins/09" data-select-label="Origins 09"/>
+                        <we-button data-shape="web_editor/Origins/10" data-select-label="Origins 10"/>
+                        <we-button data-shape="web_editor/Origins/11" data-select-label="Origins 11"/>
+                        <we-button data-shape="web_editor/Origins/12" data-select-label="Origins 12"/>
+                        <we-button data-shape="web_editor/Origins/13" data-select-label="Origins 13"/>
+                        <we-button data-shape="web_editor/Origins/14" data-select-label="Origins 14"/>
+                        <we-button data-shape="web_editor/Origins/15" data-select-label="Origins 15"/>
+                    </we-select-page>
+                    <we-select-page>
+                        <we-button data-shape="web_editor/Rainy/01" data-select-label="Rainy 01"/>
+                        <we-button data-shape="web_editor/Rainy/02" data-select-label="Rainy 02"/>
+                        <we-button data-shape="web_editor/Rainy/03" data-select-label="Rainy 03"/>
+                        <we-button data-shape="web_editor/Rainy/04" data-select-label="Rainy 04"/>
+                        <we-button data-shape="web_editor/Rainy/05" data-select-label="Rainy 05"/>
+                        <we-button data-shape="web_editor/Rainy/06" data-select-label="Rainy 06"/>
+                        <we-button data-shape="web_editor/Rainy/07" data-select-label="Rainy 07"/>
+                        <we-button data-shape="web_editor/Rainy/08" data-select-label="Rainy 08"/>
+                        <we-button data-shape="web_editor/Rainy/09" data-select-label="Rainy 09"/>
+                    </we-select-page>
+                    <we-select-page>
+                        <we-button data-shape="web_editor/Wavy/01" data-select-label="Wavy 01"/>
+                        <we-button data-shape="web_editor/Wavy/02" data-select-label="Wavy 02"/>
+                        <we-button data-shape="web_editor/Wavy/03" data-select-label="Wavy 03"/>
+                        <we-button data-shape="web_editor/Wavy/04" data-select-label="Wavy 04"/>
+                        <we-button data-shape="web_editor/Wavy/05" data-select-label="Wavy 05"/>
+                        <we-button data-shape="web_editor/Wavy/06" data-select-label="Wavy 06"/>
+                        <we-button data-shape="web_editor/Wavy/07" data-select-label="Wavy 07"/>
+                        <we-button data-shape="web_editor/Wavy/08" data-select-label="Wavy 08"/>
+                        <we-button data-shape="web_editor/Wavy/09" data-select-label="Wavy 09"/>
+                        <we-button data-shape="web_editor/Wavy/10" data-select-label="Wavy 10"/>
+                        <we-button data-shape="web_editor/Wavy/11" data-select-label="Wavy 11"/>
+                        <we-button data-shape="web_editor/Wavy/12" data-select-label="Wavy 12"/>
+                        <we-button data-shape="web_editor/Wavy/13" data-select-label="Wavy 13"/>
+                        <we-button data-shape="web_editor/Wavy/14" data-select-label="Wavy 14"/>
+                        <we-button data-shape="web_editor/Wavy/15" data-select-label="Wavy 15"/>
+                        <we-button data-shape="web_editor/Wavy/16" data-select-label="Wavy 16"/>
+                        <we-button data-shape="web_editor/Wavy/17" data-select-label="Wavy 17"/>
+                        <we-button data-shape="web_editor/Wavy/18" data-select-label="Wavy 18"/>
+                        <we-button data-shape="web_editor/Wavy/19" data-select-label="Wavy 19"/>
+                        <we-button data-shape="web_editor/Wavy/20" data-select-label="Wavy 20"/>
+                        <we-button data-shape="web_editor/Wavy/21" data-select-label="Wavy 21"/>
+                        <we-button data-shape="web_editor/Wavy/22" data-select-label="Wavy 22"/>
+                        <we-button data-shape="web_editor/Wavy/23" data-select-label="Wavy 23"/>
+                    </we-select-page>
+                    <we-select-page>
+                        <we-button data-shape="web_editor/Zigs/01" data-select-label="Zigs 01"/>
+                        <we-button data-shape="web_editor/Zigs/02" data-select-label="Zigs 02"/>
+                        <we-button data-shape="web_editor/Zigs/03" data-select-label="Zigs 03"/>
+                        <we-button data-shape="web_editor/Zigs/04" data-select-label="Zigs 04"/>
+                        <we-button data-shape="web_editor/Zigs/05" data-select-label="Zigs 05"/>
+                    </we-select-page>
+                </we-select-pager>
+                <we-row string=" ⌙ Flip"><!-- &emsp; -->
+                    <we-button data-flip-x="true" data-no-preview="true" data-dependencies="!shape_none_opt"><i class="fa fa-fw fa-arrows-h"/></we-button>
+                    <we-button data-flip-y="true" data-no-preview="true" data-dependencies="!shape_none_opt"><i class="fa fa-fw fa-arrows-v"/></we-button>
+                </we-row>
+                <we-row string=" ⌙ Colors" data-name="colors"/>
+            </we-collapse>
         </div>
     </t>
 </template>
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 94bbd7f5991..548172fd0a1 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -987,20 +987,6 @@ options.registry.OptionsTab = options.Class.extend({
 });
 
 options.registry.ThemeColors = options.registry.OptionsTab.extend({
-    events: Object.assign({}, options.registry.OptionsTab.prototype.events, {
-        'click .o_color_combinations_edition we-toggler': '_onCCTogglerClick',
-        // FIXME investigate why using 'click' does not work *anymore* but those
-        // foldable areas will be made more robust and standard with the new UI.
-        'mouseup .o_cc_subheadings_toggler_icon': '_onCCHeadingsTogglerClick',
-    }),
-
-    /**
-     * @constructor
-     */
-    init() {
-        this._super(...arguments);
-        this._showCCSubHeadings = {};
-    },
     /**
      * @override
      */
@@ -1034,31 +1020,6 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
     /**
      * @override
      */
-    async _computeWidgetVisibility(widgetName, params) {
-        if (params.shUid) {
-            return !!this._showCCSubHeadings[params.shUid];
-        }
-        return this._super(...arguments);
-    },
-    /**
-     * @override
-     */
-    async _renderOriginalXML($xml) {
-        const uiFragment = await this._super(...arguments);
-
-        uiFragment.querySelectorAll('.o_cc_subheadings_toggler').forEach(headingsEl => {
-            const togglerEl = document.createElement('span');
-            togglerEl.classList.add('o_cc_subheadings_toggler_icon', 'o_we_fold_icon', 'fa', 'fa-caret-right');
-            togglerEl.setAttribute('role', 'button');
-            const titleEl = headingsEl.querySelector('we-title');
-            titleEl.insertBefore(togglerEl, titleEl.firstChild);
-        });
-
-        return uiFragment;
-    },
-    /**
-     * @override
-     */
     async _renderCustomXML(uiFragment) {
         const paletteSelectorEl = uiFragment.querySelector('[data-variable="color-palettes-number"]');
         const style = window.getComputedStyle(document.documentElement);
@@ -1077,63 +1038,17 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
             paletteSelectorEl.appendChild(btnEl);
         }
 
-        const ccEl = uiFragment.querySelector('.o_color_combinations_edition');
         for (let i = 1; i <= 5; i++) {
-            const togglerEl = document.createElement('we-toggler');
-            togglerEl.classList.add('pt-0', 'pb-0', 'pl-0');
-            const divEl = document.createElement('div');
+            const collapseEl = document.createElement('we-collapse');
             const ccPreviewEl = $(qweb.render('web_editor.color.combination.preview'))[0];
             ccPreviewEl.classList.add('text-center', `o_cc${i}`);
-            divEl.appendChild(ccPreviewEl);
-            togglerEl.appendChild(divEl);
-            ccEl.appendChild(togglerEl);
-
-            const collapseEl = document.createElement('we-collapse');
-            const editionEl = $(qweb.render('website.color_combination_edition', {number: i}))[0];
-            collapseEl.appendChild(editionEl);
-            ccEl.appendChild(collapseEl);
-        }
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {Event} ev
-     */
-    _onCCTogglerClick(ev) {
-        const ccTogglerEls = this.el.querySelectorAll('.o_color_combinations_edition we-toggler');
-        for (const el of ccTogglerEls) {
-            if (el !== ev.currentTarget) {
-                el.classList.remove('active');
+            collapseEl.appendChild(ccPreviewEl);
+            const editionEls = $(qweb.render('website.color_combination_edition', {number: i}));
+            for (const el of editionEls) {
+                collapseEl.appendChild(el);
             }
+            uiFragment.appendChild(collapseEl);
         }
-        ev.currentTarget.classList.toggle('active');
-    },
-    /**
-     * @private
-     * @param {Event} ev
-     */
-    _onCCHeadingsTogglerClick(ev) {
-        const togglerEl = ev.currentTarget;
-        const collapseEl = togglerEl.closest('we-collapse').querySelector('.o_cc_subheadings_collapse');
-        const show = togglerEl.classList.contains('fa-caret-right');
-        const parentEl = togglerEl.closest('we-select');
-        togglerEl.classList.toggle('fa-caret-right', !show);
-        togglerEl.classList.toggle('fa-caret-down', show);
-        parentEl.classList.toggle('active', show);
-        this._showCCSubHeadings[collapseEl.dataset.uid] = show;
-        // FIXME big hack to rerender the interface (all the foldable code is
-        // a hack currently anyway, it needs to be generic)
-        this.trigger_up('snippet_edition_request', {exec: async () => {
-            return new Promise(resolve => setTimeout(() => {
-                this.trigger_up('snippet_option_update', {
-                    onSuccess: () => resolve(),
-                });
-            }));
-        }});
     },
 });
 
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss
index 862068e506b..d36be483290 100644
--- a/addons/website/static/src/scss/website.wysiwyg.scss
+++ b/addons/website/static/src/scss/website.wysiwyg.scss
@@ -59,10 +59,6 @@
 
 #oe_snippets {
     top: $o-we-sidebar-top-height;
-
-    .o_color_combinations_edition {
-        margin-top: $o-we-sidebar-content-field-spacing;
-    }
 }
 
 .note-statusbar {
@@ -173,88 +169,17 @@ $i: 1;
         min-height: 24px;
     }
 
-    // CC Editor
-    .o_color_combinations_edition {
-        $-cc-base-spacer: 16px;
-        $-cc-r-gap: $o-we-sidebar-content-block-spacing * -1;
-        $-cc-l-gap: ($o-we-sidebar-content-indent * -1) - 1px;
+    // CC Edition
+    .o_we_cc_preview_wrapper {
+        border: 1px solid $o-we-sidebar-content-field-dropdown-border-color;
 
-        we-toggler {
-            margin: ($-cc-base-spacer * .5) 0;
-            border: 0;
-            padding-right: 0;
-            background: none;
-            overflow: visible;
-
-            &:after {
-                top: $-cc-base-spacer * .3;
-                left: $-cc-base-spacer * -.8;
-                transform: rotate(-90deg);
-            }
-            .o_we_cc_preview_wrapper {
-                border: 1px solid $o-we-sidebar-content-field-dropdown-border-color;
-            }
-            &.active {
-                &::after {
-                    transform: rotate(180deg);
-                }
-                &::before, + we-collapse::before {
-                    content: '';
-                    background-color: $o-we-bg-light;
-                }
-                &::before {
-                    @include o-position-absolute($-cc-base-spacer * -0.25, $-cc-r-gap, 0, $-cc-l-gap);
-                    z-index: auto;
-                    transform: none;
-                }
-                + we-collapse {
-                    margin-bottom: $-cc-base-spacer * 1.3;
-                    padding-left: $-cc-base-spacer;
-                    border: none;
-                    background: none;
-
-                    &:before {
-                        @include o-position-absolute(0, $-cc-r-gap, $-cc-base-spacer * -0.5, $-cc-l-gap);
-                        box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-light, 0.2);
-                    }
-                }
-            }
-        }
-        &:last-of-type we-toggler {
-            margin-bottom: 0;
-        }
-        we-collapse {
-            we-select.o_cc_subheadings_toggler, .o_cc_subheadings_collapse {
-                we-title {
-                    position: relative;
-                    overflow: visible;
-                }
-            }
-            .o_cc_subheadings_collapse {
-                margin-bottom: $-cc-base-spacer;
-            }
-            we-select.o_cc_subheadings_toggler.active::before, .o_cc_subheadings_collapse::before {
-                content: '';
-                background-color: $o-we-bg-dark;
-            }
-            we-select.o_cc_subheadings_toggler.active:before {
-                @include o-position-absolute($-cc-base-spacer * -0.25, $-cc-r-gap, $-cc-base-spacer * -0.5, $-cc-l-gap * 2);
-                box-shadow: $o-we-item-standup-top $o-we-item-standup-color-dark;
-            }
-            .o_cc_subheadings_collapse::before {
-                @include o-position-absolute(0, $-cc-r-gap, $-cc-base-spacer * -0.5, $-cc-l-gap * 2);
-                box-shadow: $o-we-item-standup-bottom rgba($o-we-item-standup-color-light, .2);
-            }
+        + .o_we_collapse_toggler {
+            height: 35px; // FIXME hardcoded...
         }
     }
 }
 
 // SNIPPET OPTIONS
-we-collapse {
-    position: relative;
-    padding: 0.3em 0.3em 0.3em 1em;
-}
-
 .o_we_border_preview {
     display: inline-block;
     width: 999px;
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index 6c84406a93f..164786f2398 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -85,27 +85,25 @@
     </t>
 
     <t t-name="website.color_combination_edition">
-        <div>
-            <we-colorpicker string="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-bg"/>
-            <we-colorpicker string="Text" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-text"/>
-            <we-colorpicker string="Headings" class="o_cc_subheadings_toggler" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-headings"/>
-            <we-row string="⌙ Sub-Headings" class="o_cc_subheadings_collapse" t-att-data-uid="number">
-                <we-colorpicker title="Headings 2" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h2" t-att-data-sh-uid="number"/>
-                <we-colorpicker title="Headings 3" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h3" t-att-data-sh-uid="number"/>
-                <we-colorpicker title="Headings 4" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h4" t-att-data-sh-uid="number"/>
-                <we-colorpicker title="Headings 5" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h5" t-att-data-sh-uid="number"/>
-                <we-colorpicker title="Headings 6" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h6" t-att-data-sh-uid="number"/>
-            </we-row>
-            <we-colorpicker string="Links" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-link"/>
-            <we-row string="Main Buttons">
-                <we-colorpicker title="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-primary"/>
-                <we-colorpicker title="Border" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-primary-border"/>
-            </we-row>
-            <we-row string="Buttons">
-                <we-colorpicker title="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-secondary"/>
-                <we-colorpicker title="Border" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-secondary-border"/>
-            </we-row>
-        </div>
+        <we-colorpicker string="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-bg"/>
+        <we-colorpicker string="Text" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-text"/>
+        <we-collapse>
+            <we-colorpicker string="Headings" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-headings"/>
+            <we-colorpicker string="Headings 2" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h2"/>
+            <we-colorpicker string="Headings 3" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h3"/>
+            <we-colorpicker string="Headings 4" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h4"/>
+            <we-colorpicker string="Headings 5" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h5"/>
+            <we-colorpicker string="Headings 6" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-h6"/>
+        </we-collapse>
+        <we-colorpicker string="Links" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-link"/>
+        <we-row string="Main Buttons">
+            <we-colorpicker title="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-primary"/>
+            <we-colorpicker title="Border" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-primary-border"/>
+        </we-row>
+        <we-row string="Buttons">
+            <we-colorpicker title="Background" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-secondary"/>
+            <we-colorpicker title="Border" data-customize-website-color="null" t-attf-data-color="o-cc#{number}-btn-secondary-border"/>
+        </we-row>
     </t>
     <div t-name="website.s_google_map_modal">
         <p>Use Google Map on your website (Contact Us page, snippets, etc).</p>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 36f2d030250..ff1be534de8 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -873,7 +873,6 @@
                             data-use-css-color="true"/>
             <we-select data-icon="fa-lightbulb-o" class="o_we_theme_colors_select" data-variable="color-palettes-number"/>
         </we-row>
-        <div class="o_color_combinations_edition"/>
     </div>
     <div data-js="OptionsTab" data-selector="theme-options" data-no-check="true">
         <we-checkbox string="Show Header"
@@ -905,9 +904,11 @@
                   data-variable="font-size-base"
                   data-unit="px"
                   data-save-unit="rem"/>
-        <we-fontfamilypicker string="Font family" data-variable="font"/>
-        <we-fontfamilypicker string="⌙ Headings" data-variable="headings-font"/>
-        <we-fontfamilypicker string="⌙ Buttons" data-variable="buttons-font"/>
+        <we-collapse>
+            <we-fontfamilypicker string="Font family" data-variable="font"/>
+            <we-fontfamilypicker string="⌙ Headings" data-variable="headings-font"/>
+            <we-fontfamilypicker string="⌙ Buttons" data-variable="buttons-font"/>
+        </we-collapse>
         <we-select string="Main Buttons" data-variable="btn-primary-outline">
             <we-button data-customize-website-variable="false">Fill</we-button>
             <we-button data-customize-website-variable="true">Outline</we-button>