Merge remote-tracking branch 'commerce/develop' into platform-health

Author: xmav

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderBlockSection/BlockOnStageSection.xml

@@ -8,7 +8,7 @@
 <sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 	xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
     <section name="BlockOnStage">
-        <element name="html" type="text" selector="((//div[contains(@class,'pagebuilder-block')])[{{arg1}}]//div[contains(@data-bind,'html: data.main.html')])[{{arg2}}]//div[contains(@class,'placeholder-html-code')]" parameterized="true"/>
+        <element name="html" type="text" selector="((//div[contains(@class,'pagebuilder-block')])[{{arg1}}]//div[contains(@data-bind,'html: dataMainUnsanitizedHtml')])[{{arg2}}]//div[contains(@class,'placeholder-html-code')]" parameterized="true"/>
         <element name="allBlocks" type="text" selector="[data-content-type='block']"/>
         <element name="status" type="text" selector="((//div[contains(@class,'pagebuilder-block')])[{{arg1}}]//span[contains(@class,'placeholder') and text()='{{arg}}'])" parameterized="true"/>
         <element name="deleted" type="text" selector="((//div[contains(@class,'pagebuilder-block')])[{{arg1}}]//span[contains(@class,'placeholder') and contains(text(),'Block with ID: {{arg}} doesn')])" parameterized="true"/>

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

@@ -6,7 +6,7 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <render args="getOptions().template"/>
+    <render args="getOptions().template"></render>
     <div class="pagebuilder-banner-wrapper"
          attr="data.wrapper.attributes"
          ko-style="Object.assign({}, data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
@@ -20,7 +20,7 @@
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style"></div>
         <scope args="getUploader().getUiComponent()">
-            <render/>
+            <render></render>
         </scope>
         <div class="pagebuilder-overlay" css="data.overlay.css" attr="data.overlay.attributes" ko-style="data.overlay.style">
             <div class="pagebuilder-collage-content" event="mousedown: activateEditor">

app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/nesting-link-dialog.js

@@ -6,7 +6,7 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <render args="getOptions().template"/>
+    <render args="getOptions().template"></render>
     <div class="pagebuilder-banner-wrapper"
          attr="data.wrapper.attributes"
          ko-style="Object.assign({}, data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
@@ -20,7 +20,7 @@
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style"></div>
         <scope args="getUploader().getUiComponent()">
-            <render/>
+            <render></render>
         </scope>
         <div class="pagebuilder-overlay" css="data.overlay.css" attr="data.overlay.attributes" ko-style="data.overlay.style">
             <div class="pagebuilder-collage-content" event="mousedown: activateEditor">

app/code/Magento/PageBuilder/view/adminhtml/web/js/utils/nesting-widget-dialog.js

@@ -6,7 +6,7 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <render args="getOptions().template"/>
+    <render args="getOptions().template"></render>
     <div class="pagebuilder-banner-wrapper"
          attr="data.wrapper.attributes"
          ko-style="Object.assign({}, data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
@@ -20,7 +20,7 @@
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style"></div>
         <scope args="getUploader().getUiComponent()">
-            <render/>
+            <render></render>
         </scope>
         <div class="pagebuilder-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css">
             <div class="pagebuilder-collage-content" event="mousedown: activateEditor">

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-centered/preview.html

@@ -6,7 +6,7 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-banner type-nested" attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <render args="getOptions().template" />
+    <render args="getOptions().template" ></render>
     <div class="pagebuilder-banner-wrapper"
          attr="data.wrapper.attributes"
          ko-style="Object.assign({}, data.wrapper.style(), {backgroundImage: getBackgroundImage()})"
@@ -18,9 +18,9 @@
         <div if="data.video_overlay.attributes()['data-video-overlay-color']"
              class="video-overlay"
              attr="data.video_overlay.attributes"
-             ko-style="data.video_overlay.style" />
+             ko-style="data.video_overlay.style" ></div>
         <scope args="getUploader().getUiComponent()">
