Skip to content

Commit c258279

Browse files
davemacaulaydavemacaulay
committed
MC-3389: Text Content Block doesn't follow Full Width layout
- Add additional wrapper to full width master template to ensure content is aligned correctly
1 parent 394cb65 commit c258279

File tree

11 files changed

+94
-14
lines changed

11 files changed

+94
-14
lines changed

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderHeadingSection.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
</section>
4040
<section name="HeadingOnStorefront">
4141
<element name="base" type="text" selector="(//{{arg1}})[{{arg2}}]" parameterized="true"/>
42+
<element name="baseJs" type="text" selector="document.querySelectorAll('[data-role=\'heading\']')[{{arg1}}]" parameterized="true"/>
4243
<element name="headingNoText" type="button" selector="(//{{arg1}}[@data-role='heading' and .=''])[{{arg2}}]" parameterized="true"/>
4344
<element name="headingText" type="button" selector="(//{{arg1}}[@data-role='heading' and .='{{arg2}}'])[{{arg3}}]" parameterized="true"/>
4445
<element name="headingType" type="button" selector="(//{{arg1}}[@data-role='heading'])[{{arg2}}]" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderTextSection.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
</section>
4646
<section name="TextOnStorefront">
4747
<element name="base" type="text" selector="(//div[@data-role='text'])[{{arg1}}]" parameterized="true"/>
48+
<element name="baseJs" type="text" selector="document.querySelectorAll('[data-role=\'text\']')[{{arg1}}]" parameterized="true"/>
4849
<element name="textAreaText" type="text" selector="(//div[@data-role='text'])[{{arg1}}][.='{{arg2}}']" parameterized="true"/>
4950
<element name="textAreaWidget" type="text" selector="(//div[@data-role='text'])[{{arg1}}]//a[contains(@href,'{{arg2}}{{arg3}}')]" parameterized="true"/>
5051
<element name="textAreaVariable" type="text" selector="(//div[@data-role='text'])[{{arg1}}]//a[contains(@href,'{{arg2}}{{arg3}}')]" parameterized="true"/>

‎app/code/Magento/PageBuilder/Test/Mftf/Test/AdminPageBuilderRowTest.xml

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1263,6 +1263,77 @@
12631263
<actionGroup ref="validateFullWidthRowAppearanceOnStorefront" stepKey="validateFullWidthRowAppearanceOnStorefront"/>
12641264
<actionGroup ref="validateFullBleedRowAppearanceOnStorefront" stepKey="validateFullBleedRowAppearanceOnStorefront"/>
12651265
</test>
1266+
<test name="RowAppearancesFullWidthTextAlignment">
1267+
<annotations>
1268+
<features value="PageBuilder"/>
1269+
<stories value="Row"/>
1270+
<title value="Text content type is aligned correctly"/>
1271+
<description value="Verify text is aligned at the same offset left as heading on storefront in full width appearance."/>
1272+
<severity value="MAJOR"/>
1273+
<useCaseId value="MC-3389"/>
1274+
<testCaseId value=""/>
1275+
<group value="pagebuilder"/>
1276+
<group value="pagebuilder-row"/>
1277+
<group value="pagebuilder-rowAppearances"/>
1278+
<group value="pagebuilder-heading"/>
1279+
<group value="pagebuilder-text"/>
1280+
</annotations>
1281+
<before>
1282+
<actionGroup ref="LoginAsAdmin" stepKey="loginAsAdmin"/>
1283+
<actionGroup ref="DisabledWYSIWYG" stepKey="disableWYSIWYG"/>
1284+
<actionGroup ref="navigateToAPageWithPageBuilder" stepKey="navigateToAPageWithPageBuilder"/>
1285+
<actionGroup ref="switchToPageBuilderStage" stepKey="switchToPageBuilderStage"/>
1286+
<actionGroup ref="addPageBuilderPageTitle" stepKey="enterPageTitle">
1287+
<argument name="contentType" value="PageBuilderRowContentType"/>
1288+
</actionGroup>
1289+
</before>
1290+
<after>
1291+
<actionGroup ref="EnabledWYSIWYG" stepKey="enableWYSIWYG"/>
1292+
<actionGroup ref="logout" stepKey="logout"/>
1293+
</after>
1294+
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStageRow">
1295+
<argument name="contentType" value="PageBuilderRowContentType"/>
1296+
</actionGroup>
1297+
<!-- Set background color and appearance of row 1 -->
1298+
<comment userInput="Set background color and appearance of row" stepKey="commentEdit"/>
1299+
<actionGroup ref="fillSlideOutPanelFieldGeneral" stepKey="enterBackgroundColorRow">
1300+
<argument name="property" value="PageBuilderRowBackgroundColor_CCCCCC"/>
1301+
</actionGroup>
1302+
<actionGroup ref="chooseVisualSelectOption" stepKey="enterAppearanceRow">
1303+
<argument name="property" value="PageBuilderRowAppearance_FullWidth"/>
1304+
</actionGroup>
1305+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettingsRow"/>
1306+
<actionGroup ref="dragContentTypeToStage" stepKey="dragHeaderToRow">
1307+
<argument name="contentType" value="PageBuilderHeadingContentType"/>
1308+
</actionGroup>
1309+
<actionGroup ref="enterHeadingOnStage" stepKey="enterHeadingOnStageRow">
1310+
<argument name="headingText" value="PageBuilderHeadingTextProperty"/>
1311+
</actionGroup>
1312+
<actionGroup ref="clickOutsideLiveEditHeading" stepKey="clickOutsideLiveEditHeading">
1313+
<argument name="index" value="1"/>
1314+
</actionGroup>
1315+
<actionGroup ref="dragContentTypeToStage" stepKey="dragTextToRow">
1316+
<argument name="contentType" value="PageBuilderTextContentType"/>
1317+
</actionGroup>
1318+
<actionGroup ref="openPageBuilderEditPanel" stepKey="openEditMenuOnStageText">
1319+
<argument name="contentType" value="PageBuilderTextContentType"/>
1320+
</actionGroup>
1321+
<waitForElementVisible selector="{{TextOnConfiguration.textArea}}" stepKey="waitForTextOnEditPanel"/>
1322+
<fillField selector="{{TextOnConfiguration.textArea}}" userInput="{{PageBuilderTextContentType.value}}" stepKey="fillTextField"/>
1323+
<actionGroup ref="saveEditPanelSettings" stepKey="saveEditPanelSettings"/>
1324+
<actionGroup ref="saveAndContinueEditCmsPage" stepKey="saveAndContinueEditCmsPage"/>
1325+
<!-- Validate Storefront -->
1326+
<comment userInput="Validate Storefront" stepKey="commentValidateStorefront"/>
1327+
<actionGroup ref="navigateToStoreFront" stepKey="navigateToStoreFront">
1328+
<argument name="contentType" value="PageBuilderRowContentType"/>
1329+
</actionGroup>
1330+
<executeJS function="return {{HeadingOnStorefront.baseJs('0')}}.offsetLeft" stepKey="headingOffsetLeft"/>
1331+
<executeJS function="return {{TextOnStorefront.baseJs('0')}}.offsetLeft" stepKey="textOffsetLeft"/>
1332+
<assertEquals stepKey="assertMatchingOffsetLeft">
1333+
<expectedResult type="variable">headingOffsetLeft</expectedResult>
1334+
<actualResult type="variable">textOffsetLeft</actualResult>
1335+
</assertEquals>
1336+
</test>
12661337
<test name="RowFullWidthAppearanceWithInvalidLayoutTest">
12671338
<annotations>
12681339
<features value="PageBuilder"/>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/row/_contained.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
// Contained row appearance styles
88
// _____________________________________________
99

