[Story] Developer can style content types output differently per viewport

app/code/Magento/PageBuilder/Model/Dom/Adapter/DocumentInterface.php

@@ -29,6 +29,15 @@ public function __toString(): string;
      */
     public function createDocumentFragment(): DocumentFragmentInterface;
 
+    /**
+     * Create new document element
+     *
+     * @param string $name
+     * @param string $value [optional]
+     * @return ElementInterface
+     */
+    public function createElement(string $name, string $value = null);
+
     /**
      * Returns the first element matching the specified selector.
      *

app/code/Magento/PageBuilder/Model/Dom/Adapter/ElementInterface.php

@@ -7,11 +7,28 @@
 
 namespace Magento\PageBuilder\Model\Dom\Adapter;
 
+use Gt\Dom\Element as GtDomElement;
+
 /**
  * Interface for Element wrappers
  */
 interface ElementInterface
 {
+    /**
+     * Return original element.
+     *
+     * @return GtDomElement
+     */
+    public function getOriginalElement(): GtDomElement;
+
+    /**
+     * Adds new child at the end of the children.
+     *
+     * @param ElementInterface $element
+     * @return ElementInterface
+     */
+    public function appendChild(ElementInterface $element): ElementInterface;
+
     /**
      * Returns true if the element would be selected by the specified selector string; otherwise, returns false.
      *
@@ -45,6 +62,14 @@ public function closest(string $selectors): ?ElementInterface;
      */
     public function getAttribute($name): ?string;
 
+    /**
+     * Removes the Specified Attribute
+     *
+     * @param string $name
+     * @return bool|null
+     */
+    public function removeAttribute($name): ?bool;
+
     /**
      * Sets the value of the specified attribute
      *

app/code/Magento/PageBuilder/Model/Dom/Document.php

@@ -62,6 +62,17 @@ public function createDocumentFragment(): DocumentFragmentInterface
         );
     }
 
+    /**
+     * @inheritDoc
+     */
+    public function createElement(string $name, string $value = null): ElementInterface
+    {
+        return $this->objectManager->create(
+            ElementInterface::class,
+            [ 'element' => $this->document->createElement($name, $value) ]
+        );
+    }
+
     /**
      * @inheritDoc
      */

app/code/Magento/PageBuilder/Model/Dom/Element.php

@@ -41,6 +41,25 @@ public function __construct(
         $this->element = $element;
     }
 
+    /**
+     * @inheritDoc
+     */
+    public function getOriginalElement(): GtDomElement
+    {
+        return $this->element;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function appendChild(ElementInterface $element): ElementInterface
+    {
+        return $this->objectManager->create(
+            ElementInterface::class,
+            [ 'element' => $this->element->appendChild($element->getOriginalElement()) ]
+        );
+    }
+
     /**
      * @inheritDoc
      */
@@ -79,6 +98,14 @@ public function getAttribute($name): ?string
         return $this->element->getAttribute($name);
     }
 
+    /**
+     * @inheritDoc
+     */
+    public function removeAttribute($name): ?bool
+    {
+        return $this->element->removeAttribute($name);
+    }
+
     /**
      * @inheritDoc
      */

app/code/Magento/PageBuilder/Setup/Converters/PageBuilderStripStyles.php

@@ -0,0 +1,105 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+declare(strict_types = 1);
+
+namespace Magento\PageBuilder\Setup\Converters;
+
+use Magento\Framework\DB\DataConverter\DataConverterInterface;
+use Magento\PageBuilder\Model\Dom\Adapter\ElementInterface;
+use Magento\PageBuilder\Model\Dom\HtmlDocumentFactory;
+
+/**
+ * Convert Inline Styles to Internal
+ */
+class PageBuilderStripStyles implements DataConverterInterface
+{
+    private const BODY_ID = 'html-body';
+    private const DATA_ATTRIBUTE = 'data-pb-style';
+    private const QUERY_SELECTOR = '[style]';
+
+    /**
+     * @var HtmlDocumentFactory
+     */
+    private $htmlDocumentFactory;
+
+    /**
+     * @param HtmlDocumentFactory $htmlDocumentFactory
+     */
+    public function __construct(HtmlDocumentFactory $htmlDocumentFactory)
+    {
+        $this->htmlDocumentFactory = $htmlDocumentFactory;
+    }
+
+    /**
+     * Generates `mageUtils.uniqueid()` Naming Convention
+     *
+     * @return string
+     */
+    private function generateDataAttribute(): string
+    {
+        return \strtoupper(\uniqid());
+    }
+
+    /**
+     * Converts Inline Styles to Internal Styles
+     *
+     * @param array $styleMap
+     * @return string
+     */
+    private function generateInternalStyles(array $styleMap): string
+    {
+        $output = '';
+
+        foreach ($styleMap as $selector => $styles) {
+            $output .= '#' . self::BODY_ID . ' [' . self::DATA_ATTRIBUTE . '="' . $selector . '"]';
+            $output .= '{' . $styles . '}';
+        }
+
+        return $output;
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function convert($value): string
+    {
+        $document = $this->htmlDocumentFactory->create([ 'document' => $value ]);
+        $body = $document->querySelector('body');
+        $nodes = $document->querySelectorAll(self::QUERY_SELECTOR);
+
+        if ($nodes->count() > 0) {
+            $styleMap = [];
+
+            foreach ($nodes as $node) {
+                /* @var ElementInterface $node */
+                $styleAttr = $node->getAttribute('style');
+
+                if ($styleAttr) {
+                    $generatedDataAttribute = $this->generateDataAttribute();
+                    $node->setAttribute(self::DATA_ATTRIBUTE, $generatedDataAttribute);
+                    $styleMap[$generatedDataAttribute] = $styleAttr; // Amend Array for Internal Style Generation
+                    $node->removeAttribute('style');
+                }
+            }
+
+            if (count($styleMap) > 0) {
+                // Style Block Generation
+                $style = $document->createElement(
+                    'style',
+                    $this->generateInternalStyles($styleMap)
+                );
+                $body->appendChild($style);
+
+                return $document->stripHtmlWrapperTags();
+            } else {
+                return $value;
+            }
+        }
+
+        return $value;
+    }
+}

app/code/Magento/PageBuilder/Setup/Patch/Data/UpgradePageBuilderStripStyles.php

@@ -0,0 +1,62 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+declare(strict_types = 1);
+
+namespace Magento\PageBuilder\Setup\Patch\Data;
+
+use Magento\Framework\DB\FieldDataConversionException;
+use Magento\Framework\Setup\Patch\DataPatchInterface;
+use Magento\PageBuilder\Setup\Converters\PageBuilderStripStyles;
+use Magento\PageBuilder\Setup\UpgradeContentHelper;
+
+/**
+ * Patch Upgrade Mechanism for Converting Inline Styles to Internal
+ */
+class UpgradePageBuilderStripStyles implements DataPatchInterface
+{
+    /**
+     * @var UpgradeContentHelper
+     */
+    private $helper;
+
+    /**
+     * @param UpgradeContentHelper $helper
+     */
+    public function __construct(UpgradeContentHelper $helper)
+    {
+        $this->helper = $helper;
+    }
+
+    /**
+     * Upgrade
+     *
+     * @return void
+     * @throws FieldDataConversionException
+     */
+    public function apply(): void
+    {
+        $this->helper->upgrade([
+            PageBuilderStripStyles::class
+        ]);
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public function getAliases(): array
+    {
+        return [];
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public static function getDependencies(): array
+    {
+        return [];
+    }
+}

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/AdvancedConfigurationActionGroup/ValidateAdvancedConfigurationAllOptionsActionGroup.xml

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+    <actionGroup name="ValidateAdvancedConfigurationAllOptionsActionGroup">
+        <annotations>
+            <description value="Validates styles from Advanced configuration in content type settings"/>
+        </annotations>
+        <arguments>
+            <argument name="page" defaultValue=""/>
+            <argument name="alignment" defaultValue="PageBuilderAdvancedAlignmentPropertyDefault"/>
+            <argument name="border" defaultValue="PageBuilderAdvancedBorderPropertyNone"/>
+            <argument name="borderColor" defaultValue=""/>
+            <argument name="borderWidth" defaultValue="PageBuilderAdvancedBorderWidthPropertyDefault"/>
+            <argument name="borderRadius" defaultValue="PageBuilderAdvancedBorderRadiusDefaultProperty"/>
+            <argument name="cssClasses" defaultValue=""/>
+            <argument name="margin" defaultValue="PageBuilderMarginsPropertyDefault"/>
+            <argument name="padding" defaultValue="PageBuilderPaddingPropertyDefault"/>
+            <argument name="index" defaultValue="1" type="string"/>
+        </arguments>
+        <waitForElementVisible selector="{{page.base(index)}}" stepKey="waitForElementVisible"/>
+        <executeJS function="return window.getComputedStyle(document.evaluate('{{page.advancedConfigurationPath(index)}}', document.body).iterateNext()).textAlign" stepKey="grabAlignmentValue"/>
+        <assertEquals stepKey="assertAlignment">
+            <expectedResult type="string">{{alignment.value}}</expectedResult>
+            <actualResult type="variable">grabAlignmentValue</actualResult>
+        </assertEquals>
+        <executeJS function="return window.getComputedStyle(document.evaluate('{{page.advancedConfigurationPath(index)}}', document.body).iterateNext()).borderStyle" stepKey="grabBorderStyleValue"/>
+        <assertEquals stepKey="assertBorderStyle">
+            <expectedResult type="string">{{border.value}}</expectedResult>
+            <actualResult type="variable">grabBorderStyleValue</actualResult>
+        </assertEquals>
+        <executeJS function="return window.getComputedStyle(document.evaluate('{{page.advancedConfigurationPath(index)}}', document.body).iterateNext()).borderColor" stepKey="grabBorderColorValue"/>
+        <assertEquals stepKey="assertBorderColor">
+            <expectedResult type="string">{{borderColor.rgb}}</expectedResult>
+            <actualResult type="variable">grabBorderColorValue</actualResult>
+        </assertEquals>
+        <executeJS function="return window.getComputedStyle(document.evaluate('{{page.advancedConfigurationPath(index)}}', document.body).iterateNext()).borderWidth.replace(&quot;px&quot;, &quot;&quot;)" stepKey="grabBorderWidthValue"/>
+        <assertEquals stepKey="assertBorderWidth">
+            <expectedResult type="string">{{borderWidth.value}}</expectedResult>
+            <actualResult type="variable">grabBorderWidthValue</actualResult>
+        </assertEquals>
+        <executeJS function="return window.getComputedStyle(document.evaluate('{{page.advancedConfigurationPath(index)}}', document.body).iterateNext()).borderRadius.replace(/px/g, &quot;&quot;)" stepKey="grabBorderRadiusValue"/>
+        <assertEquals stepKey="assertBorderRadius">
+            <expectedResult type="string">{{borderRadius.value}}</expectedResult>
+            <actualResult type="variable">grabBorderRadiusValue</actualResult>
+        </assertEquals>
+        <waitForElementVisible selector="{{page.cssClasses(index, cssClasses.value)}}" stepKey="waitForCSSClassesVisible"/>
+        <executeJS function="return window.getComputedStyle(document.evaluate('{{page.advancedConfigurationPath(index)}}', document.body).iterateNext()).margin.replace(/px/g, &quot;&quot;)" stepKey="grabMarginValue"/>
+        <assertEquals stepKey="assertMargin">
+            <expectedResult type="string">{{margin.value}}</expectedResult>
+            <actualResult type="variable">grabMarginValue</actualResult>
+        </assertEquals>
+        <executeJS function="return window.getComputedStyle(document.evaluate('{{page.advancedConfigurationPath(index)}}', document.body).iterateNext()).padding.replace(/px/g, &quot;&quot;)" stepKey="grabPaddingValue"/>
+        <assertEquals stepKey="assertPadding">
+            <expectedResult type="string">{{padding.value}}</expectedResult>
+            <actualResult type="variable">grabPaddingValue</actualResult>
+        </assertEquals>
+    </actionGroup>
+</actionGroups>

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/AdvancedConfigurationActionGroup/ValidateAdvancedConfigurationNotSetActionGroup.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+    xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+    <actionGroup name="ValidateAdvancedConfigurationNotSetActionGroup" extends="ValidateAdvancedConfigurationWithAllUpdatedNotVisibleActionGroup">
+        <annotations>
+            <description value="Validates Advanced configuration was not set"/>
+        </annotations>
+        <waitForElementVisible selector="{{page.noCssClasses(index)}}" stepKey="waitForCSSClasses"/>
+        <remove keyForRemoval="dontSeeCSSClasses"/>
+    </actionGroup>
+</actionGroups>

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/AdvancedConfigurationActionGroup/ValidateAdvancedConfigurationWithAlignmentActionGroup.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+              xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+    <actionGroup name="ValidateAdvancedConfigurationWithAlignmentActionGroup" extends="ValidateAdvancedConfigurationAllOptionsActionGroup">
+        <annotations>
+            <description value="Validates styles from Advanced configuration in without border and css classes"/>
+        </annotations>
+        <executeJS function="return window.getComputedStyle(document.evaluate('{{page.advancedConfigurationPath(index)}}', document.body).iterateNext()).color" stepKey="grabColorValue" after="grabBorderColorValue"/>
+        <remove keyForRemoval="assertBorderColor"/>
+        <assertEquals stepKey="assertNoBorderColor" after="grabColorValue">
+            <expectedResult type="variable">grabBorderColorValue</expectedResult>
+            <actualResult type="variable">grabColorValue</actualResult>
+        </assertEquals>
+        <remove keyForRemoval="waitForCSSClassesVisible"/>
+        <waitForElementVisible selector="{{page.noCssClasses(index)}}" stepKey="waitForNoCSSClassesVisible" after="grabBorderRadiusValue"/>
+    </actionGroup>
+</actionGroups>