Merge branch 'MC-930-Row-Appearances' into cms-team-1-delivery

Author: davemacaulay

app/code/Magento/PageBuilder/Setup/DataConverter/Renderer/Row.php

@@ -34,53 +34,48 @@ public function render(array $itemData, array $additionalData = []) : string
         $appearance = (isset($formData['template'])
             && $formData['template'] === 'full-width.phtml') ? 'full-width' : 'contained';
 
-        // Handle adding the wrapper element attributes when using the contained appearance
-        $rootElementAttributes = [];
-        if ($appearance === 'contained') {
-            $rootElementAttributes = [
-                'data-element' => 'main',
-                'class' => $itemData['formData']['css_classes'] ?? '',
-            ];
-        } elseif ($appearance === 'full-width') {
-            $rootElementAttributes = [
-                'data-element' => 'main',
-                'data-role' => 'row',
-                'data-appearance' => 'full-width',
-                'class' => $itemData['formData']['css_classes'] ?? '',
-            ];
-        }
-
         $style = $this->styleExtractor->extractStyle($formData);
-        if ($style) {
-            $rootElementAttributes['style'] = $style;
-        }
 
         $childrenHtml = (isset($additionalData['children']) ? $additionalData['children'] : '');
 
-        // Wrap the children when the layout is full width
         if ($appearance === 'full-width') {
-            $childrenHtml = '<div class="row-full-width-inner" data-element="inner">' . $childrenHtml . '</div>';
+            return $this->renderElementWithAttributes(
+                [
+                    'data-element' => 'main',
+                    'data-role' => 'row',
+                    'data-appearance' => 'full-width',
+                    'class' => $itemData['formData']['css_classes'] ?? '',
+                    'style' => $style ?? null
+                ],
+                $this->renderElementWithAttributes(
+                    [
+                        'data-element' => 'inner',
+                        'class' => 'row-full-width-inner',
+                    ],
+                    $childrenHtml
+                )
+            );
         }
 
-        $rootElementHtml = $this->renderElementWithAttributes(
-            $rootElementAttributes,
-            $childrenHtml
-        );
-
-        // Wrap the root element in our wrapper for contained appearances
         if ($appearance === 'contained') {
             return $this->renderElementWithAttributes(
                 [
-                    'data-element' => 'wrapper',
+                    'data-element' => 'main',
                     'data-role' => 'row',
                     'data-appearance' => 'contained',
-                    'class' => 'row-contained',
                 ],
-                $rootElementHtml
+                $this->renderElementWithAttributes(
+                    [
+                        'data-element' => 'inner',
+                        'class' => $itemData['formData']['css_classes'] ?? '',
+                        'style' => $style ?? null
+                    ],
+                    $childrenHtml
+                )
             );
         }
 
-        return $rootElementHtml;
+        return '';
     }
 
     /**
@@ -95,7 +90,9 @@ private function renderElementWithAttributes(array $attributes, string $children
         $rootElementHtml = '<div';
         foreach ($attributes as $attributeName => $attributeValue) {
             $attributeValue = trim($attributeValue);
-            $rootElementHtml .= $attributeValue ? " $attributeName=\"$attributeValue\"" : '';
+            if ($attributeValue) {
+                $rootElementHtml .= $attributeValue ? " $attributeName=\"$attributeValue\"" : '';
+            }
         }
         $rootElementHtml .= '>' . $childrenHtml . '</div>';
         return $rootElementHtml;

app/code/Magento/PageBuilder/docs/images/row-appearance-explained.png

@@ -60,7 +60,7 @@ PageBuilder uses XHTML with inline styles and data attributes as the master form
 
 ## Row
 
-#### Contained:
+Contained:
 ```
 <div class="row-contained-wrapper" data-element="wrapper" data-role="row" data-appearance="contained">
     <div style="..."></div>
@@ -75,21 +75,21 @@ PageBuilder uses XHTML with inline styles and data attributes as the master form
 ### main element
 
 Attributes
-4. data-enable-parallax [1, 0]
-5. data-parallax-speed [0-1]
-6. data-background-color-format [hex, rgb, hsl, hsv, name, none]
-7. class
+1. data-enable-parallax [1, 0]
+2. data-parallax-speed [0-1]
+3. data-background-color-format [hex, rgb, hsl, hsv, name, none]
+4. class
 
-#### Full Width:
+Full Width:
 ```
 <div data-element="main" data-role="row" data-appearance="contained" style="...">
     <div data-element="inner" class="row-full-width-inner"></div>
 </div>
 ```
 
-#### Full Bleed:
+Full Bleed:
 ```
-<div data-element="main" data-role="row" data-appearance="contained" style="..."></div>
+<div data-element="main" data-role="row" data-appearance="full-bleed" style="..."></div>
 ```
 
 ### main element

app/code/Magento/PageBuilder/docs/images/row-appearance.png

@@ -5,12 +5,12 @@
  */
 -->
 
