Skip to content

Commit 5058646

Browse files
davemacaulaydavemacaulay
committed
Merge branch 'MC-930-Row-Appearances' into cms-team-1-delivery
# Conflicts: # app/code/Magento/PageBuilder/i18n/en_US.csv # app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/row/preview.js # app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/row/preview.ts
2 parents e81bbdf + 71d0203 commit 5058646

File tree

140 files changed

+1606
-209
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

140 files changed

+1606
-209
lines changed

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

Lines changed: 57 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,27 +30,74 @@ public function __construct(StyleExtractorInterface $styleExtractor)
3030
*/
3131
public function render(array $itemData, array $additionalData = []) : string
3232
{
33-
$rootElementAttributes = [
34-
'data-element' => 'main',
35-
'data-role' => 'row',
36-
'data-appearance' => 'default',
37-
'class' => $itemData['formData']['css_classes'] ?? '',
38-
];
39-
4033
$formData = $itemData['formData'] ?? [];
34+
$appearance = (isset($formData['template'])
35+
&& $formData['template'] === 'full-width.phtml') ? 'full-width' : 'contained';
36+
37+
// Handle adding the wrapper element attributes when using the contained appearance
38+
$rootElementAttributes = [];
39+
if ($appearance === 'contained') {
40+
$rootElementAttributes = [
41+
'data-element' => 'main',
42+
'class' => $itemData['formData']['css_classes'] ?? '',
43+
];
44+
} elseif ($appearance === 'full-width') {
45+
$rootElementAttributes = [
46+
'data-element' => 'main',
47+
'data-role' => 'row',
48+
'data-appearance' => 'full-width',
49+
'class' => $itemData['formData']['css_classes'] ?? '',
50+
];
51+
}
4152

4253
$style = $this->styleExtractor->extractStyle($formData);
4354
if ($style) {
4455
$rootElementAttributes['style'] = $style;
4556
}
4657

58+
$childrenHtml = (isset($additionalData['children']) ? $additionalData['children'] : '');
59+
60+
// Wrap the children when the layout is full width
61+
if ($appearance === 'full-width') {
62+
$childrenHtml = '<div class="row-full-width-inner" data-element="inner">' . $childrenHtml . '</div>';
63+
}
64+
65+
$rootElementHtml = $this->renderElementWithAttributes(
66+
$rootElementAttributes,
67+
$childrenHtml
68+
);
69+
70+
// Wrap the root element in our wrapper for contained appearances
71+
if ($appearance === 'contained') {
72+
return $this->renderElementWithAttributes(
73+
[
74+
'data-element' => 'wrapper',
75+
'data-role' => 'row',
76+
'data-appearance' => 'contained',
77+
'class' => 'row-contained',
78+
],
79+
$rootElementHtml
80+
);
81+
}
82+
83+
return $rootElementHtml;
84+
}
85+
86+
/**
87+
* Render an element with an attributes array
88+
*
89+
* @param array $attributes
90+
* @param string $childrenHtml
91+
* @return string
92+
*/
93+
private function renderElementWithAttributes(array $attributes, string $childrenHtml = '') : string
94+
{
4795
$rootElementHtml = '<div';
48-
foreach ($rootElementAttributes as $attributeName => $attributeValue) {
96+
foreach ($attributes as $attributeName => $attributeValue) {
4997
$attributeValue = trim($attributeValue);
5098
$rootElementHtml .= $attributeValue ? " $attributeName=\"$attributeValue\"" : '';
5199
}
52-
$rootElementHtml .= '>' . (isset($additionalData['children']) ? $additionalData['children'] : '') . '</div>';
53-
100+
$rootElementHtml .= '>' . $childrenHtml . '</div>';
54101
return $rootElementHtml;
55102
}
56103
}

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/AdminActionGroup.xml

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,4 +97,11 @@
9797
<actualResult type="variable">rowWidth</actualResult>
9898
</assertGreaterThan>
9999
</actionGroup>
100+
<actionGroup name="openPageBuilderOnCatalog">
101+
<click selector="{{PageBuilderCatalog.openPageBuilder}}" stepKey="clickOnPageBuilderBtn" />
102+
<!--See PageBuilder fullsize-->
103+
<comment userInput="See PageBuilder fullsize" stepKey="commentSeePageBuilderFullsize"/>
104+
<waitForElementVisible selector="{{PageBuilderPanel.generalGroup}}" stepKey="waiForPageBuilderVisible" />
105+
<seeElement selector="{{PageBuilderStage.stageWrapperFullScreen}}" stepKey="seePageBuilderFullSizeScreen" />
106+
</actionGroup>
100107
</actionGroups>

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ContentTypeBlockActionGroup.xml

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<arguments>
1313
<argument name="block" defaultValue=""/>
1414
</arguments>
15-
<click selector="{{BlockOnStage.selectBlockBtn}}" stepKey="clickSelectBlockBtn"/>
15+
<click selector="{{BlockOnForm.selectBlockBtn}}" stepKey="clickSelectBlockBtn"/>
1616
<waitForElementVisible selector="{{BlockOnGrid.searchBox}}" stepKey="waitForBlockGrid" />
1717
<fillField selector="{{BlockOnGrid.searchBox}}" userInput="{{block.identifier}}" stepKey="enterBlockTitle"/>
1818
<waitForLoadingMaskToDisappear stepKey="waitForLoadingMaskToDisappear"/>
@@ -26,12 +26,13 @@
2626
</actionGroup>
2727
<actionGroup name="verifyBlockOnStage">
2828
<arguments>
29-
<argument name="contentType"/>
3029
<argument name="block"/>
30+
<argument name="index" defaultValue="1" type="string"/>
3131
</arguments>
32-
<moveMouseOver selector="{{PageBuilderStage.contentTypeInStage(contentType.role)}}" x="10" y="0" stepKey="onMouseOverContentTypeStage"/>
33-
<waitForElementVisible selector="{{BlockOnStage.title(block.title)}}" stepKey="wait"/>
34-
<seeElement selector="{{BlockOnStage.title(block.title)}}" stepKey="seeOptionMenuTitle"/>
35-
<see userInput="{{block.content}}" stepKey="seeBlockContentOnStage"/>
32+
<moveMouseOver selector="{{PageBuilderStage.contentTypeInStageByIndex(PageBuilderBlockContentType.role, index)}}" stepKey="onMouseOverContentTypeStage"/>
33+
<waitForPageLoad stepKey="waitForPageLoad"/>
34+
<waitForElementVisible selector="{{BlockOnStage.title(index, block.title)}}" stepKey="wait"/>
35+
<seeElement selector="{{BlockOnStage.title(index,block.title)}}" stepKey="seeOptionMenuTitle"/>
36+
<see selector="{{BlockOnStage.content(index)}}" userInput="{{block.content}}" stepKey="seeBlockContentOnStage"/>
3637
</actionGroup>
3738
</actionGroups>

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/ContentTypeRowActionGroup.xml

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,4 +59,114 @@
5959
<waitForElementVisible selector="{{page.parallaxState(index, parallaxStateValue.value)}}" stepKey="waitForParallaxBackgroundState"/>
6060
<waitForElementVisible selector="{{page.parallaxSpeed(index, parallaxSpeedValue.value)}}" stepKey="waitForParallaxBackgroundSpeed"/>
6161
</actionGroup>
62+
<!-- Validate Contained Row Appearance on stage -->
63+
<actionGroup name="validateContainedRowAppearanceOnStage">
64+
<comment userInput="Increase window size to see varying widths for rows" stepKey="commentResizeWindow"/>
65+
<resizeWindow width="1920" height="1024" stepKey="resizeWindow"/>
66+
<executeJS function="return {{PageBuilderStage.stageWidthJS}}" stepKey="stageWidth"/>
67+
<executeJS function="return {{RowOnStage.rowWidthJS('contained', '0')}}" stepKey="rowWidth"/>
68+
<assertGreaterThan stepKey="assertRowWidthGreaterThanZero">
69+
<expectedResult type="int">0</expectedResult>
70+
<actualResult type="variable">rowWidth</actualResult>
71+
</assertGreaterThan>
72+
<assertLessThan stepKey="assertRowWidthLessThanStage">
73+
<expectedResult type="variable">stageWidth</expectedResult>
74+
<actualResult type="variable">rowWidth</actualResult>
75+
</assertLessThan>
76+
</actionGroup>
77+
<!-- Validate Full Width Row Appearance on stage -->
78+
<actionGroup name="validateFullWidthRowAppearanceOnStage">
79+
<comment userInput="Increase window size to see varying widths for rows" stepKey="commentResizeWindow"/>
80+
<resizeWindow width="1920" height="1024" stepKey="resizeWindow"/>
81+
<executeJS function="return {{PageBuilderStage.stageWidthJS}}" stepKey="stageWidth"/>
82+
<executeJS function="return {{RowOnStage.rowWidthJS('full-width', '0')}}" stepKey="rowWidth"/>
83+
<executeJS function="return parseInt({{RowOnStage.rowH2ChildWidthJS('full-width', '0')}} + {{PageBuilderPaddingPropertyRowDefault.paddingLeft}} + {{PageBuilderPaddingPropertyRowDefault.paddingRight}})" stepKey="rowElementWidth"/>
84+
<assertGreaterThan stepKey="assertRowWidthGreaterThanZero">
85+
<expectedResult type="int">0</expectedResult>
86+
<actualResult type="variable">rowWidth</actualResult>
87+
</assertGreaterThan>
88+
<assertEquals stepKey="assertRowWidthEqualsStage">
89+
<expectedResult type="variable">stageWidth</expectedResult>
90+
<actualResult type="variable">rowWidth</actualResult>
91+
</assertEquals>
92+
<assertGreaterThan stepKey="assertRowWidthGreaterThanContents">
93+
<expectedResult type="variable">rowElementWidth</expectedResult>
94+
<actualResult type="variable">rowWidth</actualResult>
95+
</assertGreaterThan>
96+
</actionGroup>
97+
<!-- Validate Full Bleed Row Appearance on stage -->
98+
<actionGroup name="validateFullBleedRowAppearanceOnStage">
99+
<comment userInput="Increase window size to see varying widths for rows" stepKey="commentResizeWindow"/>
100+
<resizeWindow width="1920" height="1024" stepKey="resizeWindow"/>
101+
<executeJS function="return {{PageBuilderStage.stageWidthJS}}" stepKey="stageWidth"/>
102+
<executeJS function="return {{RowOnStage.rowWidthJS('full-bleed', '0')}}" stepKey="rowWidth"/>
103+
<executeJS function="return parseInt({{RowOnStage.rowH2ChildWidthJS('full-bleed', '0')}} + {{PageBuilderPaddingPropertyRowDefault.paddingLeft}} + {{PageBuilderPaddingPropertyRowDefault.paddingRight}})" stepKey="rowElementWidth"/>
104+
<assertGreaterThan stepKey="assertRowWidthGreaterThanZero">
105+
<expectedResult type="int">0</expectedResult>
106+
<actualResult type="variable">rowWidth</actualResult>
107+
</assertGreaterThan>
108+
<assertEquals stepKey="assertRowWidthEqualsStage">
109+
<expectedResult type="variable">stageWidth</expectedResult>
110+
<actualResult type="variable">rowWidth</actualResult>
111+
</assertEquals>
112+
<assertEquals stepKey="assertRowWidthEqualsContentsPlusPadding">
113+
<expectedResult type="variable">rowElementWidth</expectedResult>
114+
<actualResult type="variable">rowWidth</actualResult>
115+
</assertEquals>
116+
</actionGroup>
117+
<!-- Validate Contained Row Appearance on Storefront -->
118+
<actionGroup name="validateContainedRowAppearanceOnStorefront">
119+
<comment userInput="Increase window size to see varying widths for rows" stepKey="commentResizeWindow"/>
120+
<resizeWindow width="1920" height="1024" stepKey="resizeWindow"/>
121+
<executeJS function="return {{PageBuilderStoreFront.pageWidthJS}}" stepKey="pageWidth"/>
122+
<executeJS function="return {{RowOnStorefront.rowWidthJS('contained', '0')}}" stepKey="rowWidth"/>
123+
<assertGreaterThan stepKey="assertRowWidthGreaterThanZero">
124+
<expectedResult type="int">0</expectedResult>
125+
<actualResult type="variable">rowWidth</actualResult>
126+
</assertGreaterThan>
127+
<assertLessThan stepKey="assertRowWidthLessThanPage">
128+
<expectedResult type="variable">pageWidth</expectedResult>
129+
<actualResult type="variable">rowWidth</actualResult>
130+
</assertLessThan>
131+
</actionGroup>
132+
<!-- Validate Full Width Row Appearance on Storefront -->
133+
<actionGroup name="validateFullWidthRowAppearanceOnStorefront">
134+
<comment userInput="Increase window size to see varying widths for rows" stepKey="commentResizeWindow"/>
135+
<resizeWindow width="1920" height="1024" stepKey="resizeWindow"/>
136+
<executeJS function="return {{PageBuilderStoreFront.pageWidthJS}}" stepKey="pageWidth"/>
137+
<executeJS function="return {{RowOnStorefront.rowWidthJS('full-width', '0')}}" stepKey="rowWidth"/>
138+
<executeJS function="return parseInt({{RowOnStorefront.rowH2ChildWidthJS('full-width', '0')}} + {{PageBuilderPaddingPropertyRowDefault.paddingLeft}} + {{PageBuilderPaddingPropertyRowDefault.paddingRight}})" stepKey="rowElementWidth"/>
139+
<assertGreaterThan stepKey="assertRowWidthGreaterThanZero">
140+
<expectedResult type="int">0</expectedResult>
141+
<actualResult type="variable">rowWidth</actualResult>
142+
</assertGreaterThan>
143+
<assertEquals stepKey="assertRowWidthEqualsPage">
144+
<expectedResult type="variable">pageWidth</expectedResult>
145+
<actualResult type="variable">rowWidth</actualResult>
146+
</assertEquals>
147+
<assertGreaterThan stepKey="assertRowWidthGreaterThanContents">
148+
<expectedResult type="variable">rowElementWidth</expectedResult>
149+
<actualResult type="variable">rowWidth</actualResult>
150+
</assertGreaterThan>
151+
</actionGroup>
152+
<!-- Validate Full Bleed Row Appearance on Storefront -->
153+
<actionGroup name="validateFullBleedRowAppearanceOnStorefront">
154+
<comment userInput="Increase window size to see varying widths for rows" stepKey="commentResizeWindow"/>
155+
<resizeWindow width="1920" height="1024" stepKey="resizeWindow"/>
156+
<executeJS function="return {{PageBuilderStoreFront.pageWidthJS}}" stepKey="pageWidth"/>
157+
<executeJS function="return {{RowOnStorefront.rowWidthJS('full-bleed', '0')}}" stepKey="rowWidth"/>
158+
<executeJS function="return parseInt({{RowOnStorefront.rowH2ChildWidthJS('full-bleed', '0')}} + {{PageBuilderPaddingPropertyRowDefault.paddingLeft}} + {{PageBuilderPaddingPropertyRowDefault.paddingRight}})" stepKey="rowElementWidth"/>
159+
<assertGreaterThan stepKey="assertRowWidthGreaterThanZero">
160+
<expectedResult type="int">0</expectedResult>
161+
<actualResult type="variable">rowWidth</actualResult>
162+
</assertGreaterThan>
163+
<assertEquals stepKey="assertRowWidthEqualsPage">
164+
<expectedResult type="variable">pageWidth</expectedResult>
165+
<actualResult type="variable">rowWidth</actualResult>
166+
</assertEquals>
167+
<assertEquals stepKey="assertRowWidthEqualsContentsPlusPadding">
168+
<expectedResult type="variable">rowElementWidth</expectedResult>
169+
<actualResult type="variable">rowWidth</actualResult>
170+
</assertEquals>
171+
</actionGroup>
62172
</actionGroups>

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/EditFormActionGroup.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
<arguments>
5757
<argument name="section" defaultValue="AdvancedForm"/>
5858
</arguments>
59+
<waitForPageLoad stepKey="waitForPageToFinishLoading"/>
5960
<waitForElementVisible selector="{{EditPanelForm.editPanelSectionName(section.dataIndex)}}" stepKey="waitForSectionVisible"/>
6061
<conditionalClick selector="{{EditPanelForm.editPanelSectionName(section.dataIndex)}}" dependentSelector="{{EditPanelForm.editPanelSectionExpanded(section.dataIndex)}}" visible="false" stepKey="expandSection"/>
6162
<waitForElementVisible selector="{{EditPanelForm.editPanelSectionExpanded(section.dataIndex)}}" stepKey="waitForSectionExpanded"/>

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/UrlInputActionGroup.xml

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
9+
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
10+
xsi:noNamespaceSchemaLocation="../../../../../../../dev/tests/acceptance/vendor/magento/magento2-functional-testing-framework/src/Magento/FunctionalTestingFramework/Test/etc/actionGroupSchema.xsd">
11+
<actionGroup name="fillOutUrlInput">
12+
<arguments>
13+
<argument name="fieldName"/>
14+
<argument name="linkName"/>
15+
<argument name="searchString"/>
16+
<argument name="searchResult"/>
17+
</arguments>
18+
<waitForElementVisible selector="{{PageBuilderSection.LinkSelect('fieldName')}}" stepKey="waitForButtonLinkSelect"/>
19+
<seeElement selector="{{PageBuilderSection.LinkSelect('fieldName')}}" stepKey="seeButtonLinkSelect"/>
20+
<selectOption selector="{{EditPanelForm.panelFieldControl(PageBuilderButtonItemLink_NotSecure.section, PageBuilderButtonItemLink_NotSecure.fieldName)}}" userInput="{{linkName}}" stepKey="selectOption" />
21+
<!--See dropdown beside Button Link Select-->
22+
<waitForElementVisible selector="{{PageBuilderSection.LinkDropdown}}" stepKey="waitButtonLinkDropdownInput" />
23+
<seeElement selector="{{PageBuilderSection.LinkDropdown}}" stepKey="seeButtonLinkDropdownInput" />
24+
<click selector="{{PageBuilderSection.LinkDropdown}}" stepKey="expandButtonLinkDropdownInput1" />
25+
<!--Type 2 first letters into Search box-->
26+
<click selector="{{PageBuilderSection.LinkSearch}}" stepKey="focusOnField"/>
27+
<fillField selector="{{PageBuilderSection.LinkSearch}}" userInput="{{searchString}}" stepKey="fill2FirstLetters"/>
28+
<waitForElementVisible selector="{{PageBuilderSection.SearchResult(searchResult)}}" stepKey="waitForSearchResult" />
29+
<seeElement selector="{{PageBuilderSection.SearchResult(searchResult)}}" stepKey="seeCMSPageAOnSearchResult"/>
30+
<click selector="{{PageBuilderSection.SearchResult(searchResult)}}" stepKey="selectResult"/>
31+
<dontSee selector="{{PageBuilderSection.SearchResultBox}}" stepKey="dropdownCollapses" />
32+
<grabTextFrom selector="{{PageBuilderSection.DropdownInput}}" stepKey="textFromDropDown1"/>
33+
<assertEquals stepKey="assertEquals1" message="pass">
34+
<expectedResult type="string">{{searchResult}}</expectedResult>
35+
<actualResult type="variable">textFromDropDown1</actualResult>
36+
</assertEquals>
37+
</actionGroup>
38+
<actionGroup name="verifyCmsPageLinkOnFrontend">
39+
<arguments>
40+
<argument name="CMSPage"/>
41+
<argument name="index"/>
42+
<argument name="section"/>
43+
</arguments>
44+
<scrollTo selector="{{section.base('index')}}" stepKey="waitForButtonElementStorefront"/>
45+
<seeElement selector="{{PageBuilderPageOnStoreFrontSection.CMSPageLink(CMSPage.identifier)}}" stepKey="seePageLinkOnStoreFront" />
46+
<click selector="{{PageBuilderPageOnStoreFrontSection.CMSPageLink(CMSPage.identifier)}}" stepKey="clickButton"/>
47+
<waitForPageLoad stepKey="waitForPageLoad"/>
48+
<see userInput="{{CMSPage.title}}" stepKey="seePageName" />
49+
</actionGroup>
50+
</actionGroups>