-            <render />
+            <render ></render>
         </scope>
         <div class="pagebuilder-overlay pagebuilder-poster-overlay" attr="data.overlay.attributes" ko-style="data.overlay.style" css="data.overlay.css" event="mousedown: activateEditor">
             <div class="pagebuilder-poster-content">
@@ -35,7 +35,7 @@
                          event="mousedown: stopEvent, click: activateEditor, dblclick: handleDoubleClick">
                     </div>
                     <div if="isWysiwygSupported()" class="placeholder-text" ifnot="data.content.html" translate="'Edit Banner Text'"></div>
-                    <textarea ifnot="isWysiwygSupported()" class="inline-wysiwyg-textarea" afterRender="initTextarea" event="{keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur, mousedown: stopEvent}" attr="placeholder: $t('Edit Banner Text')"/>
+                    <textarea ifnot="isWysiwygSupported()" class="inline-wysiwyg-textarea" afterRender="initTextarea" event="{keyup: onTextareaKeyUp, focus: onTextareaFocus, blur: onTextareaBlur, mousedown: stopEvent}" attr="placeholder: $t('Edit Banner Text')"></textarea>
                 </div>
                 <a if="data.main.attributes()['data-show-button'] !== 'never'"
                    type="button"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-left/preview.html

@@ -7,17 +7,21 @@
 
 <div class="pagebuilder-content-type pagebuilder-block" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false" css="{'pagebuilder-block-overlay': displayingBlockPreview()}">
     <div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css">
-        <div if="displayingBlockPreview" class="rendered-content" html="data.main.html" afterRender="initializeWidgets"></div>
+        <!-- ko if: displayingBlockPreview -->
+            <!-- ko with: {dataMainUnsanitizedHtml: data.main.html, initializeWidgets: initializeWidgets} -->
+                <div class="rendered-content" html="dataMainUnsanitizedHtml" afterRender="initializeWidgets"></div>
+            <!-- /ko -->
+        <!-- /ko -->
         <div ifnot="displayingBlockPreview" class="pagebuilder-block-placeholder">
-            <span class="placeholder-text" text="placeholderText"/>
+            <span class="placeholder-text" text="placeholderText"></span>
         </div>
     </div>
     <div data-role="spinner"
          class="admin__data-grid-loading-mask"
          if="loading">
         <div class="spinner">
-            <span repeat="8"/>
+            <span repeat="8"></span>
         </div>
     </div>
-    <render args="getOptions().template" />
+    <render args="getOptions().template" ></render>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/banner/collage-right/preview.html

@@ -9,7 +9,7 @@
      ko-style="data.main.style"
      css="Object.assign({focused: $parent.parentContentType.preview.focusedButton() === $index()}, data.main.css())"
      class="pagebuilder-content-type pagebuilder-button-item no-system-border focus-options">
-    <render args="getOptions().template" />
+    <render args="getOptions().template" ></render>
     <a attr="data.link.attributes"
        ko-style="data.link.style"
        css="data.link.css"

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

@@ -6,5 +6,5 @@
 -->
 
 <div data-bind="attr: data.main.attributes, style: data.main.style, css: data.main.css">
-    <render args="masterTemplate" />
+    <render args="masterTemplate" ></render>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/block/default/preview.html

@@ -6,7 +6,7 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-entity pagebuilder-entity-preview pagebuilder-no-blur pagebuilder-live-edit pagebuilder-buttons" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <render args="getOptions().template" />
+    <render args="getOptions().template" ></render>
     <div class="element-children buttons-container" each="contentType.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: contentType.id + '-children' })" ko-style="data.main.style" css="data.main.css" data-bind="sortableChildren: getSortableOptions()">
         <div class="pagebuilder-content-type-wrapper"
              template="{ name: preview.template, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }"

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/button-item/default/preview.html

@@ -6,5 +6,5 @@
 -->
 
 <div data-bind="attr: data.main.attributes, style: data.main.style, css: data.main.css">
