[IMP] web_editor, website, *: create background-type toggler option

*: website_blog

Previously, background colors, images, and videos could all be applied
on the same section, such that the image can be used as a fallback for
the video, and the color as a fallback for the image. However, if you
wanted to change the background color behind the background image, the
background image would be removed. The background image and background
video also shared the same widget to pick the image or video.

This commit adds a background-type toggler, where the user can toggle
the background color, image and video individually. It also makes the
video picker into its own UserValueWidget, such that the user can pick
both an image and video without overriding the other.

Part of https://github.com/odoo/odoo/pull/53017
task-2210790

8 files changed, 268 insertions, 169 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 92438f33a6c..1060140c619 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -1314,24 +1314,53 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
     },
 });
 
-const ImagepickerUserValueWidget = UserValueWidget.extend({
+const MediapickerUserValueWidget = UserValueWidget.extend({
     tagName: 'we-button',
     events: {
-        'click': '_onEditImage',
+        'click': '_onEditMedia',
     },
 
     /**
      * @override
      */
-    start: async function () {
+    async start() {
         await this._super(...arguments);
+        if (this.options.dataAttributes.buttonStyle) {
+            const iconEl = document.createElement('i');
+            iconEl.classList.add('fa', 'fa-fw', 'fa-camera');
+            this.containerEl.appendChild(iconEl);
+        } else {
+            this.el.classList.add('fa', 'fa-fw', 'fa-edit');
+        }
+    },
 
-        const allowedSelector = this.el.dataset.allowVideos;
-        this.allowVideos = allowedSelector ? this.$target.is(allowedSelector) : false;
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
 
-        const iconEl = document.createElement('i');
-        iconEl.classList.add('fa', 'fa-fw', 'fa-camera');
-        this.containerEl.appendChild(iconEl);
+    /**
+     * Creates and opens a media dialog to edit a given element's media.
+     *
+     * @private
+     * @param {HTMLElement} el the element whose media should be edited
+     * @param {boolean} [images] whether images should be available
+     *   default: false
+     * @param {boolean} [videos] whether videos should be available
+     *   default: false
+     */
+    _openDialog(el, {images = false, videos = false}) {
+        el.src = this._value;
+        const $editable = this.$target.closest('.o_editable');
+        const mediaDialog = new weWidgets.MediaDialog(this, {
+            noImages: !images,
+            noVideos: !videos,
+            noIcons: true,
+            noDocuments: true,
+            isForBgVideo: true,
+            'res_model': $editable.data('oe-model'),
+            'res_id': $editable.data('oe-id'),
+        }, el).open();
+        return mediaDialog;
     },
 
     //--------------------------------------------------------------------------
@@ -1341,12 +1370,6 @@ const ImagepickerUserValueWidget = UserValueWidget.extend({
     /**
      * @override
      */
-    getMethodsParams: function (methodName) {
-        return _.extend({isVideo: this.isVideo}, this._super(...arguments));
-    },
-    /**
-     * @override
-     */
     async setValue() {
         await this._super(...arguments);
         this.el.classList.toggle('active', this.isActive());
@@ -1357,38 +1380,50 @@ const ImagepickerUserValueWidget = UserValueWidget.extend({
     //--------------------------------------------------------------------------
 
     /**
-     * Called when the edit background button is clicked.
+     * Called when the edit button is clicked.
      *
      * @private
+     * @param {Event} ev
+     */
+    _onEditMedia: function (ev) {},
+});
+
+const ImagepickerUserValueWidget = MediapickerUserValueWidget.extend({
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
      */
-    _onEditImage: function (ev) {
+    _onEditMedia(ev) {
         // Need a dummy element for the media dialog to modify.
-        const dummyEl = document.createElement(this.isVideo ? 'iframe' : 'img');
-        dummyEl.src = this._value;
-        if (this.isVideo) {
-            // Allows the mediaDialog to select the video tab immediately.
-            dummyEl.classList.add('media_iframe_video');
-        }
-        const $editable = this.$target.closest('.o_editable');
-        const mediaDialog = new weWidgets.MediaDialog(this, {
-            noIcons: true,
-            noDocuments: true,
-            noVideos: !this.allowVideos,
-            isForBgVideo: true,
-            'res_model': $editable.data('oe-model'),
-            'res_id': $editable.data('oe-id'),
-        }, dummyEl).open();
-        mediaDialog.on('save', this, data => {
-            if (data.bgVideoSrc) {
-                this._value = data.bgVideoSrc;
-                this.isVideo = true;
-            } else {
-                // Accessing the value directly through dummyEl.src converts the url to absolute
-                // using getAttribute allows us to keep the url as it was inserted in the DOM
-                // which can be useful to compare it to values stored in db.
-                this._value = dummyEl.getAttribute('src');
-                this.isVideo = false;
-            }
+        const dummyEl = document.createElement('img');
+        const dialog = this._openDialog(dummyEl, {images: true});
+        dialog.on('save', this, data => {
+            // Accessing the value directly through dummyEl.src converts the url to absolute,
+            // using getAttribute allows us to keep the url as it was inserted in the DOM
+            // which can be useful to compare it to values stored in db.
+            this._value = dummyEl.getAttribute('src');
+            this._onUserValueChange();
+        });
+    },
+});
+
+const VideopickerUserValueWidget = MediapickerUserValueWidget.extend({
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _onEditMedia(ev) {
+        // Need a dummy element for the media dialog to modify.
+        const dummyEl = document.createElement('iframe');
+        const dialog = this._openDialog(dummyEl, {videos: true});
+        dialog.on('save', this, data => {
+            this._value = data.bgVideoSrc;
             this._onUserValueChange();
         });
     },
@@ -1563,6 +1598,7 @@ const userValueWidgetsRegistry = {
     'we-colorpicker': ColorpickerUserValueWidget,
     'we-datetimepicker': DatetimePickerUserValueWidget,
     'we-imagepicker': ImagepickerUserValueWidget,
+    'we-videopicker': VideopickerUserValueWidget,
     'we-range': RangeUserValueWidget,
 };
 
@@ -3155,6 +3191,46 @@ registry.BackgroundOptimize = ImageHandlerOption.extend({
     },
 });
 
+registry.BackgroundToggler = SnippetOptionWidget.extend({
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Toggles background image on or off.
+     *
+     * @see this.selectClass for parameters
+     */
+    toggleBgImage(previewMode, widgetValue, params) {
+        if (!widgetValue) {
+            // TODO: use setWidgetValue instead of calling background directly when possible
+            const [bgImageWidget] = this._requestUserValueWidgets('bg_image_opt');
+            const bgImageOpt = bgImageWidget.getParent();
+            return bgImageOpt.background(false, '', bgImageWidget.getMethodsParams('background'));
+        } else {
+            // TODO: use trigger instead of el.click when possible
+            this._requestUserValueWidgets('bg_image_opt')[0].el.click();
+        }
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _computeWidgetState(methodName, params) {
+        if (methodName === 'toggleBgImage') {
+            const [bgImageWidget] = this._requestUserValueWidgets('bg_image_opt');
+            const bgImageOpt = bgImageWidget.getParent();
+            return !!bgImageOpt._computeWidgetState('background', bgImageWidget.getMethodsParams('background'));
+        }
+        return this._super(...arguments);
+    },
+});
+
 /**
  * Handles the edition of snippet's background image.
  */
@@ -3163,10 +3239,7 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
      * @override
      */
     start: function () {
-        // Initialize background and events
-        this.bindBackgroundEvents();
         this.__customImageSrc = this._getSrcFromCssValue();
-
         return this._super(...arguments);
     },
 
@@ -3207,23 +3280,11 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
     //--------------------------------------------------------------------------
 
     /**
-     * Attaches events so that when a background-color is set, the background
-     * image is removed.
-     */
-    bindBackgroundEvents: function () {
-        if (this.$target.is('.parallax, .s_parallax_bg')) {
-            return;
-        }
-        this.$target.off('.background-option')
-            .on('background-color-event.background-option', this._onBackgroundColorUpdate.bind(this));
-    },
-    /**
      * @override
      */
     setTarget: function () {
         this._super(...arguments);
         // TODO should be automatic for all options as equal to the start method
-        this.bindBackgroundEvents();
         this.__customImageSrc = this._getSrcFromCssValue();
     },
 
@@ -3244,38 +3305,11 @@ registry.BackgroundImage = SnippetOptionWidget.extend({
      * @override
      */
     _computeWidgetState: function (methodName) {
-        switch (methodName) {
-            case 'background':
-                return this._getSrcFromCssValue();
+        if (methodName === 'background') {
+            return this._getSrcFromCssValue();
         }
         return this._super(...arguments);
     },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Called on background-color update (useful to remove the background to be
-     * able to see the chosen color).
-     *
-     * @private
-     * @param {Event} ev
-     * @param {boolean|string} previewMode
-     * @returns {boolean} true if the color has been applied (removing the
-     *                    background)
-     */
-    _onBackgroundColorUpdate: async function (ev, previewMode) {
-        ev.stopPropagation();
-        if (ev.currentTarget !== ev.target) {
-            return false;
-        }
-        if (previewMode === false) {
-            this.__customImageSrc = undefined;
-        }
-        await this.background(previewMode, '', {});
-        return true;
-    },
 });
 
 /**
@@ -3583,7 +3617,7 @@ registry.BackgroundPosition = SnippetOptionWidget.extend({
  * 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({
+registry.ColoredLevelBackground = registry.BackgroundToggler.extend({
     /**
      * @override
      */
diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js b/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js
index 74574a6690c..c1160ae0e52 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/media_dialog.js
@@ -80,8 +80,8 @@ var MediaDialog = Dialog.extend({
             this.activeWidget = this.videoWidget;
         } else if (this.iconWidget && $media.is('span, i')) {
             this.activeWidget = this.iconWidget;
-        } else if (this.imageWidget) {
-            this.activeWidget = this.imageWidget;
+        } else {
+            this.activeWidget = [this.imageWidget, this.documentWidget, this.videoWidget, this.iconWidget].find(w => !!w);
         }
     },
     /**
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index b2743ef7474..7c7e7814f26 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -290,7 +290,6 @@ body.editor_enable.editor_has_snippets {
 
             &.fa {
                 display: inline-block;
-                margin: 0 0 0 $o-we-sidebar-content-field-multi-spacing;
                 padding: 0;
                 border: none;
                 background: none;
@@ -374,10 +373,16 @@ body.editor_enable.editor_has_snippets {
                     color: $o-we-sidebar-content-field-control-item-color;
                     text-align: center;
 
+                    > * {
+                        margin-left: $o-we-sidebar-content-field-multi-spacing;
+                    }
                     > we-customizeblock-option {
                         &, .fa {
                             display: inline-block !important;
                         }
+                        .fa {
+                            margin: 0;
+                        }
                     }
                 }
             }
@@ -873,7 +878,7 @@ body.editor_enable.editor_has_snippets {
             background-color: $o-we-bg-darkest;
 
             + .fa {
-                margin-left: 0;
+                margin: 0;
             }
         }
         .o_we_tag_wrapper {
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 078f8d86e60..ecd64a00d9c 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -34,7 +34,7 @@
 </template>
 
 <template id="snippet_options_image_optimization_widgets">
-    <t t-set="filter_label">Color filter</t>
+    <t t-set="filter_label">Color Filter</t>
     <t t-set="width_label">Width</t>
     <t t-set="quality_label">Quality</t>
     <div class="o_we_external_warning d-none">
@@ -42,48 +42,55 @@
             <i class="fa fa-warning" /> External Image
         </we-title>
     </div>
-    <we-colorpicker t-att-string="indent and ('⌙ %s' % filter_label) or filter_label" data-set-filter="" data-no-preview="true" data-excluded="common, theme"/>
-    <we-select t-att-string="indent and ('⌙ %s' % width_label) or width_label" data-name="width_select_opt" data-no-preview="true"/>
-    <we-range t-att-string="indent and ('⌙ %s' % quality_label) or quality_label" data-set-quality=""/>
+    <!-- &emsp; -->
+    <we-colorpicker t-att-string="indent and (' ⌙ %s' % filter_label) or filter_label" data-set-filter="" data-no-preview="true" data-excluded="common, theme"/>
+    <we-select t-att-string="indent and (' ⌙ %s' % width_label) or width_label" data-name="width_select_opt" data-no-preview="true"/>
+    <we-range t-att-string="indent and (' ⌙ %s' % quality_label) or quality_label" data-set-quality=""/>
     <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 id="snippet_options_background_color_widget">
+    <we-colorpicker 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"/>
 </template>
 
 <template id="snippet_options_background_options">
-    <div t-att-data-js="with_colors and with_color_combinations and 'ColoredLevelBackground' or 'BackgroundImage'"
+    <div t-att-data-js="with_colors and with_color_combinations and 'ColoredLevelBackground' or 'BackgroundToggler'"
          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"/>
+        <we-row t-if="with_colors or with_images" string="Background" class="o_we_full_row">
+            <t t-if="with_colors" t-call="web_editor.snippet_options_background_color_widget"/>
+            <t t-if="with_images">
+                <we-button title="Image" class="ml-auto" data-toggle-bg-image="true" t-att-data-dependencies="images_dependencies" data-no-preview="true">
+                    <i class="fa fa-fw fa-camera"/>
+                </we-button>
+            </t>
+        </we-row>
     </div>
     <t t-if="with_images">
+        <div data-js="BackgroundImage"
+             t-att-data-selector="selector"
+             t-att-data-exclude="exclude"
+             t-att-data-target="target">
+            <we-row string="⌙ Image">
+                <we-imagepicker title="Edit image"
+                                data-background=""
+                                data-name="bg_image_opt"
+                                data-dependencies="bg_image_opt"/>
+            </we-row>
+        </div>
+
         <div data-js="BackgroundPosition"
              t-att-data-selector="selector"
              t-att-data-exclude="exclude"
              t-att-data-target="target">
-            <we-row string="⌙ Position">
+            <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>
@@ -92,8 +99,9 @@
                         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"/>
+                <!-- &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>
         </div>
 
diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js
index be7a55f8111..c7dc9f75f98 100644
--- a/addons/website/static/src/js/editor/snippets.options.js
+++ b/addons/website/static/src/js/editor/snippets.options.js
@@ -626,16 +626,62 @@ options.Class.include({
     },
 });
 
-options.registry.BackgroundImage.include({
-    background: async function (previewMode, widgetValue, params) {
-        if (previewMode === 'reset' && this.videoSrc) {
-            return this._setBgVideo(false, this.videoSrc);
+options.registry.BackgroundToggler.include({
+    /**
+     * Toggles background video on or off.
+     *
+     * @see this.selectClass for parameters
+     */
+    toggleBgVideo(previewMode, widgetValue, params) {
+        if (!widgetValue) {
+            // TODO: use setWidgetValue instead of calling background directly when possible
+            const [bgVideoWidget] = this._requestUserValueWidgets('bg_video_opt');
+            const bgVideoOpt = bgVideoWidget.getParent();
+            return bgVideoOpt._setBgVideo(false, '');
+        } else {
+            // TODO: use trigger instead of el.click when possible
+            this._requestUserValueWidgets('bg_video_opt')[0].el.click();
         }
+    },
 
-        const _super = this._super.bind(this);
-        if (!params.isVideo) {
-            await this._setBgVideo(previewMode, '');
-            return _super(...arguments);
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _computeWidgetState(methodName, params) {
+        if (methodName === 'toggleBgVideo') {
+            return this.$target[0].classList.contains('o_background_video');
+        }
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     */
+    _computeWidgetVisibility(widgetName, params) {
+        if (widgetName === 'bg_video_toggler_opt') {
+            return !this.$target.is('.parallax, .s_parallax_bg');
+        }
+        return this._super(...arguments);
+    },
+});
+
+options.registry.BackgroundVideo = options.Class.extend({
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Sets the target's background video.
+     *
+     * @see this.selectClass for parameters
+     */
+    background: function (previewMode, widgetValue, params) {
+        if (previewMode === 'reset' && this.videoSrc) {
+            return this._setBgVideo(false, this.videoSrc);
         }
         return this._setBgVideo(previewMode, widgetValue);
     },
@@ -647,9 +693,12 @@ options.registry.BackgroundImage.include({
     /**
      * @override
      */
-    _computeWidgetState: function (methodName) {
-        if (methodName === 'background' && this.$target[0].classList.contains('o_background_video')) {
-            return this.$('> .o_bg_video_container iframe').attr('src');
+    _computeWidgetState: function (methodName, params) {
+        if (methodName === 'background') {
+            if (this.$target[0].classList.contains('o_background_video')) {
+                return this.$('> .o_bg_video_container iframe').attr('src');
+            }
+            return '';
         }
         return this._super(...arguments);
     },
@@ -677,33 +726,6 @@ options.registry.BackgroundImage.include({
         }
         await this._refreshPublicWidgets();
     },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-     _onBackgroundColorUpdate: async function (ev, previewMode) {
-        const ret = await this._super(...arguments);
-        if (ret) {
-            this._setBgVideo(previewMode, '');
-        }
-        return ret;
-    },
-});
-
-options.registry.BackgroundOptimize.include({
-    /**
-     * @override
-     */
-    _computeVisibility() {
-        if (this.$target.hasClass('o_background_video')) {
-            return false;
-        }
-        return this._super(...arguments);
-    },
 });
 
 options.registry.OptionsTab = options.Class.extend({
diff --git a/addons/website/views/snippets/s_chart.xml b/addons/website/views/snippets/s_chart.xml
index 52e39996d8f..b74facde91f 100644
--- a/addons/website/views/snippets/s_chart.xml
+++ b/addons/website/views/snippets/s_chart.xml
@@ -23,10 +23,9 @@
     <xpath expr="." position="inside">
         <div data-js="InnerChart" string="Chart"
             data-selector=".s_chart">
-            <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-row string="Background">
+                <t t-call="web_editor.snippet_options_background_color_widget"/>
+            </we-row>
             <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/snippets.xml b/addons/website/views/snippets/snippets.xml
index 87fb21ccecb..ef54ed3f945 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -121,6 +121,31 @@
     </xpath>
 </template>
 
+<template id="snippet_options_background_options" inherit_id="web_editor.snippet_options_background_options">
+    <xpath expr="//we-button[@data-toggle-bg-image]" position="after">
+        <we-button title="Video"
+                   data-name="bg_video_toggler_opt"
+                   t-att-data-dependencies="images_dependencies"
+                   data-toggle-bg-video="true"
+                   data-no-preview="true">
+            <i class="fa fa-fw fa-film"/>
+        </we-button>
+    </xpath>
+    <xpath expr="//div[@data-js='BackgroundOptimize']" position="after">
+        <div data-js="BackgroundVideo"
+             t-att-data-selector="selector"
+             t-att-data-exclude="exclude"
+             t-att-data-target="target">
+            <we-row string="⌙ Video">
+                <we-videopicker title="Edit video"
+                                data-background=""
+                                data-name="bg_video_opt"
+                                data-dependencies="bg_video_opt"/>
+            </we-row>
+        </div>
+    </xpath>
+</template>
+
 <template id="snippet_options_border_line_widgets">
     <we-row t-att-string="label">
         <we-input data-name="border_width_opt"
@@ -622,11 +647,17 @@
          data-drop-near=".o_mega_menu .nav-link"/>
 
     <div data-js="CoverProperties" data-selector=".o_record_cover_container" data-no-check="true">
-        <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-row string="Background" class="o_we_full_row">
+            <t t-call="web_editor.snippet_options_background_color_widget">
+                <t t-set="with_color_combinations" t-value="True"/>
+            </t>
+            <we-button-group class="ml-auto">
+                <we-imagepicker title="Image" data-background="" data-button-style="true"/>
+                <we-button title="None" data-background="">
+                    <i class="fa fa-fw fa-ban"/>
+                </we-button>
+            </we-button-group>
+        </we-row>
         <we-select string="Size" data-cover-opt-name="size">
             <we-button data-select-class="o_full_screen_height">Full Screen</we-button>
             <we-button class="o_record_cover_opt_size_default" data-select-class="o_half_screen_height">Half Screen</we-button>
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 da38d275865..a2be1051ccf 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:has(.fa-camera)",
+        trigger: "we-button[data-background]:nth(1)",
         extra_trigger: "#wrap div[data-oe-expression=\"blog_post.name\"]:not(:containsExact(\"\"))",
         content: _t("Set a blog post <b>cover</b>."),
         position: "right",