[IMP] website, *: make editor closer to WYSIWYG

*: event, website_blog, website_event, website_forum, website_sale,
   website_sale_comparison

We're changing most of the "DRAG BUILDING BLOCK HERE" placeholders so
that they only appear on drag. Making the preview as close as possible
to the page once saved. However, we're still keeping them on empty pages
because it make sense there to let know that the area is editable.

Part of https://github.com/odoo/odoo/pull/47933
task-2210733

Co-authored-by: qsm-odoo <qsm@odoo.com>

7 files changed, 37 insertions, 27 deletions

diff --git a/addons/event/models/event_event.py b/addons/event/models/event_event.py
index 9de9285ead0..1e75775d411 100644
--- a/addons/event/models/event_event.py
+++ b/addons/event/models/event_event.py
@@ -102,9 +102,12 @@ class EventEvent(models.Model):
         event_stages = self.env['event.stage'].search([])
         return event_stages[0] if event_stages else False
 
+    def _default_description(self):
+        return self.env['ir.ui.view']._render_template('event.event_default_descripton')
+
     name = fields.Char(string='Event', translate=True, required=True)
     note = fields.Text(string='Note')
-    description = fields.Html(string='Description', translate=html_translate, sanitize_attributes=False, sanitize_form=False)
+    description = fields.Html(string='Description', translate=html_translate, sanitize_attributes=False, sanitize_form=False, default=_default_description)
     active = fields.Boolean(default=True)
     user_id = fields.Many2one(
         'res.users', string='Responsible', tracking=True,
diff --git a/addons/event/views/event_templates.xml b/addons/event/views/event_templates.xml
index 61aeb774279..c8e320e5515 100644
--- a/addons/event/views/event_templates.xml
+++ b/addons/event/views/event_templates.xml
@@ -13,4 +13,11 @@
             </xpath>
         </template>
     </data>
+    <template id="event_default_descripton" name="Event default description">
+        <section class="s_text_block">
+            <h5>Join us for this 24 hours Event</h5>
+            <p>Every year we invite our community, partners and end-users to come and meet us! It's the ideal event to get together and present new features, roadmap of future versions, achievements of the software, workshops, training sessions, etc....
+            This event is also an opportunity to showcase our partners' case studies, methodology or developments. Be there and see directly from the source the features of the new version!</p>
+        </section>
+    </template>
 </odoo>
diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss
index 1a4acd4aac9..dee840dded8 100644
--- a/addons/website/static/src/scss/website.edit_mode.scss
+++ b/addons/website/static/src/scss/website.edit_mode.scss
@@ -3,7 +3,7 @@ $-editor-messages-margin-x: 2%;
     width: 100% - $-editor-messages-margin-x * 2; // Need to be forced here to avoid flickering
     margin: 20px $-editor-messages-margin-x;
     border: 2px dashed #999999;
-    padding: 112px 0px;
+    padding: 12px 0px;
     text-align: center;
     color: #999999;
 
@@ -46,11 +46,9 @@ $-editor-messages-margin-x: 2%;
     }
 
     &.oe_structure.oe_empty, &[data-oe-type=html], .oe_structure.oe_empty {
-        &:empty {
+        &#wrap:empty, &#wrap > .oe_drop_zone.oe_insert:not(.oe_vertical):only-child {
             @extend %o-editor-messages;
-            &.oe_structure_small {
-                padding: 15px 0px;
-            }
+            padding: 112px 0px;
         }
         > .oe_drop_zone.oe_insert:not(.oe_vertical):only-child {
             @extend %o-editor-messages;
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 957c3c686b2..31b4dacba44 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -32,7 +32,7 @@
 
             <!-- Droppable-area shared across all blog's pages -->
             <t t-set="oe_structure_blog_footer_description">Visible in all blogs' pages</t>
-            <div class="oe_structure oe_structure_small"
+            <div class="oe_structure oe_empty"
                 id="oe_structure_blog_footer"
                 t-att-data-editor-sub-message="oe_structure_blog_footer_description"/>
         </div>
@@ -403,7 +403,7 @@ list of filtered posts (by date or tag).
 -->
 <template id="opt_blog_post_read_next" name="Read Next Article" inherit_id="website_blog.blog_post_complete" active="True" customize_show="True">
     <xpath expr="//section[@id='o_wblog_post_footer']" position="inside">
-        <div t-if="next_post" class="css_editable_mode_hidden mt-5">
+        <div t-if="next_post" class="mt-5">
             <t t-if="opt_blog_post_regular_cover">
                 <t t-if="opt_blog_post_sidebar" t-set="readableClass" t-value="'o_wblog_read_with_sidebar'"/>
                 <t t-else="" t-set="readableClass" t-value="'o_container_small'"/>
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index a808eb91c2c..7ae17e9f1a2 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -11,7 +11,7 @@
             <!-- Topbar -->
             <t t-call="website_event.index_topbar"/>
             <!-- Drag/Drop Area -->
-            <div id="oe_structure_we_index_1" class="oe_structure"/>
+            <div id="oe_structure_we_index_1" class="oe_structure oe_empty"/>
             <!-- Content -->
             <div t-attf-class="o_wevent_events_list #{opt_events_list_cards and 'opt_event_list_cards_bg'}">
                 <div class="container">
@@ -29,7 +29,7 @@
                 </div>
             </div>
             <!-- Drag/Drop Area -->
-            <div id="oe_structure_we_index_2" class="oe_structure"/>
+            <div id="oe_structure_we_index_2" class="oe_structure oe_empty"/>
         </div>
     </t>
 </template>
@@ -394,7 +394,8 @@
                 </nav>
             </t>
             <t t-raw="0"/>
-            <div class="oe_structure" id="oe_structure_website_event_layout_1" t-att-data-editor-sub-message="'Following content will appear on all events.'"/>
+            <t t-set="editor_sub_message">Following content will appear on all events.</t>
+            <div class="oe_structure oe_empty" id="oe_structure_website_event_layout_1" t-att-data-editor-sub-message="editor_sub_message"/>
         </div>
     </t>
 </template>
@@ -431,7 +432,7 @@
             <div class="container overflow-hidden">
                 <div class="row no-gutters mt-n4 mb-3">
                     <!-- Description -->
-                    <div id="o_wevent_event_main_col" class="col-lg-8 bg-white px-5 pt64 pb-0 shadow-sm">
+                    <div id="o_wevent_event_main_col" class="col-lg-8 bg-white px-5 pt48 pb-0 shadow-sm">
                         <span t-field="event.description" itemprop="description"/>
                     </div>
                     <div class="col-lg-4 bg-light shadow-sm d-print-none">
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index dd6c17e6f60..78f2d1e097e 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -209,7 +209,7 @@
         <t t-call="website.layout">
             <t t-set="additional_title">Shop</t>
             <div id="wrap" class="js_sale">
-                <div class="oe_structure" id="oe_structure_website_sale_products_1"/>
+                <div class="oe_structure oe_empty" id="oe_structure_website_sale_products_1"/>
                 <div class="container oe_website_sale">
                     <div class="products_pager form-inline flex-md-nowrap justify-content-between justify-content-md-center">
                         <t t-call="website_sale.search">
@@ -273,11 +273,11 @@
                             </t>
                         </div>
                     </div>
-                    <div class="products_pager form-inline justify-content-center mt-3">
+                    <div class="products_pager form-inline justify-content-center py-3">
                         <t t-call="website.pager"/>
                     </div>
                 </div>
-                <div class="oe_structure mb32" id="oe_structure_website_sale_products_2"/>
+                <div class="oe_structure oe_empty" id="oe_structure_website_sale_products_2"/>
             </div>
         </t>
     </template>
@@ -550,22 +550,22 @@
                                 </div>
                             </div>
                             <hr />
-                            <t t-call="website_sale.product_custom_text"/>
                         </div>
                     </div>
                 </section>
-                <div itemprop="description" t-field="product.website_description" class="oe_structure mt16" id="product_full_description" />
+                <div itemprop="description" t-field="product.website_description" class="oe_structure oe_empty mt16" id="product_full_description"/>
             </div>
         </t>
     </template>
 
-    <!-- Dedicated template to not prevent updates on main view -->
-    <template id="product_custom_text" name="Product Custom Text">
-        <p class="text-muted">
-            30-day money-back guarantee<br/>
-            Free Shipping in U.S.<br/>
-            Buy now, get in 2 days
-        </p>
+    <template id="product_custom_text" inherit_id="website_sale.product" active="True" customize_show="True" name="Terms and Conditions">
+        <xpath expr="//div[@id='product_details']" position="inside">
+            <p class="text-muted">
+                <a href="/shop/terms">Terms and Conditions</a><br/>
+                30-day money-back guarantee<br/>
+                Shipping: 2-3 Business Days
+            </p>
+        </xpath>
     </template>
 
     <template inherit_id='website_sale.product' id="product_picture_magnify" customize_show="True" name="Image Zoom">
diff --git a/addons/website_sale_comparison/views/website_sale_comparison_template.xml b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
index 3f7d3f6aafa..e67bf55773b 100644
--- a/addons/website_sale_comparison/views/website_sale_comparison_template.xml
+++ b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
@@ -33,7 +33,7 @@
     <template id="product_attributes_body" inherit_id="website_sale.product" customize_show="True" name="Product attributes table">
         <xpath expr="//div[@id='product_attributes_simple']" position="replace"/>
         <xpath expr="//div[@id='product_full_description']" position="after">
-            <section class="container" id="product_full_spec">
+            <section class="container pt-5" id="product_full_spec">
                 <t t-set="categories" t-value="product.valid_product_template_attribute_line_ids._prepare_categories_for_display()"/>
                 <t t-if="categories">
                     <h3 class="text-center mb32">Specifications for <t t-esc="product.name"/></h3>
@@ -98,8 +98,8 @@
         <t t-call="website.layout">
             <t t-set="additional_title">Shop Comparator</t>
             <div id="wrap" class="js_sale">
-                <div class="oe_structure" id="oe_structure_website_sale_comparison_product_compare_1"/>
-                <div class="container oe_website_sale">
+                <div class="oe_structure oe_empty" id="oe_structure_website_sale_comparison_product_compare_1"/>
+                <div class="container oe_website_sale pt-3">
                     <section class="container">
                         <h3>Compare Products</h3>
                         <table class="table table-bordered table-hover text-center mt16 table-comparator" id="o_comparelist_table">
@@ -160,6 +160,7 @@
                         </table>
                     </section>
                 </div>
+                <div class="oe_structure" id="oe_structure_website_sale_comparison_product_compare_2"/>
             </div>
         </t>
     </template>