-    <render args="masterTemplate" />
+    <render args="masterTemplate" ></render>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/buttons/inline/master.html

@@ -6,7 +6,7 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-entity pagebuilder-entity-preview pagebuilder-no-blur pagebuilder-live-edit pagebuilder-buttons" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <render args="getOptions().template" />
+    <render args="getOptions().template" ></render>
     <div class="element-children buttons-container" each="contentType.getChildren()" attr="Object.assign({}, data.main.attributes(), { id: contentType.id + '-children' })" ko-style="data.main.style" css="data.main.css" data-bind="sortableChildren: getSortableOptions('height', 'pointer')">
         <div class="pagebuilder-content-type-wrapper" template="{ name: preview.template, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }" css="{'pagebuilder-content-type-hidden': !preview.display()}"></div>
     </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/buttons/inline/preview.html

@@ -8,5 +8,5 @@
 <div class="pagebuilder-column-group"
      attr="data.main.attributes"
      style="display: flex;">
-    <render args="masterTemplate"/>
+    <render args="masterTemplate"></render>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/buttons/stacked/master.html

@@ -64,6 +64,6 @@
     <div class="element-children"
          each="$parent.getChildren()"
          afterRender="function (element) { bindInteractions.call($data, element); }">
-        <render args="{name: preview.template, data: preview}"/>
+        <render args="{name: preview.template, data: preview}"></render>
     </div>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/buttons/stacked/preview.html

@@ -9,5 +9,5 @@
      attr="data.main.attributes"
      ko-style="Object.assign(data.container.style(), data.main.style())"
      css="data.main.css">
-    <render args="masterTemplate"/>
+    <render args="masterTemplate"></render>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/column-group/default/master.html

@@ -9,5 +9,5 @@
     <div attr="data.main.attributes" css="data.main.css" ko-style="data.main.style">
         <hr attr="data.line.attributes" css="data.line.css" ko-style="data.line.style" />
     </div>
-    <render args="getOptions().template" />
+    <render args="getOptions().template" ></render>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/column-group/default/preview.html

@@ -6,10 +6,10 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-heading" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <render args="getOptions().template" />
+    <render args="getOptions().template" ></render>
     <div class="pagebuilder-toolbar-container" tabindex="0" event="{ focusin: toolbar.onFocusIn, focusout: toolbar.onFocusOut }">
         <with args="toolbar">
-            <render args="template" />
+            <render args="template" ></render>
         </with>
         <if args="data.main.heading_type() === 'h1'">
             <h1 attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" afterRender="function (element) { afterRender.call($data, element); }" data-bind="liveEdit: { field: 'heading_text', placeholder: $t('Edit Heading Text') }"></h1>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/column/full-height/master.html

@@ -9,5 +9,5 @@
     <div class="placeholder-html-code" if="data.main.html" attr="data.main.attributes" css="data.main.css" ko-style="data.main.style" text="data.main.html"></div>
     <div class="placeholder-html-empty" ifnot="data.main.html" attr="data.main.attributes" ko-style="data.main.style" translate="'Enter HTML, CSS or JavaScript code'" css="data.main.css" >
     </div>
-    <render args="getOptions().template" />
+    <render args="getOptions().template" ></render>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/divider/default/preview.html

@@ -6,21 +6,26 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-image type-nested" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <render args="getOptions().template" />
+    <render args="getOptions().template" ></render>
     <figure attr="data.main.attributes" ko-style="Object.assign({}, data.main.style(), !data.desktop_image.attributes().src ? {} : {borderStyle: 'none'})" css="data.main.css">
         <scope args="getUploader().getUiComponent()">
-            <render />
+            <render ></render>
         </scope>
         <img if="getViewportImageData().attributes().src"
              attr="getViewportImageData().attributes"
              class="preview-image"
              css="getViewportImageData().css"
              ko-style="getViewportImageData().style" />
