MC-3610: Remove use of legacy system within slide preview

 - remove uses of getBackgroundStyles() and getPaddingStyles()

Author: cspruiell

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/slide/poster/preview.html

@@ -8,9 +8,10 @@
 <div class="pagebuilder-content-type pagebuilder-slide"
      attr="data.main.attributes"
      css="data.main.css"
+     ko-style="data.main.style"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }">
     <div class="pagebuilder-slide-wrapper"
-         ko-style="Object.assign(data.desktop_image.style(), data.main.style)"
+         ko-style="data.desktop_image.style"
          event="{mouseover: onMouseOverWrapper, mouseout: onMouseOutWrapper}">
         <div class="pagebuilder-poster-overlay"
              attr="data.overlay.attributes"

app/code/Magento/PageBuilder/view/base/pagebuilder/content_type/slide.xml

@@ -30,6 +30,7 @@
                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                         <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
                         <attribute name="name" source="data-role"/>
                         <attribute name="slide_name" source="data-slide-name"/>
                         <attribute name="appearance" source="data-appearance"/>
@@ -45,6 +46,7 @@
                     </element>
                     <element name="overlay">
                         <style name="background_color" source="background_color" converter="Magento_PageBuilder/js/content-type/slide/converter/style/overlay-background-color" persistence_mode="write"/>
+                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                         <attribute name="overlay_color" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color" persistence_mode="read"/>
                         <attribute name="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-transparency" persistence_mode="read"/>
                         <attribute name="virtual_overlay_transparency" storage_key="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color-transparency" persistence_mode="write"/>
@@ -57,8 +59,6 @@
                         <style name="background_position" source="background_position"/>
                         <style name="background_size" source="background_size"/>
                         <style name="background_repeat" source="background_repeat"/>
-                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
-                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                     </element>
                     <element name="mobile_image">
                         <style name="text_align" source="text_align"/>
@@ -68,8 +68,6 @@
                         <style name="background_position" source="background_position"/>
                         <style name="background_size" source="background_size"/>
                         <style name="background_repeat" source="background_repeat"/>
-                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
-                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                     </element>
                     <element name="content">
                         <html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
@@ -104,6 +102,7 @@
                         <style name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                         <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
                         <attribute name="name" source="data-role"/>
                         <attribute name="slide_name" source="data-slide-name"/>
                         <attribute name="appearance" source="data-appearance"/>
@@ -119,6 +118,7 @@
                     </element>
                     <element name="overlay">
                         <style name="background_color" source="background_color" converter="Magento_PageBuilder/js/content-type/slide/converter/style/overlay-background-color" persistence_mode="write"/>
+                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                         <attribute name="overlay_color" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color" persistence_mode="read"/>
                         <attribute name="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-transparency" persistence_mode="read"/>
                         <attribute name="virtual_overlay_transparency" storage_key="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color-transparency" persistence_mode="write"/>
@@ -131,8 +131,6 @@
                         <style name="background_position" source="background_position"/>
                         <style name="background_size" source="background_size"/>
                         <style name="background_repeat" source="background_repeat"/>
-                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
-                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                     </element>
                     <element name="mobile_image">
                         <style name="text_align" source="text_align"/>
@@ -142,8 +140,6 @@
                         <style name="background_position" source="background_position"/>
                         <style name="background_size" source="background_size"/>
                         <style name="background_repeat" source="background_repeat"/>
-                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
-                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                     </element>
                     <element name="content">
                         <html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
@@ -178,6 +174,7 @@
                         <style name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                         <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
                         <attribute name="name" source="data-role"/>
                         <attribute name="slide_name" source="data-slide-name"/>
                         <attribute name="appearance" source="data-appearance"/>
@@ -193,6 +190,7 @@
                     </element>
                     <element name="overlay">
                         <style name="background_color" source="background_color" converter="Magento_PageBuilder/js/content-type/slide/converter/style/overlay-background-color" persistence_mode="write"/>
+                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                         <attribute name="overlay_color" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color" persistence_mode="read"/>
                         <attribute name="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-transparency" persistence_mode="read"/>
                         <attribute name="virtual_overlay_transparency" storage_key="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color-transparency" persistence_mode="write"/>
@@ -205,8 +203,6 @@
                         <style name="background_position" source="background_position"/>
                         <style name="background_size" source="background_size"/>
                         <style name="background_repeat" source="background_repeat"/>
-                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
-                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                     </element>
                     <element name="mobile_image">
                         <style name="text_align" source="text_align"/>
@@ -216,8 +212,6 @@
                         <style name="background_position" source="background_position"/>
                         <style name="background_size" source="background_size"/>
                         <style name="background_repeat" source="background_repeat"/>
-                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
-                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                     </element>
                     <element name="content">
                         <html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>
@@ -253,6 +247,7 @@
                         <style name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
                         <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
                         <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
                         <attribute name="name" source="data-role"/>
                         <attribute name="slide_name" source="data-slide-name"/>
                         <attribute name="appearance" source="data-appearance"/>
@@ -269,6 +264,7 @@
                     <element name="overlay">
                         <style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
                         <style name="background_color" source="background_color" converter="Magento_PageBuilder/js/content-type/slide/converter/style/overlay-background-color" persistence_mode="write"/>
+                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                         <attribute name="overlay_color" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color" persistence_mode="read"/>
                         <attribute name="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-transparency" persistence_mode="read"/>
                         <attribute name="virtual_overlay_transparency" storage_key="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/content-type/slide/converter/attribute/overlay-color-transparency" persistence_mode="write"/>
@@ -281,8 +277,6 @@
                         <style name="background_position" source="background_position"/>
                         <style name="background_size" source="background_size"/>
                         <style name="background_repeat" source="background_repeat"/>
-                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
-                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                     </element>
                     <element name="mobile_image">
                         <style name="text_align" source="text_align"/>
@@ -292,8 +286,6 @@
                         <style name="background_position" source="background_position"/>
                         <style name="background_size" source="background_size"/>
                         <style name="background_repeat" source="background_repeat"/>
-                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/content-type/slide/converter/style/margins"/>
-                        <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/content-type/slide/converter/style/paddings"/>
                     </element>
                     <element name="content">
                         <html name="content" preview_converter="Magento_PageBuilder/js/converter/html/directive"/>