[IMP] web_editor, *: review background color/image options UI

*: website, mass_mailing, website_blog, doc

Part of https://github.com/odoo/odoo/pull/53930
task-2157252

17 files changed, 271 insertions, 229 deletions

diff --git a/addons/mass_mailing/static/src/js/mass_mailing_snippets.js b/addons/mass_mailing/static/src/js/mass_mailing_snippets.js
index ad4864d0b07..407416f3547 100644
--- a/addons/mass_mailing/static/src/js/mass_mailing_snippets.js
+++ b/addons/mass_mailing/static/src/js/mass_mailing_snippets.js
@@ -127,7 +127,7 @@ options.registry.mass_mailing_table_item = options.Class.extend({
 
 // Adding compatibility for the outlook compliance of mailings.
 // Commit of such compatibility : a14f89c8663c9cafecb1cc26918055e023ecbe42
-options.registry.background = options.registry.background.extend({
+options.registry.BackgroundImage = options.registry.BackgroundImage.extend({
     start: function () {
         this._super();
         if (this.snippets && this.snippets.split('.')[0] === "mass_mailing") {
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 cc0a154a08d..7ebf45964b5 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -130,6 +130,8 @@ function createPropertyProxy(obj, propertyName, value) {
 
 //::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
+const NULL_ID = '__NULL__';
+
 /**
  * Base class for components to be used in snippet options widgets to retrieve
  * user values.
@@ -304,7 +306,7 @@ const UserValueWidget = Widget.extend({
      * @returns {boolean}
      */
     isActive: function () {
-        return !!this._value;
+        return this._value && this._value !== NULL_ID;
     },
     /**
      * Indicates if the widget can contain sub user value widgets or not.
@@ -719,7 +721,7 @@ const BaseSelectionUserValueWidget = UserValueWidget.extend({
      */
     setValue(value, methodName) {
         this._userValueWidgets.forEach(widget => {
-            widget.setValue('__NULL__', methodName);
+            widget.setValue(NULL_ID, methodName);
         });
         for (const widget of [...this._userValueWidgets].reverse()) {
             widget.setValue(value, methodName);
@@ -1304,10 +1306,9 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
 });
 
 const ImagepickerUserValueWidget = UserValueWidget.extend({
-    tagName: 'we-imagepicker',
+    tagName: 'we-button',
     events: {
-        'click .o_we_edit_image': '_onEditImage',
-        'click .o_we_remove_image': '_onRemoveImage',
+        'click': '_onEditImage',
     },
 
     /**
@@ -1315,18 +1316,13 @@ const ImagepickerUserValueWidget = UserValueWidget.extend({
      */
     start: async function () {
         await this._super(...arguments);
+
         const allowedSelector = this.el.dataset.allowVideos;
         this.allowVideos = allowedSelector ? this.$target.is(allowedSelector) : false;
 
-        this.editImageButton = document.createElement('we-button');
-        this.editImageButton.classList.add('o_we_edit_image', 'fa', 'fa-fw', 'fa-edit');
-
-        this.removeImageButton = document.createElement('we-button');
-        this.removeImageButton.classList.add('o_we_remove_image', 'fa', 'fa-fw', 'fa-times');
-        this.removeImageButton.title = _t("Remove");
-
-        this.containerEl.appendChild(this.editImageButton);
-        this.containerEl.appendChild(this.removeImageButton);
+        const iconEl = document.createElement('i');
+        iconEl.classList.add('fa', 'fa-fw', 'fa-camera');
+        this.containerEl.appendChild(iconEl);
     },
     /**
      * @override
@@ -1342,9 +1338,9 @@ const ImagepickerUserValueWidget = UserValueWidget.extend({
     /**
      * @override
      */
-    _updateUI: async function () {
+    async _updateUI() {
         await this._super(...arguments);
-        this.removeImageButton.classList.toggle('d-none', !this.isActive());
+        this.el.classList.toggle('active', this.isActive());
     },
 
     //--------------------------------------------------------------------------
@@ -1370,8 +1366,8 @@ const ImagepickerUserValueWidget = UserValueWidget.extend({
             noDocuments: true,
             noVideos: !this.allowVideos,
             isForBgVideo: true,
-            res_model: $editable.data('oe-model'),
-            res_id: $editable.data('oe-id'),
+            'res_model': $editable.data('oe-model'),
+            'res_id': $editable.data('oe-id'),
         }, dummyEl).open();
         mediaDialog.on('save', this, data => {
             if (data.bgVideoSrc) {
@@ -1387,16 +1383,6 @@ const ImagepickerUserValueWidget = UserValueWidget.extend({
             this._onUserValueChange();
         });
     },
-    /**
-     * Called when the remove background button is clicked.
-     *
-     * @private
-     */
-    _onRemoveImage: function (ev) {
-        this._value = '';
-        this.isVideo = false;
-        this._onUserValueChange(ev);
-    },
 });
 
 const DatetimePickerUserValueWidget = InputUserValueWidget.extend({
@@ -2543,44 +2529,6 @@ const registry = {};
 
 //::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
-/**
- * Marks color levels of any element that may get or has a color classes. This
- * is done for the specific main colorpicker option so that those are marked on
- * snippet drop (so that base snippet definition do not need to care about that)
- * and on first focus (for compatibility).
- */
-registry.MainColorpicker = SnippetOptionWidget.extend({
-    /**
-     * @override
-     */
-    start: function () {
-        this._markColorLevel();
-        return this._super(...arguments);
-    },
-    /**
-     * @override
-     */
-    onBuilt: function () {
-        this._markColorLevel();
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Adds a specific class indicating the element is colored so that nested
-     * color classes work (we support one-level). Removing it is not useful,
-     * technically the class can be added on anything that *may* receive a color
-     * class: this does not come with any CSS rule.
-     *
-     * @private
-     */
-    _markColorLevel: function () {
-        this.$target.addClass('o_colored_level');
-    },
-});
-
 registry.sizing = SnippetOptionWidget.extend({
     /**
      * @override
@@ -2975,7 +2923,9 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
         }
         const dataURL = await applyModifications(img);
         const weight = dataURL.split(',')[1].length / 4 * 3;
-        this.$el.find('.o_we_image_weight').text(`${(weight / 1024).toFixed(1)}kb`);
+        const $weight = this.$el.find('.o_we_image_weight');
+        $weight.find('> span').text(`${(weight / 1024).toFixed(1)}kb`);
+        $weight.removeClass('d-none');
         img.classList.add('o_modified_image_to_save');
         return loadImage(dataURL, img);
     },
@@ -3220,7 +3170,7 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
 /**
  * Handles the edition of snippet's background image.
  */
-registry.background = SnippetOptionWidget.extend({
+registry.BackgroundImage = SnippetOptionWidget.extend({
     /**
      * @override
      */
@@ -3649,6 +3599,44 @@ registry.BackgroundPosition = SnippetOptionWidget.extend({
 });
 
 /**
+ * Marks color levels of any element that may get or has a color classes. This
+ * is done for the specific main colorpicker option so that those are marked on
+ * snippet drop (so that base snippet definition do not need to care about that)
+ * and on first focus (for compatibility).
+ */
+registry.ColoredLevelBackground = registry.BackgroundImage.extend({
+    /**
+     * @override
+     */
+    start: function () {
+        this._markColorLevel();
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    onBuilt: function () {
+        this._markColorLevel();
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Adds a specific class indicating the element is colored so that nested
+     * color classes work (we support one-level). Removing it is not useful,
+     * technically the class can be added on anything that *may* receive a color
+     * class: this does not come with any CSS rule.
+     *
+     * @private
+     */
+    _markColorLevel: function () {
+        this.$target.addClass('o_colored_level');
+    },
+});
+
+/**
  * Allows to replace a text value with the name of a database record.
  * @todo replace this mechanism with real backend m2o field ?
  */
@@ -3889,6 +3877,7 @@ return {
     SnippetOptionWidget: SnippetOptionWidget,
     snippetOptionRegistry: registry,
 
+    NULL_ID: NULL_ID,
     UserValueWidget: UserValueWidget,
     userValueWidgetsRegistry: userValueWidgetsRegistry,
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index 28cff34a1de..c82fb464f6d 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -841,6 +841,10 @@ body.editor_enable.editor_has_snippets {
             we-select.o_we_user_value_widget {
                 position: static;
             }
+
+            &.o_we_full_row > div {
+                flex: 1 1 auto;
+            }
         }
 
         %o-we-inline {
@@ -871,6 +875,17 @@ body.editor_enable.editor_has_snippets {
                 }
             }
         }
+
+        .o_we_image_weight {
+            margin-top: $o-we-sidebar-content-field-spacing;
+            text-align: right;
+            color: $o-we-color-success;
+            line-height: $o-we-sidebar-content-field-height;
+
+            > .fa {
+                margin-right: $o-we-sidebar-content-field-label-spacing;
+            }
+        }
     }
 
     > .o_we_invisible_el_panel {
diff --git a/addons/web_editor/static/tests/test_utils.js b/addons/web_editor/static/tests/test_utils.js
index 8ea0f5c70f5..59b1c38e38b 100644
--- a/addons/web_editor/static/tests/test_utils.js
+++ b/addons/web_editor/static/tests/test_utils.js
@@ -66,7 +66,7 @@ const SNIPPETS_TEMPLATE = `
         <div data-selector=".test_option_all">
             <we-colorpicker string="Background Color" data-select-style="true" data-css-property="background-color" data-color-prefix="bg-"/>
         </div>
-        <div data-js="background" data-selector=".test_option_all">
+        <div data-js="BackgroundImage" data-selector=".test_option_all">
             <we-button data-choose-image="true" data-no-preview="true">
                 <i class="fa fa-picture-o"/> Background Image
             </we-button>
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 98396f98002..36c47ebd1f7 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -33,17 +33,75 @@
     </div>
 </template>
 
-<template id="image_optimization_controls">
+<template id="snippet_options_image_optimization_widgets">
     <we-range string="Quality" data-set-quality=""/>
     <!-- Select filled in JS -->
     <we-select string="Width" data-name="width_select_opt" data-no-preview="true"/>
-    <span class="o_we_image_weight text-right"/>
     <we-colorpicker string="Color filter" data-set-filter="" data-no-preview="true" data-excluded="common, theme"/>
     <div class="o_we_external_warning d-none">
         <we-title title="Quality options are unavailable for external images. If you want to change this image's quality, please first download it from the original source and upload it in Odoo.">
             <i class="fa fa-warning" /> External Image
         </we-title>
     </div>
+    <div class="o_we_image_weight d-none"><i class="fa fa-long-arrow-right"/><span/></div>
+</template>
+
+<template id="snippet_options_background_selection_widgets">
+    <we-row t-if="with_colors or with_images" string="Background" class="o_we_full_row">
+        <we-colorpicker t-if="with_colors"
+                        title="Color"
+                        data-name="bg_color_opt"
+                        data-select-style=""
+                        data-css-property="background-color"
+                        data-color-prefix="bg-"
+                        t-att-data-with-combinations="with_color_combinations and 'true' or None"
+                        t-att-data-css-compatible="css_compatible and 'true' or None"/>
+        <we-button-group t-if="with_images"
+                         class="ml-auto"
+                         t-att-data-dependencies="images_dependencies"
+                         data-no-preview="true">
+            <we-imagepicker title="Image"
+                            data-background=""
+                            data-allow-videos=":not(.parallax, .s_parallax_bg)"/>
+            <we-button title="None"
+                       data-background=""><i class="fa fa-fw fa-ban"/></we-button>
+        </we-button-group>
+    </we-row>
+</template>
+
+<template id="snippet_options_background_options">
+    <div t-att-data-js="with_colors and with_color_combinations and 'ColoredLevelBackground' or 'BackgroundImage'"
+         t-att-data-selector="selector"
+         t-att-data-exclude="exclude"
+         t-att-data-target="target">
+        <t t-call="web_editor.snippet_options_background_selection_widgets"/>
+    </div>
+    <t t-if="with_images">
+        <div data-js="BackgroundPosition"
+             t-att-data-selector="selector"
+             t-att-data-exclude="exclude"
+             t-att-data-target="target">
+            <we-row>
+                <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 class="fa fa-fw fa-crosshairs" title="Background Position"
+                        data-background-position-overlay="true" data-no-preview="true"/>
+            </we-row>
+            <we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
+                <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>
+        </div>
+
+        <div data-js="BackgroundOptimize"
+             t-att-data-selector="selector"
+             t-att-data-exclude="exclude"
+             t-att-data-target="target">
+            <t t-call="web_editor.snippet_options_image_optimization_widgets"/>
+        </div>
+    </t>
 </template>
 
 <!-- options (data-selector, data-drop-in, data-drop-near, data-js to link js object ) -->
@@ -61,7 +119,7 @@
 
     <div data-js="ImageOptimize"
          data-selector="img">
-         <t t-call="web_editor.image_optimization_controls"/>
+         <t t-call="web_editor.snippet_options_image_optimization_widgets"/>
      </div>
 </template>
 
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index 0626c0fba11..e698c503ace 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -511,19 +511,7 @@ options.Class.include({
     },
 });
 
-options.registry.BackgroundOptimize.include({
-    /**
-     * @override
-     */
-    _computeVisibility() {
-        if (this.$target.hasClass('o_background_video')) {
-            return false;
-        }
-        return this._super(...arguments);
-    },
-});
-
-options.registry.background.include({
+options.registry.BackgroundImage.include({
     background: async function (previewMode, widgetValue, params) {
         if (previewMode === 'reset' && this.videoSrc) {
             return this._setBgVideo(false, this.videoSrc);
@@ -591,6 +579,18 @@ options.registry.background.include({
     },
 });
 
+options.registry.BackgroundOptimize.include({
+    /**
+     * @override
+     */
+    _computeVisibility() {
+        if (this.$target.hasClass('o_background_video')) {
+            return false;
+        }
+        return this._super(...arguments);
+    },
+});
+
 options.registry.SwitchTheme = options.Class.extend({
     isTopOption: true,
 
@@ -679,6 +679,14 @@ options.registry.Theme = options.Class.extend({
 
         await this._reloadBundles();
     },
+    async enableImagepicker(previewMode, widgetValue, params) {
+        if (widgetValue) {
+            // TODO improve: here we make a hack so that a hidden imagepicker
+            // widget opens...
+            const widget = this._requestUserValueWidgets(widgetValue)[0];
+            widget.$el.click();
+        }
+    },
     /**
      * @see this.selectClass for parameters
      */
@@ -790,6 +798,15 @@ options.registry.Theme = options.Class.extend({
         return this._super(...arguments);
     },
     /**
+     * @override
+     */
+    async _computeWidgetVisibility(widgetName, params) {
+        if (widgetName === 'body_bg_image_opt') {
+            return false;
+        }
+        return this._super(...arguments);
+    },
+    /**
      * @private
      * @param {DOMElement} node
      * @param {String} content text of the editor
@@ -1367,7 +1384,7 @@ options.registry.parallax = options.Class.extend({
      */
     onFocus: function () {
         this.trigger_up('option_update', {
-            optionNames: ['background', 'BackgroundPosition'],
+            optionNames: ['BackgroundImage', 'BackgroundPosition'],
             name: 'target',
             data: this.$target.find('> .s_parallax_bg'),
         });
diff --git a/addons/website/views/snippets/s_badge.xml b/addons/website/views/snippets/s_badge.xml
index 8933720e561..614e2afa5f4 100644
--- a/addons/website/views/snippets/s_badge.xml
+++ b/addons/website/views/snippets/s_badge.xml
@@ -8,7 +8,7 @@
 </template>
 
 <template id="s_badge_options" inherit_id="website.snippet_options">
-    <xpath expr="//div[@id='so_main_colorpicker']" position="after">
+    <xpath expr="//div[@data-js='parallax']" position="before">
         <div data-selector=".s_badge">
             <we-colorpicker string="Color" data-name="badge_colorpicker_opt"
                 data-select-style="true"
diff --git a/addons/website/views/snippets/s_blockquote.xml b/addons/website/views/snippets/s_blockquote.xml
index 283ac6a2207..ba8e46f7812 100644
--- a/addons/website/views/snippets/s_blockquote.xml
+++ b/addons/website/views/snippets/s_blockquote.xml
@@ -24,27 +24,18 @@
                 <we-button data-select-class="s_blockquote_minimalist" data-display="minimalist" data-name="blockquote_minimalist_opt">Minimalist</we-button>
             </we-select>
         </div>
-        <!-- Background Image -->
-        <div data-js="background" string="Background" data-selector=".s_blockquote" data-target=".s_blockquote_content">
-            <we-imagepicker string="Background" data-background="" data-dependencies="blockquote_cover_opt"/>
-        </div>
-        <!-- Background Image Size/Position -->
-        <div data-js="BackgroundPosition" data-selector=".s_blockquote" data-target=".s_blockquote_content">
-            <we-row>
-                <we-select data-no-preview="true">
-                    <we-button data-background-type="cover" data-name="cover_background_opt">Cover</we-button>
-                    <we-button data-background-type="repeat-pattern" data-name="background_repeat_opt">Repeat pattern</we-button>
-                </we-select>
-                <we-button class="fa fa-fw fa-crosshairs" title="Background Position"
-                        data-background-position-overlay="true" data-no-preview="true"/>
-            </we-row>
-            <we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
-                <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>
-        </div>
+
+        <!-- Color and images -->
+        <t t-call="web_editor.snippet_options_background_options">
+            <t t-set="selector" t-value="'.s_blockquote'"/>
+            <t t-set="target" t-value="'.s_blockquote_content'"/>
+            <t t-set="with_colors" t-value="True"/>
+            <t t-set="with_images" t-value="True"/>
+            <t t-set="images_dependencies" t-value="'blockquote_cover_opt'"/>
+        </t>
+
         <!-- Filter -->
-        <div data-js="background" data-selector=".s_blockquote" data-target=".s_blockquote_filter">
+        <div data-selector=".s_blockquote" data-target=".s_blockquote_filter">
             <we-colorpicker string="Filter"
                 data-select-style="true"
                 data-css-property="background-color"
@@ -52,14 +43,9 @@
                 data-excluded="common, theme, custom"
                 data-dependencies="blockquote_cover_opt"/>
         </div>
-        <!-- Background Color -->
+        <!-- Shadow -->
         <div data-js="Box" data-selector=".s_blockquote" data-target=".s_blockquote_content">
-            <we-colorpicker string="Background Color"
-                data-name="bg_color_opt"
-                data-select-style="true"
-                data-css-property="background-color"
-                data-color-prefix="bg-"/>
-            <t t-call="website.snippet_options_shadow"/>
+            <t t-call="website.snippet_options_shadow_widgets"/>
         </div>
         <!-- Border Color -->
         <div data-selector="blockquote">
diff --git a/addons/website/views/snippets/s_chart.xml b/addons/website/views/snippets/s_chart.xml
index f8cbed914b6..52e39996d8f 100644
--- a/addons/website/views/snippets/s_chart.xml
+++ b/addons/website/views/snippets/s_chart.xml
@@ -23,10 +23,10 @@
     <xpath expr="." position="inside">
         <div data-js="InnerChart" string="Chart"
             data-selector=".s_chart">
-            <we-colorpicker string="Background Color"
-                data-select-style="true"
-                data-css-property="background-color"
-                data-color-prefix="bg-"/>
+            <t t-call="web_editor.snippet_options_background_selection_widgets">
+                <t t-set="with_colors" t-value="True"/>
+                <t t-set="with_images" t-value="False"/>
+            </t>
             <we-select string="Type" data-attribute-name="type" data-attribute-default-value="bar" data-no-preview="true">
                 <we-button data-select-data-attribute="bar" data-name="bar_chart_opt">Bar Vertical</we-button>
                 <we-button data-select-data-attribute="horizontalBar" data-name="horizontal_bar_chart_opt">Bar Horizontal</we-button>
diff --git a/addons/website/views/snippets/s_color_blocks_2.xml b/addons/website/views/snippets/s_color_blocks_2.xml
index 28cb7f33247..d25e931fe80 100644
--- a/addons/website/views/snippets/s_color_blocks_2.xml
+++ b/addons/website/views/snippets/s_color_blocks_2.xml
@@ -22,17 +22,6 @@
     </section>
 </template>
 
-<template id="s_color_blocks_2_options" inherit_id="website.snippet_options">
-    <xpath expr="//div[@data-js='background']" position="attributes">
-        <attribute name="data-selector" add=".s_color_blocks_2 [class*='col-']"/>
-        <attribute name="data-exclude" add=".s_color_blocks_2"/>
-    </xpath>
-    <xpath expr="//div[@data-js='BackgroundPosition']" position="attributes">
-        <attribute name="data-selector" add=".s_color_blocks_2 [class*='col-']"/>
-        <attribute name="data-exclude" add=".s_color_blocks_2"/>
-    </xpath>
-</template>
-
 <template id="assets_snippet_s_color_blocks_2_css_000" inherit_id="website.assets_frontend">
     <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_color_blocks_2/000.scss"/>
diff --git a/addons/website/views/snippets/s_masonry_block.xml b/addons/website/views/snippets/s_masonry_block.xml
index 4e6c43e3214..2bec8a29025 100644
--- a/addons/website/views/snippets/s_masonry_block.xml
+++ b/addons/website/views/snippets/s_masonry_block.xml
@@ -35,16 +35,6 @@
     </section>
 </template>
 
-<!-- Options -->
-<template id="s_masonry_block_options" inherit_id="website.snippet_options">
-    <xpath expr="//div[@data-js='background']" position="attributes">
-        <attribute name="data-selector" separator="," add=".s_masonry_block .row > *"/>
-    </xpath>
-    <xpath expr="//div[@data-js='BackgroundPosition']" position="attributes">
-        <attribute name="data-selector" separator="," add=".s_masonry_block .row > *"/>
-    </xpath>
-</template>
-
 <!-- Assets -->
 <template id="_assets_snippet_s_masonry_block_css_000_variables" inherit_id="website._assets_primary_variables" active="False">
     <xpath expr="//link[last()]" position="after">
diff --git a/addons/website/views/snippets/s_media_list.xml b/addons/website/views/snippets/s_media_list.xml
index 1427895a117..b127318cf3e 100644
--- a/addons/website/views/snippets/s_media_list.xml
+++ b/addons/website/views/snippets/s_media_list.xml
@@ -47,17 +47,16 @@
 
 <template id="s_media_list_options" inherit_id="website.snippet_options">
     <xpath expr="." position="inside">
-        <div data-js="MainColorpicker" data-selector=".s_media_list_item" data-target="> .row">
-            <we-colorpicker string="Background Color"
-                            data-name="bg_color_opt"
-                            data-select-style="true"
-                            data-css-property="background-color"
-                            data-color-prefix="bg-"
-                            data-with-combinations="true"/>
-        </div>
+        <t t-call="web_editor.snippet_options_background_options">
+            <t t-set="selector" t-value="'.s_media_list_item'"/>
+            <t t-set="target" t-value="'> .row'"/>
+            <t t-set="with_colors" t-value="True"/>
+            <t t-set="with_images" t-value="False"/>
+            <t t-set="with_color_combinations" t-value="True"/>
+        </t>
         <div data-js="Box" data-selector=".s_media_list_item" data-target="> .row">
-            <t t-call="website.snippet_options_border"/>
-            <t t-call="website.snippet_options_shadow"/>
+            <t t-call="website.snippet_options_border_widgets"/>
+            <t t-call="website.snippet_options_shadow_widgets"/>
         </div>
         <div data-selector=".s_media_list_item" data-target="> .row">
             <we-button-group string="Image Position">
diff --git a/addons/website/views/snippets/s_showcase.xml b/addons/website/views/snippets/s_showcase.xml
index 144025f1ee1..d9c3e7369f2 100644
--- a/addons/website/views/snippets/s_showcase.xml
+++ b/addons/website/views/snippets/s_showcase.xml
@@ -56,7 +56,7 @@
 
 <!-- Options -->
 <template id="s_showcase_options" inherit_id="website.snippet_options">
-    <xpath expr="//div[@data-js='background']" position="before">
+    <xpath expr="//div[@data-js='parallax']" position="before">
         <div data-js="Showcase" data-selector=".s_showcase .row > div:has(> .s_showcase_title)"/>
     </xpath>
 </template>
diff --git a/addons/website/views/snippets/s_text_highlight.xml b/addons/website/views/snippets/s_text_highlight.xml
index e6dc9c81d43..365e42eb1b5 100644
--- a/addons/website/views/snippets/s_text_highlight.xml
+++ b/addons/website/views/snippets/s_text_highlight.xml
@@ -11,8 +11,8 @@
 </template>
 
 <template id="s_text_highlight_options" inherit_id="website.snippet_options">
-    <xpath expr="//div[@id='so_main_colorpicker']" position="attributes">
-        <attribute name="data-selector" add=".s_text_highlight"/>
+    <xpath expr="//t[@t-set='only_bg_color_selector']" position="after">
+        <t t-set="only_bg_color_selector" t-value="only_bg_color_selector + ', .s_text_highlight'"/>
     </xpath>
     <xpath expr="//div[@id='so_width']" position="attributes">
         <attribute name="data-selector" add=".s_text_highlight"/>
@@ -20,7 +20,7 @@
     <xpath expr="//div[@id='so_text_align']" position="attributes">
         <attribute name="data-selector" add=".s_text_highlight"/>
     </xpath>
-    <xpath expr="//div[@data-js='background']" position="before">
+    <xpath expr="//div[@data-js='parallax']" position="before">
         <div data-selector=".s_text_highlight">
             <we-button-group string="Position">
                 <we-button title="Left" data-select-class=""><i class="fa fa-fw fa-align-left"/></we-button>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index eff13410034..40048401538 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -119,7 +119,7 @@
     </xpath>
 </template>
 
-<template id="website.snippet_options_border">
+<template id="snippet_options_border_widgets">
     <we-row string="Border">
         <we-colorpicker data-dependencies="border_width_opt"
                         data-select-style="true" data-css-property="border-color" data-color-prefix="border-"/>
@@ -139,7 +139,7 @@
               data-unit="px" data-extra-class="rounded"/>
 </template>
 
-<template id="website.snippet_options_shadow">
+<template id="snippet_options_shadow_widgets">
     <we-select string="Shadow" data-no-preview="true" data-shadow-class="shadow">
         <we-button data-set-shadow="">None</we-button>
         <we-button data-set-shadow="outset" data-name="shadow_active_opt">Outset</we-button>
@@ -166,12 +166,12 @@
     <div data-js="Box"
          data-selector=".s_three_columns .row > div, .s_comparisons .row > div"
          data-target=".card">
-        <we-colorpicker string="Background Color"
+        <we-colorpicker string="Colors"
             data-select-style="true"
             data-css-property="background-color"
             data-color-prefix="bg-"/>
-        <t t-call="website.snippet_options_border"/>
-        <t t-call="website.snippet_options_shadow"/>
+        <t t-call="website.snippet_options_border_widgets"/>
+        <t t-call="website.snippet_options_shadow_widgets"/>
     </div>
 
     <!-- COLOR | .s_cards -->
@@ -209,16 +209,18 @@
     </div>
 
     <!-- Carousel | .s_carousel | .s_quotes_carousel -->
+    <!-- Dedicated colorpicker so that there is not 3 level of
+         o_colored_level. Use inline-style color for the same reason. -->
+    <t t-call="web_editor.snippet_options_background_options">
+        <t t-set="selector" t-value="'section'"/>
+        <t t-set="target" t-value="'> .carousel'"/>
+        <t t-set="with_colors" t-value="True"/>
+        <t t-set="with_images" t-value="True"/>
+        <t t-set="css_compatible" t-value="True"/>
+    </t>
     <div data-js="Carousel"
-        data-selector="section"
-        data-target="> .carousel">
-         <!-- Dedicated colorpicker so that there is not 3 level of
-              o_colored_level. Use inline-style color for the same reason. -->
-        <we-colorpicker string="Background Color"
-            data-select-style="true"
-            data-css-property="background-color"
-            data-color-prefix="bg-"
-            data-css-compatible="true"/>
+         data-selector="section"
+         data-target="> .carousel">
         <we-select string="Transition">
             <we-button data-select-class="slide">Slide</we-button>
             <we-button data-select-class="carousel-fade slide">Fade</we-button>
@@ -278,37 +280,39 @@
         <we-button class="fa fa-fw fa-angle-right" data-move-snippet="next" data-no-preview="true" data-name="move_right_opt"/>
     </div>
 
-    <!-- Background Image -->
-    <t t-set="bg_selector" t-value="'section, .parallax, .carousel-item'"/>
-    <t t-set="bg_exclude" t-value="'.s_hr, .s_image_gallery, .o_gallery .carousel-item'"/>
-    <div data-js="background" string="Background"
-        t-att-data-selector="bg_selector"
-        t-att-data-exclude="bg_exclude">
-        <we-imagepicker string="Background" data-background="" data-allow-videos=":not(.parallax, .s_parallax_bg)" data-name="bg_img_opt"/>
-    </div>
-    <div data-js="BackgroundOptimize" string="Background"
-        t-att-data-selector="bg_selector"
-        t-att-data-exclude="bg_exclude">
-        <t t-call="web_editor.image_optimization_controls"/>
-    </div>
-
-    <!-- Background Image Size/Position -->
-    <div data-js="BackgroundPosition"
-        data-selector="section, .parallax, .carousel-item"
-        data-exclude=".o_gallery .carousel-item">
-        <we-row>
-            <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 class="fa fa-fw fa-crosshairs" title="Background Position"
-                       data-background-position-overlay="true" data-no-preview="true"/>
-        </we-row>
-        <we-multi data-css-property="background-size" data-dependencies="background_repeat_opt">
-            <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>
-    </div>
+    <!-- Background -->
+    <t t-set="only_bg_color_selector" t-value="'section .row > div'"/>
+    <t t-set="only_bg_color_exclude" t-value="'.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .o_mega_menu .row > div, .o_gallery .row > div'"/>
+
+    <t t-set="base_only_bg_image_selector" t-value="'.parallax, .s_tabs .oe_structure > *, footer .oe_structure > *'"/>
+    <t t-set="only_bg_image_selector" t-value="base_only_bg_image_selector"/>
+    <t t-set="only_bg_image_exclude" t-value="''"/>
+
+    <t t-set="both_bg_color_image_selector" t-value="'section, .carousel-item, .s_masonry_block .row > div, .s_color_blocks_2 .row > div'"/>
+    <t t-set="both_bg_color_image_exclude" t-value="base_only_bg_image_selector + ', .s_carousel_wrapper, .s_color_blocks_2, .o_gallery .carousel-item'"/>
+
+    <t t-call="web_editor.snippet_options_background_options">
+        <t t-set="selector" t-value="both_bg_color_image_selector"/>
+        <t t-set="exclude" t-value="both_bg_color_image_exclude"/>
+        <t t-set="with_colors" t-value="True"/>
+        <t t-set="with_images" t-value="True"/>
+        <t t-set="with_color_combinations" t-value="True"/>
+    </t>
+
+    <t t-call="web_editor.snippet_options_background_options">
+        <t t-set="selector" t-value="only_bg_color_selector"/>
+        <t t-set="exclude" t-value="only_bg_color_exclude"/>
+        <t t-set="with_colors" t-value="True"/>
+        <t t-set="with_images" t-value="False"/>
+        <t t-set="with_color_combinations" t-value="True"/>
+    </t>
+
+    <t t-call="web_editor.snippet_options_background_options">
+        <t t-set="selector" t-value="only_bg_image_selector"/>
+        <t t-set="exclude" t-value="only_bg_image_exclude"/>
+        <t t-set="with_colors" t-value="False"/>
+        <t t-set="with_images" t-value="True"/>
+    </t>
 
     <!-- Parallax -->
     <div data-js="parallax" data-selector=".parallax">
@@ -322,24 +326,7 @@
             <we-button data-select-data-attribute="1.6">Fast</we-button>
             <we-button data-select-data-attribute="2">Very Fast</we-button>
         </we-select>
-    </div>
-
-    <!-- Background Color -->
-    <div id="so_main_colorpicker"
-         data-js="MainColorpicker"
-         data-selector="section, .carousel-item, section .row > div, .o_record_cover_container"
-         data-exclude=".parallax, .o_gallery .carousel-item, .s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div, .s_carousel_wrapper, .s_tabs .oe_structure > *, footer .oe_structure > *, .o_mega_menu .row > div">
-        <we-colorpicker string="Background Color"
-            data-name="bg_color_opt"
-            data-select-style="true"
-            data-css-property="background-color"
-            data-color-prefix="bg-"
-            data-with-combinations="true"
-            data-dependencies="!cover_background_opt"/>
-    </div>
 
-    <!-- FILTER | .s_parallax -->
-    <div data-selector=".parallax">
         <we-colorpicker string="Filter"
             data-select-style="true"
             data-css-property="background-color"
@@ -351,8 +338,8 @@
     <div data-js="Box"
          data-selector="section .row > div"
          data-exclude=".s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
-        <t t-call="website.snippet_options_border"/>
-        <t t-call="website.snippet_options_shadow"/>
+        <t t-call="website.snippet_options_border_widgets"/>
+        <t t-call="website.snippet_options_shadow_widgets"/>
     </div>
 
     <div data-js="sizing_y"
@@ -606,7 +593,11 @@
          data-drop-near=".o_mega_menu .nav-link"/>
 
     <div data-js="CoverProperties" data-selector=".o_record_cover_container" data-no-check="true">
-        <we-imagepicker string="Image" data-background="" data-name="cover_background_opt"/>
+        <t t-call="web_editor.snippet_options_background_selection_widgets">
+            <t t-set="with_colors" t-value="True"/>
+            <t t-set="with_images" t-value="True"/>
+            <t t-set="with_color_combinations" t-value="True"/>
+        </t>
         <we-select string="Size" data-cover-opt-name="size">
             <we-button data-select-class="o_record_has_cover o_full_screen_height">Full Screen</we-button>
             <we-button class="o_record_cover_opt_size_default" data-select-class="o_record_has_cover o_half_screen_height">Half Screen</we-button>
@@ -751,14 +742,22 @@
             <we-button data-customize-website-views="" data-name="layout_full_opt">Full</we-button>
             <we-button data-customize-website-views="website.option_layout_boxed_variables" id="option_layout_boxed">Boxed</we-button>
         </we-select>
-        <we-row string="Background">
-            <we-colorpicker data-name="body_bg_color_opt" data-dependencies="!layout_full_opt" data-customize-website-color="" data-color="body"/>
-            <we-select data-name="body_bg_type_opt">
-                <we-button data-name="no_background_opt" data-customize-website-views="">None</we-button>
-                <we-button data-customize-website-views="website.option_custom_body_image">Image</we-button>
-                <we-button data-customize-website-views="website.option_custom_body_image, website.option_custom_body_pattern">Pattern</we-button>
-            </we-select>
-            <we-imagepicker data-name="body_bg_image_opt" data-dependencies="!no_background_opt" data-customize-body-bg=""/>
+        <we-row string="Background" data-no-preview="true">
+            <we-colorpicker data-dependencies="!layout_full_opt"
+                            data-customize-website-color=""
+                            data-color="body"/>
+            <we-button-group>
+                <we-button title="Image"
+                           data-customize-website-views="website.option_custom_body_image"
+                           data-enable-imagepicker="body_bg_image_opt"><i class="fa fa-fw fa-camera"/></we-button>
+                <we-button title="Pattern"
+                           data-customize-website-views="website.option_custom_body_image, website.option_custom_body_pattern"
+                           data-enable-imagepicker="body_bg_image_opt"><i class="fa fa-fw fa-th"/></we-button>
+                <we-button title="None"
+                           data-customize-website-views=""><i class="fa fa-fw fa-ban"/></we-button>
+            </we-button-group>
+            <!-- Hidden imagepicker enabled by above button-group -->
+            <we-imagepicker data-name="body_bg_image_opt" data-customize-body-bg=""/>
         </we-row>
         <we-checkbox string="Show Header" data-customize-website-views="website.option_layout_hide_header|" data-reload="/"/>
         <we-row string="Code Injection" title="Enter code that will be added into every page of your site">
diff --git a/addons/website_blog/static/src/js/tours/website_blog.js b/addons/website_blog/static/src/js/tours/website_blog.js
index 783fa9c32ff..da38d275865 100644
--- a/addons/website_blog/static/src/js/tours/website_blog.js
+++ b/addons/website_blog/static/src/js/tours/website_blog.js
@@ -27,7 +27,7 @@ odoo.define("website_blog.tour", function (require) {
         position: "top",
         run: "text",
     }, {
-        trigger: "we-button.o_we_edit_image",
+        trigger: "we-button:has(.fa-camera)",
         extra_trigger: "#wrap div[data-oe-expression=\"blog_post.name\"]:not(:containsExact(\"\"))",
         content: _t("Set a blog post <b>cover</b>."),
         position: "right",
diff --git a/addons/website_blog/views/snippets/s_latest_posts.xml b/addons/website_blog/views/snippets/s_latest_posts.xml
index 221805a3499..25fd928cfb3 100644
--- a/addons/website_blog/views/snippets/s_latest_posts.xml
+++ b/addons/website_blog/views/snippets/s_latest_posts.xml
@@ -94,7 +94,7 @@
 
 <!-- Options -->
 <template id="s_latest_posts_options" inherit_id="website.snippet_options">
-    <xpath expr="//div[@data-js='background']" position="before">
+    <xpath expr="//div[@data-js='parallax']" position="before">
         <div data-js="js_get_posts_selectBlog" data-selector=".s_latest_posts" data-target=".js_get_posts" data-no-check="true">
             <we-select string="Choose a blog" data-no-preview="true" name="blog_selection" data-attribute-name="filterByBlogId">
                 <we-button data-select-data-attribute="0">All blogs</we-button>