Skip to content

Commit 466c219

Browse files
anthoulaanthoula
committed
Merge branch 'MC-4117-banner-images' into cms-team-1-delivery
2 parents 6cd8656 + 11072e3 commit 466c219

32 files changed

+930
-763
lines changed

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

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ class Driver implements RendererInterface
3333
private $serializer;
3434

3535
/**
36+
* Driver constructor.
3637
* @param StyleExtractorInterface $styleExtractor
3738
* @param EavAttributeLoaderInterface $eavAttributeLoader
3839
* @param Json $serializer
@@ -88,30 +89,23 @@ public function render(array $itemData, array $additionalData = []) : string
8889
'data-href' => $eavData['link_url'] ?? '',
8990
'data-target' => isset($eavData['target_blank']) && $eavData['target_blank'] ? '_blank' : '',
9091
];
92+
9193
$imageAttributes = [
92-
'data-element' => 'desktop_image',
93-
'style' => 'background-image: url('
94-
. "'{{media url=wysiwyg"
94+
'data-element' => 'wrapper',
95+
'data-background-images' => '{\"'
96+
. 'desktop_image\":\"'
97+
. '{{media url=wysiwyg'
98+
. $eavData['image']
99+
. '}}\",\"'
100+
. 'mobile_image\":\"'
101+
. '{{media url=wysiwyg'
95102
. $eavData['image']
96-
. "}}'); "
97-
. 'min-height: 300px; background-size: auto; background-repeat: no-repeat; '
98-
. 'background-attachment: scroll;'
103+
. '}}\"}',
104+
'style' => 'min-height: 300px; background-size: auto; '
105+
. 'background-repeat: no-repeat; background-attachment: scroll;'
99106
. $textAlign,
100-
'class' => 'pagebuilder-banner-wrapper pagebuilder-mobile-hidden'
101-
];
102-
$mobileImageAttributes = [
103-
'data-element' => 'mobile_image',
104-
'style' => 'background-image: url('
105-
. "'{{media url=wysiwyg"
106-
. (isset($eavData['image']) ? $eavData['image'] : $eavData['mobile_image'])
107-
. "}}'); "
108-
. 'min-height: 300px; background-size: auto; background-repeat: no-repeat; '
109-
. 'background-attachment: scroll;'
110-
. $textAlign
107+
'class' => 'pagebuilder-banner-wrapper'
111108
];
112-
$mobileImageElementHtml = '<div'
113-
. $this->printAttributes($mobileImageAttributes)
114-
. ' class="pagebuilder-banner-wrapper pagebuilder-mobile-only">';
115109

116110
$imageElementHtml = '<div' . $this->printAttributes($imageAttributes) . '>';
117111
$overlayElementHtml = '<div '
@@ -136,7 +130,6 @@ public function render(array $itemData, array $additionalData = []) : string
136130
. '<div class="pagebuilder-poster-content"><div data-element="content"></div>'
137131
. $buttonHtml
138132
. '</div></div></div>'
139-
. $mobileImageElementHtml
140133
. $overlayElementHtml
141134
. '<div class="pagebuilder-poster-content"><div data-element="content"></div>'
142135
. $buttonHtml

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

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
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="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
11+
<!-- Collage Appearances -->
12+
<!-- Checks the position of the overlay with small padding value. This action group may not work with large padding values -->
13+
<actionGroup name="validateOverlayPositionCollageLeft">
14+
<arguments>
15+
<argument name="page"/>
16+
<argument name="index" defaultValue="1" type="string"/>
17+
<argument name="padding" defaultValue="PageBuilderPaddingProperty40"/>
18+
</arguments>
19+
<!-- Validate right edge of overlay -->
20+
<comment userInput="Validate right edge of overlay" stepKey="commentValidateRightEdgeOfOverlay"/>
21+
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().right-{{page.wrapperJS(index)}}.getBoundingClientRect().width/2" stepKey="wrapperRightPositionMinusWidth50Percent"/>
22+
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().right" stepKey="overlayRightPosition"/>
23+
<executeJS function="return Math.round(({$wrapperRightPositionMinusWidth50Percent}/{$overlayRightPosition})*100)/100" stepKey="overlayRightRatio"/>
24+
<assertEquals stepKey="assertOverlayRightRatio">
25+
<expectedResult type="int">1</expectedResult>
26+
<actualResult type="variable">overlayRightRatio</actualResult>
27+
</assertEquals>
28+
<!-- Validate left edge of overlay -->
29+
<comment userInput="Validate left edge of overlay" stepKey="commentValidateLeftEdgeOfOverlay"/>
30+
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().left" stepKey="wrapperLeftPosition"/>
31+
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().left" stepKey="overlayLeftPosition"/>
32+
<executeJS function="return Math.round(({$overlayLeftPosition}-{$wrapperLeftPosition})*100)/100" stepKey="overlayPadding"/>
33+
<assertEquals stepKey="assertOverlayIsEqualToPadding">
34+
<expectedResult type="int">{{padding.paddingLeft}}</expectedResult>
35+
<actualResult type="variable">overlayPadding</actualResult>
36+
</assertEquals>
37+
</actionGroup>
38+
<!-- Checks the position of the overlay with small padding value. This action group may not work with large padding values -->
39+
<actionGroup name="validateOverlayPositionCollageRight">
40+
<arguments>
41+
<argument name="page"/>
42+
<argument name="index" defaultValue="1" type="string"/>
43+
<argument name="padding" defaultValue="PageBuilderPaddingProperty40"/>
44+
</arguments>
45+
<!-- Validate right edge of overlay -->
46+
<comment userInput="Validate right edge of overlay" stepKey="commentValidateRightEdgeOfOverlay"/>
47+
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().right" stepKey="wrapperRightPosition"/>
48+
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().right" stepKey="overlayRightPosition"/>
49+
<executeJS function="return Math.round(({$wrapperRightPosition}-{$overlayRightPosition})*100)/100" stepKey="overlayPadding"/>
50+
<assertEquals stepKey="assertOverlayIsEqualToPadding">
51+
<expectedResult type="int">{{padding.paddingRight}}</expectedResult>
52+
<actualResult type="variable">overlayPadding</actualResult>
53+
</assertEquals>
54+
<!-- Validate left edge of overlay -->
55+
<comment userInput="Validate left edge of overlay" stepKey="commentValidateLeftEdgeOfOverlay"/>
56+
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().right-{{page.wrapperJS(index)}}.getBoundingClientRect().width/2" stepKey="wrapperRightMinusWidthHalf"/>
57+
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().left" stepKey="overlayLeftPosition"/>
58+
<executeJS function="return Math.round(({$wrapperRightMinusWidthHalf}/{$overlayLeftPosition})*100)/100" stepKey="overlayLeftRatio"/>
59+
<assertEquals stepKey="assertOverlayLeftRatio">
60+
<expectedResult type="int">1</expectedResult>
61+
<actualResult type="variable">overlayLeftRatio</actualResult>
62+
</assertEquals>
63+
</actionGroup>
64+
<!-- Checks the position of the overlay with small padding value. This action group may not work with large padding values -->
65+
<actionGroup name="validateOverlayPositionCollageCenter">
66+
<arguments>
67+
<argument name="page"/>
68+
<argument name="index" defaultValue="1" type="string"/>
69+
<argument name="padding" defaultValue="PageBuilderPaddingProperty40"/>
70+
</arguments>
71+
<!-- Validate right edge of overlay -->
72+
<executeJS function="return ({{page.wrapperJS(index)}}.getBoundingClientRect().width+{{padding.paddingLeft}}+{{padding.paddingRight}})*.25" stepKey="wrapperWidthMinusPadding25"/>
73+
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().right-{{page.overlayJS(index)}}.getBoundingClientRect().right" stepKey="overlayRightPosition"/>
74+
<executeJS function="return Math.round(({$wrapperWidthMinusPadding25}/{$overlayRightPosition})*100)/100" stepKey="overlayRightRatio"/>
75+
<assertEquals stepKey="assertOverlayRightRatio">
76+
<expectedResult type="int">1</expectedResult>
77+
<actualResult type="variable">overlayRightRatio</actualResult>
78+
</assertEquals>
79+
<!-- Validate left edge of overlay -->
80+
<comment userInput="Validate left edge of overlay" stepKey="commentValidateLeftEdgeOfOverlay"/>
81+
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().left-{{page.wrapperJS(index)}}.getBoundingClientRect().left" stepKey="overlayLeftPosition"/>
82+
<executeJS function="return Math.round(({$wrapperWidthMinusPadding25}/{$overlayLeftPosition})*100)/100" stepKey="overlayLeftRatio"/>
83+
<assertEquals stepKey="assertOverlayLeftRatio">
84+
<expectedResult type="int">1</expectedResult>
85+
<actualResult type="variable">overlayLeftRatio</actualResult>
86+
</assertEquals>
87+
</actionGroup>
88+
<!-- Overlay Position -->
89+
<actionGroup name="validateOverlayPositionTop">
90+
<arguments>
91+
<argument name="page"/>
92+
<argument name="index" defaultValue="1" type="string"/>
93+
<argument name="padding" defaultValue="PageBuilderPaddingProperty40"/>
94+
</arguments>
95+
<!-- Validate top edge of overlay with padding -->
96+
<comment userInput="Validate top edge of overlay with padding" stepKey="commentValidateTopEdgeOfOverlayWithPadding"/>
97+
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().top" stepKey="wrapperTopPosition"/>
98+
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().top-{{padding.paddingTop}}" stepKey="overlayTopPositionWithPadding"/>
99+
<executeJS function="return Math.round(({$overlayTopPositionWithPadding}/{$wrapperTopPosition})*100)/100" stepKey="overlayTopRatio"/>
100+
<assertEquals stepKey="assertOverlayTopRatio">
101+
<expectedResult type="int">1</expectedResult>
102+
<actualResult type="variable">overlayTopRatio</actualResult>
103+
</assertEquals>
104+
</actionGroup>
105+
<actionGroup name="validateOverlayPositionBottom">
106+
<arguments>
107+
<argument name="page"/>
108+
<argument name="index" defaultValue="1" type="string"/>
109+
<argument name="padding" defaultValue="PageBuilderPaddingProperty40"/>
110+
</arguments>
111+
<!-- Bottom edge validation is skipped until MC-4116 -->
112+
<!-- Validate bottom edge of overlay -->
113+
<!--<comment userInput="Validate bottom edge of overlay" stepKey="commentValidateBottomEdgeOfOverlay"/>-->
114+
<!--<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().top+{{padding.paddingTop}}+120" stepKey="wrapperTopPaddingContent"/>-->
115+
<executeJS function="return {{page.overlayJS(index)}}.getBoundingClientRect().bottom" stepKey="overlayBottomPosition"/>
116+
<!--<assertEquals stepKey="assertOverlayBottomRatio">-->
117+
<!--<expectedResult type="variable">wrapperTopPaddingContent</expectedResult>-->
118+
<!--<actualResult type="variable">overlayBottomPosition</actualResult>-->
119+
<!--</assertEquals>-->
120+
<!-- Validate bottom edge of overlay is within parent -->
121+
<comment userInput="Validate bottom edge of overlay is within parent" stepKey="commentValidateBottomEdgeOfOverlayIsWithinParent"/>
122+
<executeJS function="return {{page.wrapperJS(index)}}.getBoundingClientRect().bottom" stepKey="wrapperBottomPosition"/>
123+
<assertLessThanOrEqual stepKey="assertOverlayBottomIsWithinParent">
124+
<expectedResult type="variable">wrapperBottomPosition</expectedResult>
125+
<actualResult type="variable">overlayBottomPosition</actualResult>
126+
</assertLessThanOrEqual>
127+
</actionGroup>
128+
</actionGroups>

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

Lines changed: 0 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -259,71 +259,4 @@
259259
<data key="value">abc</data>
260260
<data key="errorMessage">Please enter a valid number in this field.</data>
261261
</entity>
262-
<!-- Padding -->
263-
<entity name="PageBuilderBannerCollageLeftPaddingPropertyDefault" type="pagebuilder_banner_collage_left_padding_property">
264-
<data key="name">Margins and Padding</data>
265-
<data key="section">advanced</data>
266-
<data key="fieldName">margins_and_padding</data>
267-
<data key="paddingTop">40</data>
268-
<data key="paddingRight">40</data>
269-
<data key="paddingBottom">40</data>
270-
<data key="paddingLeft">40</data>
271-
<data key="desktopValue">40px calc(50% + 40px) 40px 40px</data>
272-
<data key="mobileValue">40px 40px 40px 40px</data>
273-
</entity>
274-
<entity name="PageBuilderBannerCollageLeftPaddingPropertyUnique" type="pagebuilder_banner_collage_left_padding_property">
275-
<data key="name">Margins and Padding</data>
276-
<data key="section">advanced</data>
277-
<data key="fieldName">margins_and_padding</data>
278-
<data key="paddingTop">1</data>
279-
<data key="paddingRight">2</data>
280-
<data key="paddingBottom">3</data>
281-
<data key="paddingLeft">4</data>
282-
<data key="desktopValue">1px calc(50% + 2px) 3px 4px</data>
283-
<data key="mobileValue">1px 2px 3px 4px</data>
284-
</entity>
285-
<entity name="PageBuilderBannerCollageCenterPaddingPropertyDefault" type="pagebuilder_banner_collage_center_padding_property">
286-
<data key="name">Margins and Padding</data>
287-
<data key="section">advanced</data>
288-
<data key="fieldName">margins_and_padding</data>
289-
<data key="paddingTop">1</data>
290-
<data key="paddingRight">2</data>
291-
<data key="paddingBottom">3</data>
292-
<data key="paddingLeft">4</data>
293-
<data key="desktopValue">40px calc(25% + 40px)</data>
294-
<data key="mobileValue">40px 40px 40px 40px</data>
295-
</entity>
296-
<entity name="PageBuilderBannerCollageCenterPaddingPropertyUnique" type="pagebuilder_banner_collage_center_padding_property">
297-
<data key="name">Margins and Padding</data>
298-
<data key="section">advanced</data>
299-
<data key="fieldName">margins_and_padding</data>
300-
<data key="paddingTop">1</data>
301-
<data key="paddingRight">2</data>
302-
<data key="paddingBottom">3</data>
303-
<data key="paddingLeft">4</data>
304-
<data key="desktopValue">1px calc(25% + 2px) 3px calc(25% + 4px)</data>
305-
<data key="mobileValue">1px 2px 3px 4px</data>
306-
</entity>
307-
<entity name="PageBuilderBannerCollageRightPaddingPropertyDefault" type="pagebuilder_banner_collage_right_padding_property">
308-
<data key="name">Margins and Padding</data>
309-
<data key="section">advanced</data>
310-
<data key="fieldName">margins_and_padding</data>
311-
<data key="paddingTop">1</data>
312-
<data key="paddingRight">2</data>
313-
<data key="paddingBottom">3</data>
314-
<data key="paddingLeft">4</data>
315-
<data key="desktopValue">40px 40px 40px calc(50% + 40px)</data>
316-
<data key="mobileValue">40px 40px 40px 40px</data>
317-
</entity>
318-
<entity name="PageBuilderBannerCollageRightPaddingPropertyUnique" type="pagebuilder_banner_collage_right_padding_property">
319-
<data key="name">Margins and Padding</data>
320-
<data key="section">advanced</data>
321-
<data key="fieldName">margins_and_padding</data>
322-
<data key="paddingTop">1</data>
323-
<data key="paddingRight">2</data>
324-
<data key="paddingBottom">3</data>
325-
<data key="paddingLeft">4</data>
326-
<data key="desktopValue">1px 2px 3px calc(50% + 4px)</data>
327-
<data key="mobileValue">1px 2px 3px 4px</data>
328-
</entity>
329262
</entities>

0 commit comments

Comments
 (0)