MC-3993: Impossible add Slider on Page if it contains block with slider inside

Author: omiroshnichenko

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/_preview.less

@@ -177,7 +177,7 @@
         transition: opacity 200ms, top 200ms, visibility 200ms;
         visibility: hidden;
         width: 100%;
-        z-index: 15;
+        z-index: 20;
     }
 }
 

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

@@ -23,6 +23,7 @@ export default class Preview extends BasePreview {
     public displayingBlockPreview: KnockoutObservable<boolean> = ko.observable(false);
     public loading: KnockoutObservable<boolean> = ko.observable(false);
     public placeholderText: KnockoutObservable<string>;
+    public element: HTMLElement;
     protected messages = {
         NOT_SELECTED: $t("Empty Block"),
         UNKNOWN_ERROR: $t("An unknown error occurred. Please try again."),
@@ -46,10 +47,13 @@ export default class Preview extends BasePreview {
     /**
      * Runs the widget initializer for each configured widget
      */
-    public initializeWidgets() {
-        widgetInitializer({
-            config: Config.getConfig("widgets"),
-        });
+    public initializeWidgets(element: HTMLElement) {
+        if (element) {
+            this.element = element;
+            widgetInitializer({
+                config: Config.getConfig("widgets"),
+            }, element);
+        }
     }
 
     /**
@@ -105,7 +109,7 @@ export default class Preview extends BasePreview {
             if (this.lastRenderedHtml) {
                 this.data.main.html(this.lastRenderedHtml);
                 this.showBlockPreview(true);
-                this.initializeWidgets();
+                this.initializeWidgets(this.element);
             }
         } else {
             this.showBlockPreview(false);
@@ -156,7 +160,7 @@ export default class Preview extends BasePreview {
                 if (response.data.content) {
                     this.showBlockPreview(true);
                     this.data.main.html(response.data.content);
-                    this.initializeWidgets();
+                    this.initializeWidgets(this.element);
                 } else if (response.data.error) {
                     this.showBlockPreview(false);
                     this.placeholderText(response.data.error);

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

@@ -7,7 +7,7 @@ interface WidgetIntializerConfigInterface {
     config: any;
 }
 
-declare function WidgetInitializer(data: WidgetIntializerConfigInterface): void;
+declare function WidgetInitializer(data: WidgetIntializerConfigInterface, contextElement?: HTMLElement): void;
 
 declare module "Magento_PageBuilder/js/widget-initializer" {
     export = WidgetInitializer;

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/widget-intializer.d.ts

@@ -25,10 +25,18 @@ define([
         });
     }
 
-    return function (data) {
+    return function (data, contextElement) {
         _.each(data.config, function (componentConfiguration, elementPath) {
             $(elementPath).each(function (index, element) {
-                initializeWidget(element, componentConfiguration);
+                var $element = $(element);
+
+                if (contextElement) {
+                    $element = $(contextElement).find(element);
+                }
+
+                if ($element.length) {
+                    initializeWidget($element, componentConfiguration);
+                }
             });
         });
     };