-<div attr="data.wrapper.attributes"
-     ko-style="data.wrapper.style"
-     css="data.wrapper.css">
-    <div attr="data.main.attributes"
-         ko-style="Object.assign(data.container.style(), data.main.style())"
-         css="data.main.css">
+<div attr="data.main.attributes"
+     ko-style="data.main.style"
+     css="data.main.css">
+    <div attr="data.inner.attributes"
+         ko-style="Object.assign(data.container.style(), data.inner.style())"
+         css="data.inner.css">
         <render args="renderChildTemplate"/>
     </div>
 </div>

app/code/Magento/PageBuilder/docs/master-format.md

@@ -5,13 +5,13 @@
  */
 -->
 
-<div attr="data.wrapper.attributes"
-     ko-style="data.wrapper.style"
-     css="data.wrapper.css">
+<div attr="data.main.attributes"
+     ko-style="data.main.style"
+     css="data.main.css">
     <div class="pagebuilder-content-type type-container pagebuilder-row children-min-height"
-         attr="data.main.attributes"
-         ko-style="data.main.style"
-         css="Object.assign(data.main.css(), {'empty-container': parent.children().length == 0, 'jarallax': data.main.attributes()['data-enable-parallax'] == 1})"
+         attr="data.inner.attributes"
+         ko-style="data.inner.style"
+         css="Object.assign(data.inner.css(), {'empty-container': parent.children().length == 0, 'jarallax': data.inner.attributes()['data-enable-parallax'] == 1})"
          event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false"
          afterRender="initParallax">
         <render args="getOptions().template"/>

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

@@ -31,13 +31,13 @@
                             reader="Magento_PageBuilder/js/master-format/read/configurable">
                     <data_mapping>
                         <elements>
-                            <element name="wrapper">
+                            <element name="main">
                                 <attributes>
                                     <attribute name="name" source="data-role"/>
                                     <attribute name="appearance" source="data-appearance"/>
                                 </attributes>
                             </element>
-                            <element name="main">
+                            <element name="inner">
                                 <style_properties>
                                     <property name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
                                     <property name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>

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

@@ -1 +1 @@
-<div data-element="wrapper" data-role="row" data-appearance="contained" class="row-contained"><div data-element="main"><div data-element="main" data-role="accordion" data-appearance="default" data-mage-init="{&quot;accordion&quot;:{&quot;active&quot;:[0],&quot;collapsibleElement&quot;:&quot;[data-collapsible=true]&quot;,&quot;content&quot;:&quot;[data-content=true]&quot;}}" class="pagebuilder-accordion one two"><div data-collapsible="true" class="accordion-collapsible" data-open-on-load="0"><div data-role="trigger"><span>Accordion Title</span></div></div><div data-content="true" class="accordion-content"><p>Accordion Contents</p></div></div></div></div>
+<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="accordion" data-appearance="default" data-mage-init="{&quot;accordion&quot;:{&quot;active&quot;:[0],&quot;collapsibleElement&quot;:&quot;[data-collapsible=true]&quot;,&quot;content&quot;:&quot;[data-content=true]&quot;}}" class="pagebuilder-accordion one two"><div data-collapsible="true" class="accordion-collapsible" data-open-on-load="0"><div data-role="trigger"><span>Accordion Title</span></div></div><div data-content="true" class="accordion-content"><p>Accordion Contents</p></div></div></div></div>