-        <figcaption if="data.caption.html()"
-                    attr="data.caption.attributes"
-                    css="data.caption.css"
-                    html="data.caption.html"
-                    ko-style="data.caption.style">
+        <!-- ko if: data.caption.html() -->
+        <!-- ko with: data.caption -->
+        <!-- ko with: {attributes: attributes, css: css, dataCaptionUnsanitizedHtml: html, style: style} -->
+        <figcaption attr="attributes"
+                    css="css"
+                    html="dataCaptionUnsanitizedHtml"
+                    ko-style="style">
         </figcaption>
+        <!-- /ko -->
+        <!-- /ko -->
+        <!-- /ko -->
     </figure>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/heading/default/preview.html

@@ -6,7 +6,11 @@
 -->
 
 <div class="pagebuilder-content-type pagebuilder-map" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-    <div visible="!apiKeyValid()" class="google-map-auth-failure-placeholder"><p html="apiKeyErrorMessage"></p></div>
+        <div visible="!apiKeyValid()" class="google-map-auth-failure-placeholder">
+            <!-- ko with: {apiKeyErrorMessageUnsanitizedHtml: apiKeyErrorMessage} -->
+            <p html="apiKeyErrorMessageUnsanitizedHtml"></p>
+            <!-- /ko -->
+        </div>
     <div visible="apiKeyValid" attr="data.main.attributes" css="data.main.css" ko-style="data.main.style" afterRender="renderMap"></div>
-    <render args="getOptions().template" />
+    <render args="getOptions().template" ></render>
 </div>

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

@@ -6,5 +6,5 @@
 -->
 
 <div each="contentType.getChildren()" data-wrapper="true">
-    <render args="{ name: content.template, data: content }" />
+    <render args="{ name: content.template, data: content }" ></render>
 </div>

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

@@ -19,7 +19,7 @@
              css="active: !loading()"
              afterRender="afterRenderDeferred.resolve">
             <with args="rootContainer">
-                <render args="{ name: preview.template, data: preview }" />
+                <render args="{ name: preview.template, data: preview }" ></render>
             </with>
         </div>
     </each>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/map/default/preview.html

@@ -12,5 +12,5 @@
             <span class="placeholder-text" text="placeholderText"></span>
         </div>
     </div>
-    <render args="getOptions().template" />
+    <render args="getOptions().template" ></render>
 </div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/master-collection.html

@@ -15,6 +15,6 @@
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style"></div>
-        <render args="masterTemplate"/>
+        <render args="masterTemplate"></render>
     </div>
 </div>

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

@@ -25,7 +25,7 @@
                  class="video-overlay"
                  attr="data.video_overlay.attributes"
                  ko-style="data.video_overlay.style"></div>
-            <render args="getOptions().template"/>
+            <render args="getOptions().template"></render>
             <div class="element-children content-type-container" each="contentType.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: contentType.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
                 <if args="$parent.isContainer()">
                     <div class="pagebuilder-drop-indicator"></div>

app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/products/grid/preview.html

@@ -12,5 +12,5 @@
          class="video-overlay"
          attr="data.video_overlay.attributes"
          ko-style="data.video_overlay.style"></div>
-    <render args="masterTemplate"/>
+    <render args="masterTemplate"></render>
 </div>

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

@@ -22,7 +22,7 @@
              class="video-overlay"
              attr="data.video_overlay.attributes"
              ko-style="data.video_overlay.style"></div>
-        <render args="getOptions().template"/>
+        <render args="getOptions().template"></render>
         <div class="element-children content-type-container" each="contentType.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: contentType.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
             <if args="$parent.isContainer()">
                 <div class="pagebuilder-drop-indicator"></div>

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

@@ -16,6 +16,6 @@
          attr="data.inner.attributes"
          ko-style="data.inner.style"
          css="data.inner.css">
-        <render args="masterTemplate"/>
+        <render args="masterTemplate"></render>
     </div>
 </div>