Merge branch 'viewport-switcher' of github.com:magento/magento2-page-builder into 637-form-field-viewport-scope

 Conflicts:
	app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/observable-updater.js

Author: omiroshnichenko

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/block/preview.js

@@ -235,7 +235,7 @@ export default class Preview extends BasePreview {
 
         if (elements.length && styleBlock.innerText.length) {
             document.body.append(styleBlock);
-            content = document.body.innerHTML;
+            content = document.head.innerHTML + document.body.innerHTML;
         }
 
         return content;

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slide/preview.js

@@ -101,18 +101,7 @@ export default class Preview extends BasePreview {
     private buildJarallax = _.debounce(() => {
         // Destroy all instances of the plugin prior
         try {
-            // store/apply correct style after destroying, as jarallax incorrectly overrides it with stale value
-            const style = this.wrapper.getAttribute("style") ||
-                this.wrapper.getAttribute("data-jarallax-original-styles");
-            const backgroundImage = this.getBackgroundImage();
             jarallax(this.wrapper, "destroy");
-            this.wrapper.setAttribute("style", style);
-            if (this.contentType.dataStore.get("background_type") as string !== "video" &&
-                this.wrapper.style.backgroundImage !== backgroundImage &&
-                backgroundImage !== "none"
-            ) {
-                this.wrapper.style.backgroundImage = backgroundImage;
-            }
         } catch (e) {
             // Failure of destroying is acceptable
         }

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/slider/preview.js

@@ -126,6 +126,12 @@ export default class Preview extends PreviewCollection {
                         `stage:${this.contentType.stageId}:fullScreenModeChangeAfter`,
                         this.onColumnResize.bind(this, [true]),
                     );
+                    events.on(`stage:${this.contentType.stageId}:viewportChangeAfter`, () => {
+                        if (this.element) {
+                            $(this.element).slick("setPosition");
+                            this.checkWidth();
+                        }
+                    });
                 },
                 () => $(element).find(".pagebuilder-slide").length === expectedChildren,
             );

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -267,6 +267,10 @@ export default class PageBuilder implements PageBuilderInterface {
             viewport,
             previousViewport,
         });
+        events.trigger(`stage:viewportChangeAfter`, {
+            viewport,
+            previousViewport,
+        });
     }
 
     /**

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/block/preview.ts

@@ -64,7 +64,6 @@ define([
     return function (config, element) {
         var $element = $(element),
             $carouselElement = $($element.children()),
-            stageId = $($element).parents('[data-role="pagebuilder-stage"]').attr('id'),
             currentViewport = config.currentViewport,
             currentBreakpoint = config.breakpoints[currentViewport],
             slickConfig = {
@@ -97,7 +96,7 @@ define([
             }
         });
 
-        events.on('stage:' + stageId + ':viewportChangeAfter', function (args) {
+        events.on('stage:viewportChangeAfter', function (args) {
             var breakpoint = config.breakpoints[args.viewport];
 
             initSlider($element, slickConfig, breakpoint);

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slide/preview.ts

@@ -35,5 +35,6 @@ define([
                 $element.slick('setPosition');
             }
         });
+        events.on('stage:viewportChangeAfter', $element.slick.bind($element, 'setPosition'));
     };
 });