From 1fa701c436f18e73ab0a335cd826805bd3344e0e Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Tue, 7 Nov 2023 12:58:00 +0100
Subject: [PATCH] [FIX] website: properly allow to edit header texts and links

The text and links in the header configurations were always the root
elements that were editable. For them to be properly editable, we need
their container (at minimum) to be the root editable element. Indeed,
on root editable elements, only the class and style can be changed (if
not dynamic). But changing a link requires to change the href, the
target. Changing a text style requires to change the tag entirely, etc.

For this to work, the `_link_class` configuration was removed, it was in
fact mostly useless and actually even breaking some layouts. So doing
this fix actually improves the design as well. For the layout were it
made sense, it actually became useless by refactoring the templates.
This was necessary anyway for texts which did not use `_link_class` but
were root editable nodes anyway because of the `t-if` conditions laying
around.

closes odoo/odoo#140869

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 addons/website/views/website_templates.xml | 57 +++++++++++++---------
 1 file changed, 35 insertions(+), 22 deletions(-)

diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index 28df25f5c9c..dd71a041fe7 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -352,7 +352,6 @@
                         <!-- Text element -->
                         <t t-call="website.placeholder_header_text_element">
                             <t t-set="_div_class" t-valuef="mt-2 border-top pt-2 o_border_contrast"/>
-                            <t t-set="_link_class" t-valuef="d-block p-1"/>
                         </t>
                         <!-- Social -->
                         <t t-call="website.placeholder_header_social_links">
@@ -564,7 +563,6 @@
                             <t t-call="website.placeholder_header_text_element">
                                 <t t-set="_txt_elt_content" t-valuef="phone_mail"/>
                                 <t t-set="_div_class" t-valuef="mt-2 border-top pt-2 o_border_contrast"/>
-                                <t t-set="_link_class" t-valuef="d-block p-1"/>
                             </t>
                             <!-- Social -->
                             <t t-call="website.placeholder_header_social_links">
@@ -660,8 +658,8 @@
                 <ul class="o_header_stretch_elts navbar-nav flex-shrink-0 ps-2">
                     <!-- Text element -->
                         <t t-call="website.placeholder_header_text_element">
+                            <t t-set="_txt_elt_content" t-valuef="mail_stretched"/>
                             <t t-set="_div_class" t-valuef="h-100 border-start o_border_contrast"/>
-                            <t t-set="_link_class" t-valuef="o_navlink_background_hover d-flex align-items-center h-100 text-reset"/>
                         </t>
                     <!-- Search bar -->
                     <t t-call="website.placeholder_header_search_box">
@@ -1317,9 +1315,8 @@
                             </li>
                             <!-- Text element -->
                             <t t-call="website.placeholder_header_text_element">
-                                <t t-set="_div_class" t-valuef="mt-2 border-top pt-2 o_border_contrast"/>
-                                <t t-set="_link_class" t-valuef="d-block p-1"/>
                                 <t t-set="_txt_elt_content" t-valuef="phone_mail"/>
+                                <t t-set="_div_class" t-valuef="mt-2 border-top pt-2 o_border_contrast"/>
                             </t>
                             <!-- Social -->
                             <t t-call="website.placeholder_header_social_links">
@@ -2893,11 +2890,13 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
 <template id="website.header_text_element" inherit_id="website.placeholder_header_text_element" name="Header Text element" active="True">
     <xpath expr="." position="inside">
         <li t-attf-class="#{_item_class}">
-            <div t-attf-class="s_text_block #{_div_class} #{'d-flex flex-column flex-lg-row gap-1 gap-lg-4 align-items-lg-center' if _txt_elt_content == 'list' else ''}" data-name="Text">
-                <t t-if="_txt_elt_content == 'sentence'">
+            <t t-if="_txt_elt_content == 'sentence'">
+                <div t-attf-class="s_text_block #{_div_class}" data-name="Text">
                     <small>Free Returns and Standard Shipping</small>
