Skip to content

Commit 56d02f9

Browse files
committed
Merge remote-tracking branch 'remotes/origin/MC-5025-margins' into cms-team-1-delivery
2 parents 555b0a5 + f1df3fd commit 56d02f9

File tree

20 files changed

+365
-300
lines changed

20 files changed

+365
-300
lines changed

app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ElementPositioningActionGroup.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
-->
88

99
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
10-
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
10+
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
1111
<!-- Element Position -->
1212
<actionGroup name="validatePositionRightWithinContainer">
1313
<arguments>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -345,6 +345,16 @@
345345
<data key="marginBottom">1</data>
346346
<data key="marginLeft">1</data>
347347
</entity>
348+
<entity name="PageBuilderMarginsProperty_50" type="pagebuilder_margins_property">
349+
<data key="name">Margins and Padding</data>
350+
<data key="section">advanced</data>
351+
<data key="fieldName">margins_and_padding</data>
352+
<data key="value">50</data>
353+
<data key="marginTop">50</data>
354+
<data key="marginRight">50</data>
355+
<data key="marginBottom">50</data>
356+
<data key="marginLeft">50</data>
357+
</entity>
348358
<entity name="PageBuilderMarginsProperty500" type="pagebuilder_margins_property">
349359
<data key="name">Margins and Padding</data>
350360
<data key="section">advanced</data>

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
1111
<section name="BannerOnFrontend">
1212
<element name="base" type="button" selector="(//div[@data-role='banner'])[{{arg1}}]" parameterized="true"/>
13+
<element name="baseCSS" type="button" selector="[data-role=banner]"/>
1314
<element name="baseJS" type="button" selector="document.querySelectorAll('[data-role=banner] div.pagebuilder-banner-wrapper')[{{arg1}} - 1]" parameterized="true"/>
1415
<element name="hidden" type="button" selector="(//div[@data-role='banner'])[{{arg1}}][contains(@style, 'display: none')]" parameterized="true"/>
1516
<element name="notHidden" type="button" selector="(//div[@data-role='banner'])[{{arg1}}][not(contains(@style, 'display: none'))]" parameterized="true"/>
@@ -71,6 +72,7 @@
7172
</section>
7273
<section name="BannerOnBackend">
7374
<element name="base" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and contains(@class,'pagebuilder-content-type')])[{{arg1}}]" parameterized="true"/>
75+
<element name="baseCSS" type="button" selector=".pagebuilder-banner.pagebuilder-content-type"/>
7476
<element name="hidden" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and contains(@class,'pagebuilder-content-type')])[{{arg1}}]/ancestor::*[contains(@class, 'pagebuilder-content-type-wrapper') and contains(@class, 'pagebuilder-content-type-hidden')]" parameterized="true"/>
7577
<element name="notHidden" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and contains(@class,'pagebuilder-content-type')])[{{arg1}}]/parent::*[contains(@class, 'pagebuilder-content-type-wrapper') and not(contains(@class, 'pagebuilder-content-type-hidden'))][1]" parameterized="true"/>
7678
<element name="elementJS" type="button" selector="document.querySelectorAll('[data-role=banner]')[{{arg1}} - 1]" parameterized="true"/>

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,19 @@
2020
<element name="hidden" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}]/ancestor::*[contains(@class, 'pagebuilder-content-type-wrapper') and contains(@class, 'pagebuilder-content-type-hidden')]" parameterized="true"/>
2121
<element name="notHidden" type="text" selector="(//div[contains(@class,'pagebuilder-content-type') and contains(@class,'pagebuilder-video')])[{{arg1}}]/parent::*[contains(@class, 'pagebuilder-content-type-wrapper') and not(contains(@class, 'pagebuilder-content-type-hidden'))][1]" parameterized="true"/>
2222
<element name="source" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}]//iframe[@src='{{arg2}}']" parameterized="true"/>
23-
<element name="width" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][contains(@style,'max-width: {{arg2}}px;')]" parameterized="true"/>
23+
<element name="width" type="text" selector="(//div[contains(@class,'pagebuilder-video-inner')])[{{arg1}}][contains(@style,'max-width: {{arg2}}px;')]" parameterized="true"/>
2424
<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"/>
2525
<!-- Advanced Configuration -->
26-
<element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}]/parent::div[contains(@style, 'text-align: {{arg2}};')]" parameterized="true"/>
27-
<element name="noAlignment" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}]/parent::div[not(contains(@style,'text-align:'))]" parameterized="true"/>
26+
<element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-video-inner')])[{{arg1}}]/parent::div[contains(@style, 'text-align: {{arg2}};')]" parameterized="true"/>
27+
<element name="noAlignment" type="text" selector="(//div[contains(@class,'pagebuilder-video-inner')])[{{arg1}}]/parent::div[not(contains(@style,'text-align:'))]" parameterized="true"/>
2828
<element name="border" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][contains(@style,'border-style: {{arg2}};')]" parameterized="true"/>
2929
<element name="borderColor" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][contains(@style,'border-color: {{arg2}};')]" parameterized="true"/>
3030
<element name="noBorderColor" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][not(contains(@style,'border-color:'))]" parameterized="true"/>
3131
<element name="borderWidth" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][contains(@style,'border-width: {{arg2}}px;')]" parameterized="true"/>
3232
<element name="borderRadius" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][contains(@style,'border-radius: {{arg2}}px;')]" parameterized="true"/>
33-
<element name="cssClasses" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}]/parent::div[contains(@class,'{{arg2}}')]" parameterized="true"/>
33+
<element name="cssClasses" type="text" selector="(//div[contains(@class,'pagebuilder-video-inner')])[{{arg1}}]/parent::div[contains(@class,'{{arg2}}')]" parameterized="true"/>
3434
<element name="noCssClasses" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}]" parameterized="true"/>
35-
<element name="margins" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
35+
<element name="margins" type="text" selector="(//div[@data-role='video'])[{{arg1}}][contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
3636
<element name="padding" type="text" selector="(//div[contains(@class,'pagebuilder-video-wrapper')])[{{arg1}}][contains(@style,'padding: {{arg2}}px;')]" parameterized="true"/>
3737
</section>
3838
<section name="VideoOnStorefront">
@@ -45,7 +45,7 @@
4545
<element name="notHidden" type="text" selector="(//div[@data-role='video'])[{{arg1}}][not(contains(@style, 'display: none'))]" parameterized="true"/>
4646
<element name="iframe" type="text" selector="(//div[@data-role='video']//iframe)[{{arg1}}]" parameterized="true"/>
4747
<element name="source" type="text" selector="(//div[@data-role='video']//iframe)[{{arg1}}][@src='{{arg2}}']" parameterized="true"/>
48-
<element name="width" type="text" selector="(//div[@data-role='video'])[{{arg1}}]//div[@data-element='wrapper'][contains(@style,'max-width: {{arg2}}')]" parameterized="true"/>
48+
<element name="width" type="text" selector="(//div[@data-role='video'])[{{arg1}}]//div[@data-element='inner'][contains(@style,'max-width: {{arg2}}')]" parameterized="true"/>
4949
<element name="noWidth" type="text" selector="(//div[@data-role='video']//iframe)[{{arg1}}][not(starts-with(@style,'width:')) and not(contains(@style,' width:'))]" parameterized="true"/>
5050
<!-- Advanced Configuration -->
5151
<element name="alignment" type="text" selector="(//div[@data-role='video'])[{{arg1}}][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
@@ -57,7 +57,7 @@
5757
<element name="borderRadius" type="text" selector="(//div[@data-role='video'])[{{arg1}}]//div[@data-element='wrapper'][contains(@style,'border-radius: {{arg2}}px;')]" parameterized="true"/>
5858
<element name="cssClasses" type="text" selector="(//div[@data-role='video'])[{{arg1}}][contains(@class,'{{arg2}}')]" parameterized="true"/>
5959
<element name="noCssClasses" type="text" selector="(//div[@data-role='video'])[{{arg1}}][not(@class)]" parameterized="true"/>
60-
<element name="margins" type="text" selector="(//div[@data-role='video'])[{{arg1}}]//div[@data-element='wrapper'][contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
60+
<element name="margins" type="text" selector="(//div[@data-role='video'])[{{arg1}}][contains(@style,'margin: {{arg2}}px;')]" parameterized="true"/>
6161
<element name="padding" type="text" selector="(//div[@data-role='video'])[{{arg1}}]//div[@data-element='wrapper'][contains(@style,'padding: {{arg2}}px;')]" parameterized="true"/>
6262
</section>
6363
</sections>

