[REF] website: convert so_block_align option to owl

task-3850413

Author: agau-odoo

addons/website/static/src/js/editor/snippets.options.js

@@ -4576,6 +4576,11 @@ registerWebsiteOption("block_width_option", {
     selector: ".s_blockquote, .s_text_highlight",
 });
 
+registerWebsiteOption("block_align_option", {
+    template: "website.block_align_option",
+    selector: ".s_alert, .s_card, .s_blockquote, .s_text_highlight",
+});
+
 registerWebsiteOption("vertical_alignment", {
     class: vAlignment,
     template: "website.vertical_alignment_option",

addons/website/static/src/js/editor/snippets.options.xml

@@ -241,6 +241,13 @@
         <WeButton selectClass="'w-100'" name="'so_width_100'">100%</WeButton>
     </WeSelect>
 </t>
+<t t-name="website.block_align_option">
+    <WeButtonGroup title.translate="Alignment" dependencies="'!so_width_100'">
+        <WeButton class="'fa fa-fw fa-align-left'" tooltip.translate="'Left'" selectClass="'me-auto'"/>
+        <WeButton class="'fa fa-fw fa-align-center'" tooltip.translate="'Center'" selectClass="'mx-auto'"/>
+        <WeButton class="'fa fa-fw fa-align-right'" tooltip.translate="'Right'" selectClass="'ms-auto'"/>
+    </WeButtonGroup>
+</t>
 
 <!-- Header - Borders & Shadows -->
 <t t-name="website.HeaderBox">

addons/website/views/snippets/snippets.xml

@@ -443,14 +443,6 @@
 
     <xpath expr="." position="inside">
 
-    <div id="so_block_align" data-selector=".s_alert, .s_card, .s_blockquote, .s_text_highlight">
-        <we-button-group string="Alignment" data-dependencies="!so_width_100">
-            <we-button class="fa fa-fw fa-align-left" title="Left" data-select-class="me-auto"/>
-            <we-button class="fa fa-fw fa-align-center" title="Center" data-select-class="mx-auto"/>
-            <we-button class="fa fa-fw fa-align-right" title="Right" data-select-class="ms-auto"/>
-        </we-button-group>
-    </div>
-
     <!-- Carousel | .s_carousel | .s_quotes_carousel -->
     <!-- Dedicated colorpicker so that there is not 3 level of
          o_colored_level. Use inline-style color for the same reason. -->