[REF] website: convert so_width common options to owl

task-3850413

Author: agau-odoo

addons/website/__manifest__.py

@@ -243,6 +243,7 @@
             'website/static/src/js/editor/snippets.options.xml',
             'website/static/src/js/editor/snippets.options.legacy.js',
             'website/static/src/js/editor/snippets.registry.js',
+            'website/static/src/js/editor/options/common/*',
             'website/static/src/snippets/s_facebook_page/options.js',
             'website/static/src/snippets/s_facebook_page/options.xml',
             'website/static/src/snippets/s_image/options.js',

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

@@ -4571,6 +4571,11 @@ registerWebsiteOption("horizontal_alignment", {
     selector: ".s_share, .s_text_highlight, .s_social_media",
 });
 
+registerWebsiteOption("block_width_option", {
+    template: "website.block_width_option",
+    selector: ".s_alert, .s_blockquote, .s_text_highlight",
+});
+
 registerWebsiteOption("vertical_alignment", {
     class: vAlignment,
     template: "website.vertical_alignment_option",

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

@@ -233,6 +233,14 @@
         <WeButton class="'fa fa-fw fa-align-right'" tooltip.translate="Right" selectClass="'text-end'"/>
     </WeButtonGroup>
 </t>
+<t t-name="website.block_width_option">
+    <WeSelect title.translate="Width">
+        <WeButton selectClass="'w-25'">25%</WeButton>
+        <WeButton selectClass="'w-50'">50%</WeButton>
+        <WeButton selectClass="'w-75'">75%</WeButton>
+        <WeButton selectClass="'w-100'" name="'so_width_100'">100%</WeButton>
+    </WeSelect>
+</t>
 
 <!-- Header - Borders & Shadows -->
 <t t-name="website.HeaderBox">

addons/website/views/snippets/snippets.xml

@@ -443,15 +443,6 @@
 
     <xpath expr="." position="inside">
 
-    <div id="so_width" data-selector=".s_alert, .s_blockquote, .s_text_highlight">
-        <we-select string="Width">
-            <we-button data-select-class="w-25">25%</we-button>
-            <we-button data-select-class="w-50">50%</we-button>
-            <we-button data-select-class="w-75">75%</we-button>
-            <we-button data-select-class="w-100" data-name="so_width_100">100%</we-button>
-        </we-select>
-    </div>
-
     <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"/>