app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderBannerPosterAppearanceTest.xml

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,93 @@
88

99
<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
1010
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
11+
<test name="BannerPosterWithMarginStaysInsideParent">
12+
<annotations>
13+
<features value="PageBuilder"/>
14+
<stories value="Banner"/>
15+
<title value="Poster - With margin stays inside of parent container"/>
16+
<description value="Verify that a Banner poster with margin stays inside parent container"/>
17+
<severity value="MAJOR"/>
18+
<useCaseId value="MC-5025"/>
19+
<testCaseId value="MC-5840"/>
20+
<group value="pagebuilder"/>
21+
<group value="pagebuilder-banner"/>
22+
<group value="pagebuilder-bannerPoster"/>
23+
</annotations>
24+
<before>
25+
<actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
26+
<actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
27+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
28+
</before>
29+
<after>
30+
<actionGroup ref="logout" stepKey="logout"/>
31+
</after>
32+
<actionGroup ref="addPageBuilderPageTitle" stepKey="enterPageTitle">
33+
<argument name="contentType" value="PageBuilderBannerContentType"/>
34+
</actionGroup>
35+
<actionGroup ref="expandPageBuilderPanelGroup" stepKey="expandPageBuilderPanelGroup">
36+
<argument name="group" value="PageBuilderBannerContentType"/>
37+
</actionGroup>
38+
<actionGroup ref="dragContentTypeToStage" stepKey="dragBannerIntoStage">
39+
<argument name="contentType" value="PageBuilderBannerContentType"/>
40+
</actionGroup>
41+
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStage">
42+
<argument name="contentType" value="PageBuilderBannerContentType"/>
43+
</actionGroup>
44+
<!-- Fill Out Edit Panel -->
45+
<comment userInput="Fill Out Edit Panel" stepKey="commentFillEditPanel"/>
46+
<actionGroup ref="fillSlideOutPanelFieldMargins" stepKey="enterMargins">
47+
<argument name="property" value="PageBuilderMarginsProperty_50"/>
48+
</actionGroup>
49+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
50+
<!-- Validate stage before save -->
51+
<comment userInput="Validate stage before save" stepKey="commentValidateStageBeforeSave"/>
52+
<actionGroup ref="validatePositionRightWithinContainer" stepKey="validatePositionRightBeforeSave">
53+
<argument name="content" value="{{BannerOnBackend.baseCSS}}"/>
54+
<argument name="contentMargins" value="PageBuilderMarginsProperty_50"/>
55+
<argument name="container" value="{{RowOnStage.baseCSS}}"/>
56+
<argument name="containerPadding" value="PageBuilderPaddingPropertyRowDefault"/>
57+
</actionGroup>
58+
<actionGroup ref="validateContentWidthEqualToContainerWidth" stepKey="validateContentWidthEqualToContainerWidthBeforeSave">
59+
<argument name="content" value="{{BannerOnBackend.baseCSS}}"/>
60+
<argument name="contentMargins" value="PageBuilderMarginsProperty_50"/>
61+
<argument name="container" value="{{RowOnStage.baseCSS}}"/>
62+
<argument name="containerPadding" value="PageBuilderPaddingPropertyRowDefault"/>
63+
</actionGroup>
64+
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
65+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
66+
<!-- Validate stage after save -->
67+
<comment userInput="Validate stage after save" stepKey="commentValidateStageAfterSave"/>
68+
<actionGroup ref="validatePositionRightWithinContainer" stepKey="validatePositionRightAfterSave">
69+
<argument name="content" value="{{BannerOnBackend.baseCSS}}"/>
70+
<argument name="contentMargins" value="PageBuilderMarginsProperty_50"/>
71+
<argument name="container" value="{{RowOnStage.baseCSS}}"/>
72+
<argument name="containerPadding" value="PageBuilderPaddingPropertyRowDefault"/>
73+
</actionGroup>
74+
<actionGroup ref="validateContentWidthEqualToContainerWidth" stepKey="validateContentWidthEqualToContainerWidthAfterSave">
75+
<argument name="content" value="{{BannerOnBackend.baseCSS}}"/>
76+
<argument name="contentMargins" value="PageBuilderMarginsProperty_50"/>
77+
<argument name="container" value="{{RowOnStage.baseCSS}}"/>
78+
<argument name="containerPadding" value="PageBuilderPaddingPropertyRowDefault"/>
79+
</actionGroup>
80+
<actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
81+
<argument name="contentType" value="PageBuilderBannerContentType"/>
82+
</actionGroup>
83+
<!-- Validate storefront -->
84+
<comment userInput="Validate storefront" stepKey="commentValidateStorefront"/>
85+
<actionGroup ref="validatePositionRightWithinContainer" stepKey="validatePositionRightStorefront">
86+
<argument name="content" value="{{BannerOnFrontend.baseCSS}}"/>
87+
<argument name="contentMargins" value="PageBuilderMarginsProperty_50"/>
88+
<argument name="container" value="{{RowOnStorefront.innerCSS}}"/>
89+
<argument name="containerPadding" value="PageBuilderPaddingPropertyRowDefault"/>
90+
</actionGroup>
91+
<actionGroup ref="validateContentWidthEqualToContainerWidth" stepKey="validateContentWidthEqualToContainerWidthStorefront">
92+
<argument name="content" value="{{BannerOnFrontend.baseCSS}}"/>
93+
<argument name="contentMargins" value="PageBuilderMarginsProperty_50"/>
94+
<argument name="container" value="{{RowOnStorefront.innerCSS}}"/>
95+
<argument name="containerPadding" value="PageBuilderPaddingPropertyRowDefault"/>
96+
</actionGroup>
97+
</test>
1198
<test name="BannerPosterCanInlineEditContent">
1299
<annotations>
13100
<features value="PageBuilder"/>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,9 @@
4646
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
4747
<style name="justify_content" source="justify_content" persistence_mode="read"/>
4848
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
49-
<style name="width" source="width"/>
50-
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/margins"/>
51-
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/paddings"/>
49+
<style name="width" source="width" converter="Magento_PageBuilder/js/converter/style/width"/>
50+
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
51+
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
5252
<static_style source="align_self" value="stretch"/>
5353
<attribute name="name" source="data-role"/>
5454
<attribute name="appearance" source="data-appearance"/>

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,19 @@
2626
<element name="main">
2727
<style name="text_align" source="text_align"/>
2828
<style name="display" source="display" converter="Magento_PageBuilder/js/converter/style/display" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
29+
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
2930
<attribute name="name" source="data-role"/>
3031
<attribute name="appearance" source="data-appearance"/>
3132
<css name="css_classes"/>
3233
</element>
33-
<element name="wrapper">
34+
<element name="inner">
3435
<style name="max_width" source="max_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
36+
</element>
37+
<element name="wrapper">
3538
<style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
3639
<style name="border_color" source="border_color"/>
3740
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
3841
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
39-
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
4042
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
4143
</element>
4244
<element name="video">

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
// */
55

66
.pagebuilder-content-type {
7-
display: inline-block;
7+
display: block;
88
font-size: 14px;
9-
width: 100%;
9+
1010
[contenteditable=true] {
1111
-webkit-user-select: text;
1212
overflow-wrap: break-word;

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

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,4 @@
1414
vertical-align: middle;
1515
width: initial;
1616
}
17-
18-
> .element-children {
19-
width: 100%;
20-
}
2117
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@
1111
height: 300px;
1212
}
1313
[data-role='map'] {
14-
display: inline-block;
14+
display: block;
1515
height: 300px;
16-
width: 100%;
1716
}

0 commit comments

Comments
 (0)