10-
.row-contained {
10+
.row-contained-wrapper {
1111
margin-left: auto;
1212
margin-right: auto;
1313
max-width: 90%;

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/row/_full-width.less

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,9 @@
77
// Full Width row appearance styles
88
// _____________________________________________
99

10-
[data-appearance='full-width'] {
11-
> .element-children {
12-
margin-left: auto;
13-
margin-right: auto;
14-
max-width: 90%;
15-
width: @layout__max-width;
16-
}
10+
[data-appearance='full-width'] > .element-children {
11+
margin-left: auto;
12+
margin-right: auto;
13+
max-width: 90%;
14+
width: @layout__max-width;
1715
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66
-->
77

8-
<div class="row-contained"
8+
<div class="row-contained-wrapper"
99
attr="data.wrapper.attributes"
1010
ko-style="data.wrapper.style"
1111
css="data.wrapper.css">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66
-->
77

8-
<div class="row-contained"
8+
<div class="row-contained-wrapper"
99
attr="data.wrapper.attributes"
1010
ko-style="data.wrapper.style"
1111
css="data.wrapper.css">

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,10 @@
88
<div attr="data.main.attributes"
99
ko-style="Object.assign(data.container.style(), data.main.style())"
1010
css="data.main.css">
11-
<render args="renderChildTemplate"/>
12-
</div>
11+
<div class="row-full-width-inner"
12+
attr="data.inner.attributes"
13+
ko-style="data.inner.style"
14+
css="data.inner.style">
15+
<render args="renderChildTemplate"/>
16+
</div>
17+
</div>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@
112112
</attributes>
113113
<css name="css_classes"/>
114114
</element>
115+
<element name="inner" />
115116
<element name="container">
116117
<style_properties>
117118
<property name="justify_content" source="justify_content"/>

‎app/code/Magento/PageBuilder/view/frontend/web/css/source/content-type/row/_contained.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
// Contained row appearance styles
88
// _____________________________________________
99

10-
.row-contained {
10+
.row-contained-wrapper {
1111
box-sizing: border-box;
1212
margin-left: auto !important;
1313
margin-right: auto !important;

0 commit comments

Comments
 (0)