Merge pull request #35 from magento-commerce/imported-magento-magento2-page-builder-716

[Page Builder] Regression fixes

Author: omiroshnichenko

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderStageSection/PageBuilderStageSection.xml

@@ -43,8 +43,8 @@
         <element name="contentTypeContainer" type="button" selector="(//div[contains(@class, &quot;pagebuilder-content-type&quot;) and contains(@class, &quot;pagebuilder-{{arg1}}&quot;)])[{{arg2}}]/descendant::div[contains(@class, &quot;element-children&quot;)]" parameterized="true"/>
         <element name="contentTypeInsideContainerStage" type="button" selector="(//div[contains(@class, &quot;{{arg1}}-container&quot;)])[{{arg2}}]//div[contains(@class,&quot;pagebuilder-content-type-wrapper&quot;)][{{arg3}}]//div[contains(@class,&quot;pagebuilder-{{arg4}}&quot;)][{{arg5}}]" parameterized="true"/>
         <element name="contentTypePreviewInStage" type="button" selector="div.pagebuilder-{{arg1}}.pagebuilder-content-type" parameterized="true"/>
-        <element name="computedHeightOnStage" type="text" selector="return parseInt(window.getComputedStyle(document.querySelector('.pagebuilder-{{arg1}}:nth-of-type({{arg2}})')).height)" parameterized="true"/>
-        <element name="computedWidthOnStage" type="text" selector="return parseInt(window.getComputedStyle(document.querySelector('.pagebuilder-{{arg1}}:nth-of-type({{arg2}})')).width)" parameterized="true"/>
+        <element name="computedHeightOnStage" type="text" selector="return parseInt(window.getComputedStyle(document.querySelectorAll('.pagebuilder-{{arg1}}')[{{arg2}}-1]).height)" parameterized="true"/>
+        <element name="computedWidthOnStage" type="text" selector="return parseInt(window.getComputedStyle(document.querySelectorAll('.pagebuilder-{{arg1}}')[{{arg2}}-1]).width)" parameterized="true"/>
         <element name="uploadImageInput" type="button" selector="//div[contains(@class,'pagebuilder-image-uploader-container')]//input[@name='background_image']"/>
         <element name="onHoverUploadImageButton" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-{{arg1}}')])[{{arg2}}]//label[text()='Upload Image']" parameterized="true"/>
         <element name="onHoverSelectFromGalleryButton" type="button" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-{{arg1}}')])[{{arg2}}]//ul[contains(@class,'pagebuilder-options-links')]//label[text()='Select from Gallery']" parameterized="true"/>

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/column-group/_mobile.less

@@ -10,7 +10,7 @@
     .pagebuilder-content-type {
         .pagebuilder-column-group {
             > .element-children {
-                display: block;
+                flex-wrap: wrap;
             }
         }
 

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

@@ -12,5 +12,5 @@
 }
 
 .mobile-viewport .pagebuilder-mobile-only {
-    display: block !important;
+    display: inline !important;
 }

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/form/element/_mobile.less

@@ -9,9 +9,6 @@
 .admin__fieldset .admin__field.admin__field-min-height-mobile,
 .admin__fieldset .admin__field.admin__field-min-height-mobile-with-notice {
     .admin__field-control._with-tooltip {
-        .admin__control-addon {
-            max-width: inherit;
-        }
 
         .admin__field-tooltip {
             margin-left: 19px;
@@ -69,7 +66,6 @@
 
 .admin__fieldset .admin__field.admin__field-min-height-mobile {
     .admin__field-control._with-tooltip {
-        display: flex;
         width: 17.9rem;
     }
 }

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

@@ -11,6 +11,8 @@
     <div class="pagebuilder-affordance-row pagebuilder-content-type pagebuilder-content-type-affordance"
          ko-style="getStyle(data.inner, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
          event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
+        <div class="pagebuilder-display-label"
+             text="function () { return displayLabel().toUpperCase(); }()"/>
         <div class="pagebuilder-content-type no-system-border type-container pagebuilder-row children-min-height"
              attr="data.inner.attributes"
              ko-style="Object.assign({}, getStyleWithout(data.inner, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight']), {backgroundImage: getBackgroundImage()})"
@@ -37,7 +39,5 @@
                  css="placeholderCss()"
                  translate="'Drag content types or columns here'"/>
         </div>
-        <div class="pagebuilder-display-label"
-             text="function () { return displayLabel().toUpperCase(); }()"/>
     </div>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/editor.js

@@ -8,6 +8,8 @@
 <div class="pagebuilder-affordance-row pagebuilder-content-type pagebuilder-content-type-affordance"
      ko-style="getStyle(data.main, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
+    <div class="pagebuilder-display-label"
+         text="function () { return displayLabel().toUpperCase(); }()"/>
     <div class="pagebuilder-content-type type-container no-system-border pagebuilder-row children-min-height"
          attr="data.main.attributes"
          ko-style="Object.assign({}, getStyleWithout(data.main, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight']), {backgroundImage: getBackgroundImage()})"
@@ -34,6 +36,4 @@
              css="placeholderCss()"
              translate="'Drag content types or columns here'"/>
     </div>
-    <div class="pagebuilder-display-label"
-         text="function () { return displayLabel().toUpperCase(); }()"/>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/contained/preview.html

@@ -8,6 +8,8 @@
 <div class="pagebuilder-affordance-row pagebuilder-content-type pagebuilder-content-type-affordance"
      ko-style="getStyle(data.main, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight'])"
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
+    <div class="pagebuilder-display-label"
+         text="function () { return displayLabel().toUpperCase(); }()"/>
     <div class="pagebuilder-content-type pagebuilder-row type-container no-system-border children-min-height"
          attr="data.main.attributes"
          ko-style="Object.assign({}, getStyleWithout(data.main, ['marginTop', 'marginBottom', 'marginLeft', 'marginRight']), {backgroundImage: getBackgroundImage()})"
@@ -34,6 +36,4 @@
              css="placeholderCss()"
              translate="'Drag content types or columns here'"/>
     </div>
-    <div class="pagebuilder-display-label"
-         text="function () { return displayLabel().toUpperCase(); }()"/>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-bleed/preview.html

@@ -8,6 +8,7 @@ import {ContentTypeConfigAppearanceElementInterface} from "../../content-type-co
 import ConverterPool from "../../converter/converter-pool";
 import {DataObject} from "../../data-store";
 import { replaceWithDataSrc } from "../../utils/directives";
+import {processInlineStyles} from "../../utils/editor";
 import {get} from "../../utils/object";
 
 /**
@@ -41,5 +42,10 @@ export default function generate(
         value = replaceWithDataSrc(value);
     }
 
+    // Process all desktop styles that left unprocessed after migrating from inline styles.
+    if (typeof value === "string") {
+        value = processInlineStyles(value);
+    }
+
     return value;
 }

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/row/full-width/preview.html

@@ -350,6 +350,16 @@ export function createDoubleClickEvent(): Event {
     }
 }
 
+/**
+ * Replace all desktop styles that left unprocessed back to style element to prevent data corruption.
+ */
+export function processInlineStyles(html: string) {
+    const name = Config.getConfig("defaultViewport");
+    const searchPattern =  new RegExp(`data-${name}-style=`, "g");
+
+    return html.replace(searchPattern, "style=");
+}
+
 /**
  * Move the end point of a range to handle tables
  *