‎app/code/Magento/PageBuilder/Test/Mftf/ActionGroup/WYSIWYGActionGroup.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
<click selector="{{moveToCE.SelectPageButton}}" stepKey="clickSelectPage"/>
7373
<waitForLoadingMaskToDisappear stepKey="waitForSelectPageModal"/>
7474
<waitForElementVisible selector="{{moveToCE.generalFilter('chooser_title')}}" stepKey="waitForGrid"/>
75-
<fillField selector="{{moveToCE.generalFilter('chooser_title')}}" userInput="{{page}}" stepKey="enterPageName"/>
75+
<fillField selector="{{moveToCE.generalFilter('chooser_identifier')}}" userInput="{{page}}" stepKey="enterPageName"/>
7676
<click selector="{{AdminProductGridFilterSection.applyFilters}}" stepKey="clickSearch"/>
7777
<waitForLoadingMaskToDisappear stepKey="waitForLoadingMaskToDisappear3"/>
7878
<waitForElementVisible selector="//td[contains(@class,'col-url')][contains(text(),'{{page}}')]" stepKey="waitForSearchResult"/>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -476,6 +476,16 @@
476476
<data key="paddingBottom">40</data>
477477
<data key="paddingLeft">40</data>
478478
</entity>
479+
<entity name="PageBuilderPaddingPropertyRowDefault" type="pagebuilder_padding_property">
480+
<data key="name">Margins and Padding</data>
481+
<data key="section">advanced</data>
482+
<data key="fieldName">margins_and_padding</data>
483+
<data key="value">10</data>
484+
<data key="paddingTop">10</data>
485+
<data key="paddingRight">10</data>
486+
<data key="paddingBottom">10</data>
487+
<data key="paddingLeft">10</data>
488+
</entity>
479489
<!-- Margins & Padding -->
480490
<entity name="PageBuilderAdvancedMarginsAndPaddingDefaultProperty" type="pagebuilder_advanced_margins_and_padding_property">
481491
<data key="name">Margins and Padding</data>

‎app/code/Magento/PageBuilder/Test/Mftf/Data/LinkData.xml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,7 @@
1515
<data key="page">Page</data>
1616
<data key="googleUrl">https://www.google.com</data>
1717
</entity>
18+
<entity name="ExternalLinkSearch" type="pagebuilder_external_link">
19+
<data key="page">cm</data>
20+
</entity>
1821
</entities>

0 commit comments

Comments
 (0)