-                </t>
-                <t t-elif="_txt_elt_content == 'list'">
+                </div>
+            </t>
+            <t t-elif="_txt_elt_content == 'list'">
+                <div t-attf-class="s_text_block d-flex flex-column flex-lg-row gap-1 gap-lg-4 align-items-lg-center #{_div_class}" data-name="Text">
                     <small class="d-flex align-items-center">
                         <i class="fa fa-1x fa-fw fa-usd fa-stack me-1"/>
                         Low Price Guarantee
@@ -2910,33 +2909,47 @@ Sitemap: <t t-esc="url_root"/>sitemap.xml
                         <i class="fa fa-1x fa-fw fa-truck fa-stack me-1"/>
                         Standard Shipping
                     </small>
-                </t>
-                <t t-elif="_txt_elt_content == 'phone_mail'">
-                    <a href="tel:+1 (650) 555-0111" t-attf-class="nav-link o_nav-link_secondary #{_link_class}">
+                </div>
+            </t>
+            <t t-elif="_txt_elt_content == 'phone_mail'">
+                <div t-attf-class="s_text_block #{_div_class}" data-name="Text">
+                    <a href="tel:+1 (650) 555-0111" class="nav-link o_nav-link_secondary">
                         <small>
                             <i class="fa fa-1x fa-fw fa-phone me-1"/>&#847; <!-- Empty character needed to be able to delete the icon. -->
                             <span class="o_force_ltr">+1 (650) 555-0111</span>
                         </small>
                     </a>
-                    <a href="mailto:info@yourcompany.example.com" t-attf-class="nav-link o_nav-link_secondary #{_link_class}">
+                    <a href="mailto:info@yourcompany.example.com" class="nav-link o_nav-link_secondary">
                         <small>
                             <i class="fa fa-1x fa-fw fa-envelope me-1"/>
-                             info@yourcompany.example.com
+                            info@yourcompany.example.com
                         </small>
                     </a>
-                </t>
-                <t t-elif="_txt_elt_content == 'mail'">
-                    <a href="mailto:info@yourcompany.example.com" t-attf-class="nav-link o_nav-link_secondary #{_link_class}">
+                </div>
+            </t>
+            <t t-elif="_txt_elt_content == 'mail'">
+                <div t-attf-class="s_text_block #{_div_class}" data-name="Text">
+                    <a href="mailto:info@yourcompany.example.com" class="nav-link o_nav-link_secondary">
                         <small><i class="fa fa-1x fa-fw fa-envelope me-1"/> info@yourcompany.example.com</small>
                     </a>
-                </t>
-                <t t-else="">
-                    <a href="tel:+1 (650) 555-0111" t-attf-class="nav-link o_nav-link_secondary p-2 #{_link_class}">
+                </div>
+            </t>
+            <t t-elif="_txt_elt_content == 'mail_stretched'">
+                <div t-attf-class="s_text_block #{_div_class}" data-name="Text">
+                    <a href="tel:+1 (650) 555-0111" class="nav-link o_nav-link_secondary p-2 o_navlink_background_hover d-flex align-items-center h-100 text-reset">
                         <i class="fa fa-1x fa-fw fa-phone me-1"/>
                         <span class="o_force_ltr"><small>+1 (650) 555-0111</small></span>
                     </a>
-                </t>
-            </div>
+                </div>
+            </t>
+            <t t-else="">
+                <div t-attf-class="s_text_block #{_div_class}" data-name="Text">
+                    <a href="tel:+1 (650) 555-0111" class="nav-link o_nav-link_secondary p-2">
+                        <i class="fa fa-1x fa-fw fa-phone me-1"/>
+                        <span class="o_force_ltr"><small>+1 (650) 555-0111</small></span>
+                    </a>
+                </div>
+            </t>
         </li>
     </xpath>
 </template>