[IMP] *: make the shape option available only on custom buttons

*: web_editor, website_mass_mailing

Because the shape is now also part of the theme options for primary and
secondary button, it does not make sense to select it when the button
is either primary or secondary.

This commit makes the Shape option shown only for Custom buttons, and
therefore also nests it under the Style option.

task-3140991

Part-of: odoo/odoo#111621

addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js

@@ -73,8 +73,9 @@ const LinkTools = Link.extend({
             this.colorpickers[cssProperty].$el.appendTo(locationEl);
         }
         const customStyleProps = ['color', 'background-color', 'background-image', 'border-width', 'border-style', 'border-color'];
-        if (customStyleProps.some(s => link.style[s])) {
-            // Force custom style if style exists on the link.
+        const shapeClasses = ['btn-outline-primary', 'btn-outline-secondary', 'btn-fill-primary', 'btn-fill-secondary', 'rounded-circle', 'flat'];
+        if (customStyleProps.some(s => link.style[s]) || shapeClasses.some(c => link.classList.contains(c))) {
+            // Force custom style if style or shape exists on the link.
             const customOption = this.el.querySelector('[name="link_style_color"] we-button[data-value="custom"]');
             this._setSelectOption($(customOption), true);
             this._updateOptionsUI();
@@ -254,10 +255,14 @@ const LinkTools = Link.extend({
         const el = this.el.querySelector('[name="link_style_color"] we-button.active');
         if (el) {
             this.colorCombinationClass = el.dataset.value;
-            // Hide the size and shape options if the link is an unstyled anchor.
-            this.$('.link-size-row, .link-shape-row').toggleClass('d-none', !this.colorCombinationClass);
-            // Show custom colors only for Custom style.
-            this.$('.link-custom-color').toggleClass('d-none', el.dataset.value !== 'custom');
+            // Hide the size option if the link is an unstyled anchor.
+            for (const rowEl of this.el.querySelectorAll('.link-size-row')) {
+                rowEl.classList.toggle('d-none', !this.colorCombinationClass);
+            }
+            // Show custom colors and shape only for Custom style.
+            for (const rowEl of this.el.querySelectorAll('.link-custom-color, .link-shape-row')) {
+                rowEl.classList.toggle('d-none', el.dataset.value !== 'custom');
+            }
 
             // Note: the _updateColorpicker method is supposedly async but can
             // be used synchronously given the fact that _addColorPicker was

addons/web_editor/static/src/xml/wysiwyg.xml

@@ -277,7 +277,7 @@
             </div>
         </we-row>
         <we-row class="link-size-row">
-            <we-select class="o_we_user_value_widget o_we_sublevel_1">
+            <we-select class="o_we_user_value_widget o_we_sublevel_2">
                 <we-title>Size</we-title>
                 <div>
                     <div class="dropdown">
@@ -303,7 +303,7 @@
             </we-select>
         </we-row>
         <we-row class="link-shape-row">
-            <we-select class="o_we_user_value_widget o_we_sublevel_1">
+            <we-select class="o_we_user_value_widget o_we_sublevel_2">
                 <we-title>Shape</we-title>
                 <div>
                     <div class="dropdown">

addons/website_mass_mailing/static/tests/tours/snippet_newsletter_block_with_edit.js

@@ -46,6 +46,20 @@ wTourUtils.registerWebsitePreviewTour('snippet_newsletter_block_with_edit', {
         content: 'Click on the primary style button',
         trigger: '[data-value="primary"]',
     },
+    {
+        content: 'Verify that the shape option is not available for primary while the size option appeared',
+        trigger: 'we-customizeblock-option:not(:has([name="link_style_shape"]))',
+        extra_trigger: 'we-customizeblock-option:has([name="link_style_size"])',
+        isCheck: true,
+    },
+    {
+        content: 'Click on the link style button',
+        trigger: '.dropdown:has([name="link_style_color"]) > button',
+    },
+    {
+        content: 'Click on the custom style button',
+        trigger: '[data-value="custom"]',
+    },
     {
         content: 'Change the shape of the button',
         trigger: '.dropdown:has([name="link_style_shape"]) > button',
@@ -60,6 +74,6 @@ wTourUtils.registerWebsitePreviewTour('snippet_newsletter_block_with_edit', {
     // prevent to edit the button).
     {
         content: 'Check that the link style is correct',
-        trigger: 'iframe .s_newsletter_block .js_subscribed_btn.btn.btn-primary.flat:not(.btn-success)',
+        trigger: 'iframe .s_newsletter_block .js_subscribed_btn.btn.btn-custom.flat:not(.btn-success)',
     },
 ]);