magento2/magento2-page-builder#636: Responsive breakpoint switcher - modified fix for the issue on product content type preview rendered via block in cms page

Author: joiecaquicla

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

@@ -75,6 +75,7 @@ export default class Preview extends BasePreview {
             widgetInitializer({
                 config: Config.getConfig("widgets"),
                 breakpoints: Config.getConfig("breakpoints"),
+                currentViewport: Config.getConfig("viewport"),
             }, element);
         }
     }

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

@@ -4,6 +4,7 @@
  */
 
 interface WidgetIntializerConfigInterface {
+    currentViewport: any;
     config: any;
     breakpoints: any;
 }

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

@@ -9,9 +9,8 @@ define([
     'matchMedia',
     'Magento_PageBuilder/js/utils/breakpoints',
     'Magento_PageBuilder/js/events',
-    'Magento_PageBuilder/js/config',
     'slick'
-], function ($, _, mediaCheck, breakpointsUtils, events, pageBuilderConfig) {
+], function ($, _, mediaCheck, breakpointsUtils, events) {
     'use strict';
 
     /**
@@ -59,7 +58,7 @@ define([
         var $element = $(element),
             $carouselElement = $($element.children()),
             stageId = $($element).parents('[data-role="pagebuilder-stage"]').attr('id'),
-            currentViewport = pageBuilderConfig.getConfig("viewport"),
+            currentViewport = config.currentViewport,
             slickConfig = {
                 autoplay: $element.data('autoplay'),
                 autoplaySpeed: $element.data('autoplay-speed') || 0,

app/code/Magento/PageBuilder/view/base/web/js/content-type/products/appearance/carousel/widget.js

@@ -21,11 +21,13 @@ define([
      * @param {HTMLElement} el
      * @param {Array} data
      * @param {Object} breakpoints
+     * @param {Object} currentViewport
      */
-    function initializeWidget(el, data, breakpoints) {
+    function initializeWidget(el, data, breakpoints, currentViewport) {
         _.each(data, function (config, component) {
             config = config || {};
             config.breakpoints = breakpoints;
+            config.currentViewport = currentViewport;
             mage.applyFor(el, config, component);
         });
     }
@@ -42,7 +44,7 @@ define([
                     }
 
                     if ($element.length) {
-                        initializeWidget($element, componentConfiguration, data.breakpoints);
+                        initializeWidget($element, componentConfiguration, data.breakpoints, data.currentViewport);
                     }
                 }
             );