[IMP] website, web_editor: relayout theme options

This commit reorganizes the theme options to make them easier to find.
It also adds the following options:
- 'Font size' for each of the six headings
- 'Font (family)' for each of the six headings
- 'Margins' (top & bottom) for paragraph & the 6 headings
- 'Line Height' for paragraph & the 6 headings
- Harmonize buttons options with the custom button ones

task-3140991

Part-of: odoo/odoo#111621

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

@@ -1228,15 +1228,20 @@ const InputUserValueWidget = UnitUserValueWidget.extend({
         this.inputEl.setAttribute('type', 'text');
         this.inputEl.setAttribute('autocomplete', 'chrome-off');
         this.inputEl.setAttribute('placeholder', this.el.getAttribute('placeholder') || '');
-        this.inputEl.classList.toggle('text-start', !unit && !step);
-        this.inputEl.classList.toggle('text-end', !!unit || !!step);
+        const useNumberAlignment = !!step || !!unit || !!this.el.dataset.fakeUnit || !!this.el.dataset.hideUnit;
+        this.inputEl.classList.toggle('text-start', !useNumberAlignment);
+        this.inputEl.classList.toggle('text-end', useNumberAlignment);
         this.containerEl.appendChild(this.inputEl);
 
-        var unitEl = document.createElement('span');
-        unitEl.textContent = unit;
-        this.containerEl.appendChild(unitEl);
-        if (unit.length > 3) {
-            this.el.classList.add('o_we_large');
+        const showUnit = (!!unit || !!this.el.dataset.fakeUnit) && !this.el.dataset.hideUnit;
+        if (showUnit) {
+            var unitEl = document.createElement('span');
+            const unitText = this.el.dataset.fakeUnit || unit;
+            unitEl.textContent = unitText;
+            this.containerEl.appendChild(unitEl);
+            if (unitText.length > 3) {
+                this.el.classList.add('o_we_large');
+            }
         }
     },
 

addons/web_editor/static/src/scss/wysiwyg_snippets.scss

@@ -1892,6 +1892,9 @@
     border-width: 4px;
     border-bottom: none !important;
 }
+we-select.o_we_border_preview_aligned_select {
+    width: $o-we-sidebar-content-field-input-max-width;
+}
 #oe_snippets .colorpicker {
     $-wb-txt: $o-we-sidebar-content-field-colorpicker-dropdown-color;