[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

@@ -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',

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>