app/code/Magento/PageBuilder/view/base/pagebuilder/content_type/row.xml

@@ -1 +1 @@
-<div data-element="wrapper" data-role="row" data-appearance="contained" class="row-contained"><div data-element="main"><div data-element="main" data-role="accordion" data-appearance="default" data-mage-init="{&quot;accordion&quot;:{&quot;active&quot;:[1],&quot;collapsibleElement&quot;:&quot;[data-collapsible=true]&quot;,&quot;content&quot;:&quot;[data-content=true]&quot;}}" class="pagebuilder-accordion one two"><div data-collapsible="true" class="accordion-collapsible" data-open-on-load="0"><div data-role="trigger"><span>Title 1</span></div></div><div data-content="true" class="accordion-content"><p>Content 1</p></div><div data-collapsible="true" class="accordion-collapsible" data-open-on-load="1"><div data-role="trigger"><span>Title 2</span></div></div><div data-content="true" class="accordion-content"><p>Content 2</p></div></div></div></div>
+<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="accordion" data-appearance="default" data-mage-init="{&quot;accordion&quot;:{&quot;active&quot;:[1],&quot;collapsibleElement&quot;:&quot;[data-collapsible=true]&quot;,&quot;content&quot;:&quot;[data-content=true]&quot;}}" class="pagebuilder-accordion one two"><div data-collapsible="true" class="accordion-collapsible" data-open-on-load="0"><div data-role="trigger"><span>Title 1</span></div></div><div data-content="true" class="accordion-content"><p>Content 1</p></div><div data-collapsible="true" class="accordion-collapsible" data-open-on-load="1"><div data-role="trigger"><span>Title 2</span></div></div><div data-content="true" class="accordion-content"><p>Content 2</p></div></div></div></div>

dev/tests/integration/testsuite/Magento/PageBuilder/_files/accordions.html

@@ -1 +1 @@
-<div data-element="wrapper" data-role="row" data-appearance="contained" class="row-contained"><div data-element="main"><div data-element="main" data-role="slider" data-appearance="default" data-autoplay="0" data-autoplay-speed="0" data-fade="0" data-is-infinite="0" data-show-arrows="0" data-show-dots="0" class="one two pagebuilder-slider" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-element="main" data-role="slide" data-appearance="poster" class="one two" style="margin: 2px 3px 4px 1px;"><a data-element="link" href="http://domain.com/"><div data-element="mobile_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-only" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent" style="padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div><button data-element="button" type="button" class="pagebuilder-slide-button pagebuilder-button-primary" style="opacity: 1; visibility: visible;">Domain</button></div></div></div><div data-element="desktop_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent" style="padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div><button data-element="button" type="button" class="pagebuilder-slide-button pagebuilder-button-primary" style="opacity: 1; visibility: visible;">Domain</button></div></div></div></a></div></div></div></div>
+<div data-element="main" data-role="row" data-appearance="contained"><div data-element="inner"><div data-element="main" data-role="slider" data-appearance="default" data-autoplay="0" data-autoplay-speed="0" data-fade="0" data-is-infinite="0" data-show-arrows="0" data-show-dots="0" class="one two pagebuilder-slider" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-element="main" data-role="slide" data-appearance="poster" class="one two" style="margin: 2px 3px 4px 1px;"><a data-element="link" href="http://domain.com/"><div data-element="mobile_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-only" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent" style="padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div><button data-element="button" type="button" class="pagebuilder-slide-button pagebuilder-button-primary" style="opacity: 1; visibility: visible;">Domain</button></div></div></div><div data-element="desktop_image" class="pagebuilder-slide-wrapper pagebuilder-mobile-hidden" style="text-align: left; margin: 2px 3px 4px 1px; padding: 6px 7px 8px 5px;"><div data-element="overlay" class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="transparent" style="padding: 6px 7px 8px 5px;"><div class="pagebuilder-poster-content"><div data-element="content"><h3>Slide title</h3><div><p>Slide <strong>content</strong></p></div></div><button data-element="button" type="button" class="pagebuilder-slide-button pagebuilder-button-primary" style="opacity: 1; visibility: visible;">Domain</button></div></div></div></a></div></div></div></div>