From 2ba1ab5fda2b80471eae0d22ff46a9d949f31a7d Mon Sep 17 00:00:00 2001
From: Benoit Socias <bso@odoo.com>
Date: Mon, 7 Aug 2023 13:08:16 +0000
Subject: [PATCH] [FIX] website_blog: prevent edition of blog social media
 links

Steps to reproduce:
- Go to `/blog`.
- Enable "Show Sidebar" in the "Customize" menu.
- Edit the page.
- Click on an icon of the "Follow Us" section of the sidebar.
- Click on the "Link" icon of the editor toolbar.

=> An error popup appears.

In further versions, the link parameters can be edited - but they are
lost upon save.

The social media links sections of the blog and blog post pages is
generated and is not supposed to be editable.

This commits makes these social media links sections non editable.

If a user needs to configure such a content specifically, it can be done
inside the "About Us" section of the sidebar above.
E.g.:
- Deactivate the "Follow Us" section from the "Customize" menu.
- You can use copy/paste to duplicate the existing style of the
"About Us" section if you want.
- Click on the "File / Image" icon of the editor toolbar (or type
"/image" to use the Power Box as of 15.0).
- Select a pictogram.
- Click on the "Shape: Circle" icon of the editor toolbar.
- Select the "Font Color" from the editor toolbar.
- Click on the "Link" icon of the editor toolbar to specify an URL.

opw-3450880

closes odoo/odoo#131058

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
---
 addons/website_blog/static/src/js/website_blog.editor.js | 5 +++++
 addons/website_blog/views/website_blog_components.xml    | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/addons/website_blog/static/src/js/website_blog.editor.js b/addons/website_blog/static/src/js/website_blog.editor.js
index 970092f85014..f64a3c316b43 100644
--- a/addons/website_blog/static/src/js/website_blog.editor.js
+++ b/addons/website_blog/static/src/js/website_blog.editor.js
@@ -72,6 +72,11 @@ if (!$('.website_blog').length) {
 
 const NEW_TAG_PREFIX = 'new-blog-tag-';
 
+// TODO Remove in master.
+for (const el of document.querySelectorAll(".o_wblog_social_links")) {
+    el.classList.add("o_not_editable");
+}
+
 WysiwygMultizone.include({
     custom_events: Object.assign({}, WysiwygMultizone.prototype.custom_events, {
         'set_blog_post_updated_tags': '_onSetBlogPostUpdatedTags',
diff --git a/addons/website_blog/views/website_blog_components.xml b/addons/website_blog/views/website_blog_components.xml
index d5313b61dc74..e43bac60a5d7 100644
--- a/addons/website_blog/views/website_blog_components.xml
+++ b/addons/website_blog/views/website_blog_components.xml
@@ -126,7 +126,7 @@ Options:
     <xpath expr="//div[@id='o_wblog_sidebar']" position="inside">
         <div class="o_wblog_sidebar_block pb-5">
             <h6 class="text-uppercase pb-2 mb-4 border-bottom font-weight-bold">Follow Us</h6>
-            <div class="o_wblog_social_links d-flex flex-wrap mx-n1">
+            <div class="o_wblog_social_links d-flex flex-wrap mx-n1 o_not_editable">
                 <t t-set="classes" t-translation="off">bg-100 border mx-1 mb-2 rounded-circle d-flex align-items-center justify-content-center text-decoration-none</t>
                 <a t-if="website.social_facebook" t-att-href="website.social_facebook" aria-label="Facebook" title="Facebook" t-att-class="classes"><i class="fa fa-facebook-square text-facebook"/></a>
                 <a t-if="website.social_twitter" t-att-href="website.social_twitter" t-att-class="classes"><i class="fa fa-twitter text-twitter" aria-label="Twitter" title="Twitter"/></a>
@@ -218,7 +218,7 @@ Display a sidebar beside the post content.
         <div class="o_wblog_sidebar_block pb-5">
             <h6 class="text-uppercase pb-3 mb-4 border-bottom font-weight-bold">Share this post</h6>
 
-            <div class="o_wblog_social_links d-flex flex-wrap mx-n1">
+            <div class="o_wblog_social_links d-flex flex-wrap mx-n1 o_not_editable">
                 <t t-set="classes" t-translation="off">bg-100 border mx-1 mb-2 rounded-circle d-flex align-items-center justify-content-center text-decoration-none</t>
                 <a href="#" aria-label="Facebook" title="Share on Facebook" t-attf-class="o_facebook #{classes}"><i class="fa fa-facebook-square text-facebook"/></a>
                 <a href="#" aria-label="Twitter" title="Share on Twitter" t-attf-class="o_twitter #{classes}"><i class="fa fa-twitter text-twitter" aria-label="Twitter" title="Twitter"/></a>
-- 
GitLab