MC-4075: Alignment attribute not working as expected for product, map, divider, video

- Changed video to rely on text align for alignment instead of justify content for alignment inside other containers

Author: Hwashiang Yu

app/code/Magento/PageBuilder/Test/Mftf/Data/VideoData.xml

@@ -55,6 +55,6 @@
         <data key="name">Alignment</data>
         <data key="section">advanced</data>
         <data key="fieldName">text_align</data>
-        <data key="value">flex-end</data>
+        <data key="value">right</data>
     </entity>
 </entities>

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

@@ -22,8 +22,8 @@
         <element name="width" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][contains(@style,'max-width: {{arg2}}px;')]" parameterized="true"/>
         <element name="noWidth" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][not(starts-with(@style,'width:')) and not(contains(@style,' width:'))][contains(@class,'pagebuilder-video-wrapper')]" parameterized="true"/>
         <!-- Advanced Configuration -->
-        <element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}]/parent::div[contains(@style, 'justify-content: {{arg2}};')]" parameterized="true"/>
-        <element name="noAlignment" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}]/parent::div[not(contains(@style,'justify-content:'))]" parameterized="true"/>
+        <element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}]/parent::div[contains(@style, 'text-align: {{arg2}};')]" parameterized="true"/>
+        <element name="noAlignment" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}]/parent::div[not(contains(@style,'text-align:'))]" parameterized="true"/>
         <element name="border" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][contains(@style,'border-style: {{arg2}};')]" parameterized="true"/>
         <element name="borderColor" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][contains(@style,'border-color: {{arg2}};')]" parameterized="true"/>
         <element name="noBorderColor" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][not(contains(@style,'border-color:'))]" parameterized="true"/>
@@ -46,8 +46,8 @@
         <element name="width" type="text" selector="(//div[@data-role='video'])[{{arg1}}]//div[@data-element='wrapper'][contains(@style,'max-width: {{arg2}}')]" parameterized="true"/>
         <element name="noWidth" type="text" selector="(//div[@data-role='video']//iframe)[{{arg1}}][not(starts-with(@style,'width:')) and not(contains(@style,' width:'))]" parameterized="true"/>
         <!-- Advanced Configuration -->
-        <element name="alignment" type="text" selector="(//div[@data-role='video'])[{{arg1}}][contains(@style,'justify-content: {{arg2}};')]" parameterized="true"/>
-        <element name="noAlignment" type="text" selector="(//div[@data-role='video'])[{{arg1}}][not(contains(@style,'justify-content'))]" parameterized="true"/>
+        <element name="alignment" type="text" selector="(//div[@data-role='video'])[{{arg1}}][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
+        <element name="noAlignment" type="text" selector="(//div[@data-role='video'])[{{arg1}}][not(contains(@style,'text-align'))]" parameterized="true"/>
         <element name="border" type="text" selector="(//div[@data-role='video'])[{{arg1}}]//div[@data-element='wrapper'][contains(@style,'border-style: {{arg2}};')]" parameterized="true"/>
         <element name="borderColor" type="text" selector="(//div[@data-role='video'])[{{arg1}}]//div[@data-element='wrapper'][contains(@style,'border-color: {{arg2}};')]" parameterized="true"/>
         <element name="noBorderColor" type="text" selector="(//div[@data-role='video'])[{{arg1}}]//div[@data-element='wrapper'][not(contains(@style,'border-color:'))]" parameterized="true"/>

app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/video.xml

@@ -24,7 +24,7 @@
                         reader="Magento_PageBuilder/js/master-format/read/configurable">
                 <elements>
                     <element name="main">
-                        <style name="text_align" source="justify_content"/>
+                        <style name="text_align" source="text_align"/>
                         <style name="display" source="display" converter="Magento_PageBuilder/js/converter/style/display" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
                         <attribute name="name" source="data-role"/>
                         <attribute name="appearance" source="data-appearance"/>

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_video_form.xml

@@ -95,15 +95,4 @@
             </settings>
         </field>
     </fieldset>
-    <fieldset name="advanced">
-        <field name="text_align" formElement="select">
-            <formElements>
-                <select>
-                    <settings>
-                        <options class="Magento\PageBuilder\Model\Source\VideoAlignmentSource"/>
-                    </settings>
-                </select>
-            </formElements>
-        </field>
-    </fieldset>
 </form>

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/video/_default.less

@@ -20,13 +20,11 @@
     }
     div[data-role='video'],
     .pagebuilder-video {
-        display: flex;
-
         > div:first-child,
         .pagebuilder-video-wrapper,
         .pagebuilder-video-container {
-            display: flex;
-            flex-grow: 1;
+            display: inline-block;
+            width: 100%;
         }
         .pagebuilder-video-container {
             padding-top: 56.25%;

app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/video/_default.less

@@ -8,13 +8,10 @@
 //  _____________________________________________
 
 div[data-role='video'] {
-    display: flex;
-
     .pagebuilder-video-wrapper,
     .pagebuilder-video-container {
-        display: flex;
-        flex-grow: 1;
-        height: 100%;
+        display: inline-block;
+        width: 100%;
     }
     .pagebuilder-video-container {
         padding-top: 56.25%;