Skip to content

Commit 21642f2

Browse files
davemacaulaydavemacaulay
authored
Merge pull request #131 from magento-obsessive-owls/cms-team-1-delivery
[CMS Team 1] Updated Background Images for Column, Row & Tabs. Fix alpha on colour picker
2 parents 9d40f18 + c7d77e0 commit 21642f2

File tree

114 files changed

+2239
-2325
lines changed

Some content is hidden

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

114 files changed

+2239
-2325
lines changed

‎app/code/Magento/PageBuilder/Model/Config/ContentType/AdditionalData/Provider/Uploader/MaxFileSize.php

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎app/code/Magento/PageBuilder/Plugin/Filter/TemplatePlugin.php

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<?php
2+
/**
3+
* Copyright © Magento, Inc. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
declare(strict_types=1);
7+
8+
namespace Magento\PageBuilder\Plugin\Filter;
9+
10+
/**
11+
* Plugin to the template filter to process any background images added by Page Builder
12+
*/
13+
class TemplatePlugin
14+
{
15+
const DATA_BACKGROUND_IMAGE = 'data-background-images';
16+
17+
/**
18+
* @var \Magento\Framework\View\ConfigInterface
19+
*/
20+
private $viewConfig;
21+
22+
/**
23+
* @var \Psr\Log\LoggerInterface
24+
*/
25+
private $logger;
26+
27+
/**
28+
* @param \Psr\Log\LoggerInterface $logger
29+
* @param \Magento\Framework\View\ConfigInterface $viewConfig
30+
*/
31+
public function __construct(
32+
\Psr\Log\LoggerInterface $logger,
33+
\Magento\Framework\View\ConfigInterface $viewConfig
34+
) {
35+
$this->logger = $logger;
36+
$this->viewConfig = $viewConfig;
37+
}
38+
39+
/**
40+
* @param \Magento\Framework\Filter\Template $subject
41+
* @param string $result
42+
*
43+
* @return string
44+
* @SuppressWarnings(PHPMD.UnusedFormalParameter)
45+
*/
46+
public function afterFilter(\Magento\Framework\Filter\Template $subject, string $result) : string
47+
{
48+
// Validate if the filtered result requires background image processing
49+
if (strpos($result, self::DATA_BACKGROUND_IMAGE) !== false) {
50+
$domDocument = new \DOMDocument('1.0', 'UTF-8');
51+
set_error_handler(
52+
function ($errorNumber, $errorString) {
53+
throw new \Exception($errorString, $errorNumber);
54+
}
55+
);
56+
$string = mb_convert_encoding($result, 'HTML-ENTITIES', 'UTF-8');
57+
$wrapperElementId = uniqid();
58+
try {
59+
libxml_use_internal_errors(true);
60+
$domDocument->loadHTML(
61+
'<html><body id="' . $wrapperElementId . '">' . $string . '</body></html>'
62+
);
63+
libxml_clear_errors();
64+
} catch (\Exception $e) {
65+
restore_error_handler();
66+
$this->logger->critical($e);
67+
}
68+
restore_error_handler();
69+
$xpath = new \DOMXPath($domDocument);
70+
71+
$this->generateBackgroundImageStyles($xpath);
72+
73+
// Match the contents of the body from our generated document
74+
preg_match(
75+
'/<body id="' . $wrapperElementId . '">(.+)<\/body><\/html>$/si',
76+
$domDocument->saveHTML(),
77+
$matches
78+
);
79+
80+
return !empty($matches) ? $matches[1] : $result;
81+
}
82+
return $result;
83+
}
84+
85+
/**
86+
* Generate the CSS for any background images on the page
87+
*
88+
* @param \DOMXPath $xpath
89+
*/
90+
private function generateBackgroundImageStyles(\DOMXPath $xpath) : void
91+
{
92+
$nodes = $xpath->query('//*[@' . self:: DATA_BACKGROUND_IMAGE . ']');
93+
foreach ($nodes as $node) {
94+
/* @var \DOMElement $node */
95+
$backgroundImages = $node->attributes->getNamedItem(self:: DATA_BACKGROUND_IMAGE);
96+
if ($backgroundImages->nodeValue !== '') {
97+
$elementClass = uniqid('background-image-');
98+
$images = json_decode(stripslashes($backgroundImages->nodeValue), true);
99+
if (count($images) > 0) {
100+
$style = $xpath->document->createElement(
101+
'style',
102+
$this->generateCssFromImages($elementClass, $images)
103+
);
104+
$style->setAttribute("type", "text/css");
105+
$node->parentNode->appendChild($style);
106+
107+
// Append our new class to the DOM element
108+
$classes = '';
109+
if ($node->attributes->getNamedItem('class')) {
110+
$classes = $node->attributes->getNamedItem('class')->nodeValue . ' ';
111+
}
112+
$node->setAttribute('class', $classes . $elementClass);
113+
}
114+
}
115+
}
116+
}
117+
118+
/**
119+
* Generate CSS based on the images array from our attribute
120+
*
121+
* @param string $elementClass
122+
* @param array $images
123+
*
124+
* @return string
125+
*/
126+
private function generateCssFromImages(string $elementClass, array $images) : string
127+
{
128+
$css = [];
129+
if (isset($images['desktop_image'])) {
130+
$css['.' . $elementClass] = [
131+
'background-image' => 'url(' . $images['desktop_image'] . ')',
132+
];
133+
}
134+
if (isset($images['mobile_image']) && $this->getMobileMediaQuery()) {
135+
$css[$this->getMobileMediaQuery()]['.' . $elementClass] = [
136+
'background-image' => 'url(' . $images['mobile_image'] . ')',
137+
];
138+
}
139+
return $this->cssFromArray($css);
140+
}
141+
142+
/**
143+
* Generate a CSS string from an array
144+
*
145+
* @param array $css
146+
*
147+
* @return string
148+
*/
149+
private function cssFromArray(array $css) : string
150+
{
151+
$output = "";
152+
foreach ($css as $selector => $body) {
153+
if (is_array($body)) {
154+
$output .= $selector . " {";
155+
$output .= $this->cssFromArray($body);
156+
$output .= "}";
157+
} else {
158+
$output .= $selector . ': ' . $body . ";";
159+
}
160+
}
161+
return $output;
162+
}
163+
164+
/**
165+
* Generate the mobile media query from view configuration
166+
*
167+
* @return null|string
168+
*/
169+
private function getMobileMediaQuery() : ?string
170+
{
171+
$breakpoints = $this->viewConfig->getViewConfig()->getVarValue(
172+
'Magento_PageBuilder',
173+
'breakpoints/mobile/conditions'
174+
);
175+
if ($breakpoints && count($breakpoints) > 0) {
176+
$mobileBreakpoint = "@media only screen ";
177+
foreach ($breakpoints as $key => $value) {
178+
$mobileBreakpoint .= "and (" . $key . ": " . $value . ") ";
179+
}
180+
return rtrim($mobileBreakpoint);
181+
}
182+
return null;
183+
}
184+
}

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

Lines changed: 57 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,25 @@
88

99
<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
1010
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
11+
<actionGroup name="validateBackgroundAttributes">
12+
<arguments>
13+
<argument name="section"/>
14+
<argument name="backgroundColor"/>
15+
<argument name="backgroundImage"/>
16+
<argument name="backgroundPosition" defaultValue="PageBuilderBackgroundPosition_Default"/>
17+
<argument name="backgroundSize" defaultValue="PageBuilderBackgroundSize_Default"/>
18+
<argument name="backgroundRepeat" defaultValue="PageBuilderBackgroundRepeat_Default"/>
19+
<argument name="backgroundAttachment" defaultValue="PageBuilderBackgroundAttachment_Default"/>
20+
<argument name="index" defaultValue="1" type="string"/>
21+
</arguments>
22+
<waitForElementVisible selector="{{section.base(index)}}" stepKey="waitForBaseElement"/>
23+
<waitForElementVisible selector="{{section.backgroundColor(index, backgroundColor.rgb)}}" stepKey="waitForBackgroundColor"/>
24+
<waitForElementVisible selector="{{section.backgroundImage(index, backgroundImage.fileName)}}" stepKey="waitForBackgroundImage"/>
25+
<waitForElementVisible selector="{{section.backgroundPosition(index, backgroundPosition.styleValue)}}" stepKey="waitForBackgroundPosition"/>
26+
<waitForElementVisible selector="{{section.backgroundSize(index, backgroundSize.value)}}" stepKey="waitForBackgroundSize"/>
27+
<waitForElementVisible selector="{{section.backgroundRepeat(index, backgroundRepeat.styleValue)}}" stepKey="waitForBackgroundRepeat"/>
28+
<waitForElementVisible selector="{{section.backgroundAttachment(index, backgroundAttachment.value)}}" stepKey="waitForBackgroundAttachment"/>
29+
</actionGroup>
1130
<actionGroup name="validateBackgroundAttributesWithNoImageOrColor">
1231
<arguments>
1332
<argument name="section"/>
@@ -139,7 +158,43 @@
139158
<executeJS function="return '{$baseURL}'.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\\\^\\$\|]/g, '\\\\$&amp;')" stepKey="regexBaseURL"/>
140159
<executeJS function="return '{{backgroundImage.path}}'.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\\\^\\$\|]/g, '\\\\$&amp;')" stepKey="regexFilePath"/>
141160
<assertRegExp stepKey="assertBackgroundImageContainsFileInformation">
142-
<expectedResult type="string">/{$regexBaseURL}\/pub\/media.*{$regexFilePath}\/{{backgroundImage.fileName}}(_\d+)?\.{{backgroundImage.extension}}/</expectedResult>
161+
<expectedResult type="string">/{$regexBaseURL}\/(pub\/|\/)?media.*{$regexFilePath}\/{{backgroundImage.fileName}}(_\d+)?\.{{backgroundImage.extension}}/</expectedResult>
162+
<actualResult type="variable">$backgroundImageValue</actualResult>
163+
</assertRegExp>
164+
</actionGroup>
165+
<actionGroup name="validateNoBackgroundImage">
166+
<arguments>
167+
<argument name="section"/>
168+
<argument name="index" defaultValue="1" type="string"/>
169+
</arguments>
170+
<comment userInput="validateBackgroundImage" stepKey="comment"/>
171+
<waitForElementVisible selector="{{section.base(index)}}" stepKey="waitForBaseElement"/>
172+
<!-- Retrieve background image from computed styles -->
173+
<executeJS function="return window.getComputedStyle({{section.baseJS(index)}}).backgroundImage" stepKey="backgroundImageValue"/>
174+
<assertEquals stepKey="assertBackgroundImageNone">
175+
<expectedResult type="string">none</expectedResult>
176+
<actualResult type="variable">$backgroundImageValue</actualResult>
177+
</assertEquals>
178+
</actionGroup>
179+
<actionGroup name="validateBackgroundImageContainer">
180+
<arguments>
181+
<argument name="section"/>
182+
<argument name="pageNamePrefix" defaultValue="admin" type="string"/>
183+
<argument name="backgroundImage"/>
184+
<argument name="index" defaultValue="1" type="string"/>
185+
</arguments>
186+
<comment userInput="validateBackgroundImage" stepKey="comment"/>
187+
<waitForElementVisible selector="{{section.base(index)}}" stepKey="waitForBaseElement"/>
188+
<!-- Retrieve background image from computed styles -->
189+
<executeJS function="return window.getComputedStyle({{section.baseJS(index)}}).backgroundImage" stepKey="backgroundImageValue"/>
190+
<!-- Grab base URL -->
191+
<executeJS function="return '{{pageNamePrefix}}'" stepKey="pageNamePrefix"/>
192+
<grabFromCurrentUrl regex="/(^.+(?=\/$pageNamePrefix))/" stepKey="baseURL"/>
193+
<!-- Convert all characters in string variables to regex friendly strings -->
194+
<executeJS function="return '{$baseURL}'.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\\\^\\$\|]/g, '\\\\$&amp;')" stepKey="regexBaseURL"/>
195+
<executeJS function="return '{{backgroundImage.path}}'.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\\\^\\$\|]/g, '\\\\$&amp;')" stepKey="regexFilePath"/>
196+
<assertRegExp stepKey="assertBackgroundImageContainsFileInformation">
197+
<expectedResult type="string">/{$regexBaseURL}\/(pub\/|\/)?media.*{$regexFilePath}\/{{backgroundImage.fileName}}(_\d+)?\.{{backgroundImage.extension}}/</expectedResult>
143198
<actualResult type="variable">$backgroundImageValue</actualResult>
144199
</assertRegExp>
145200
</actionGroup>
@@ -164,7 +219,7 @@
164219
<executeJS function="return '{$baseURL}'.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\\\^\\$\|]/g, '\\\\$&amp;')" stepKey="regexBaseURL"/>
165220
<executeJS function="return '{{backgroundMobileImage.path}}'.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\\\^\\$\|]/g, '\\\\$&amp;')" stepKey="regexFilePath"/>
166221
<assertRegExp stepKey="assertBackgroundMobileImageContainsFileInformation">
167-
<expectedResult type="string">/{$regexBaseURL}\/pub\/media.*{$regexFilePath}\/{{backgroundMobileImage.fileName}}(_\d+)?\.{{backgroundMobileImage.extension}}/</expectedResult>
222+
<expectedResult type="string">/{$regexBaseURL}\/(pub\/|\/)?media.*{$regexFilePath}\/{{backgroundMobileImage.fileName}}(_\d+)?\.{{backgroundMobileImage.extension}}/</expectedResult>
168223
<actualResult type="variable">$backgroundMobileImageValue</actualResult>
169224
</assertRegExp>
170225
<resizeWindow width="767" height="1000" stepKey="resizeWindowToMobile"/>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
<argument name="url" defaultValue=""/>
1616
<argument name="width" defaultValue=""/>
1717
</arguments>
18+
<waitForPageLoad stepKey="waitForPageLoad"/>
1819
<waitForElementVisible selector="{{page.base(index)}}" stepKey="waitForElement"/>
1920
<waitForElementVisible selector="{{page.source(index, url.renderedValue)}}" stepKey="waitForUrl"/>
2021
<waitForElementVisible selector="{{page.width(index, width.value)}}" stepKey="waitForWidth"/>

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

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,9 @@
7474
<data key="section">background</data>
7575
<data key="fieldName">background_color</data>
7676
<data key="value">rgba(0, 0, 254, 0.92)</data>
77-
<data key="rgb">rgb(0, 0, 254)</data>
78-
<data key="hex">#0000fe</data>
79-
<data key="editPanelValue">#0000fe</data>
77+
<data key="rgb">rgba(0, 0, 254, 0.92)</data>
78+
<data key="hex">rgba(0, 0, 254, 0.92)</data>
79+
<data key="editPanelValue">rgba(0, 0, 254, 0.92)</data>
8080
</entity>
8181
<entity name="PageBuilderBackgroundColor_HSL_Orange" type="pagebuilder_background_color_property">
8282
<data key="name">Background Color</data>
@@ -87,6 +87,15 @@
8787
<data key="hex">#ff8400</data>
8888
<data key="editPanelValue">#ff8400</data>
8989
</entity>
90+
<entity name="PageBuilderBackgroundColor_HSLa_Orange" type="pagebuilder_background_color_property">
91+
<data key="name">Background Color</data>
92+
<data key="section">background</data>
93+
<data key="fieldName">background_color</data>
94+
<data key="value">hsla(31, 100%, 50%, .3)</data>
95+
<data key="rgb">rgba(255, 132, 0, 0.3)</data>
96+
<data key="hex">#ff8400</data>
97+
<data key="editPanelValue">rgba(255, 132, 0, 0.3)</data>
98+
</entity>
9099
<entity name="PageBuilderBackgroundColor_HSV_Orange" type="pagebuilder_background_color_property">
91100
<data key="name">Background Color</data>
92101
<data key="section">background</data>
@@ -96,6 +105,15 @@
96105
<data key="hex">#a96836</data>
97106
<data key="editPanelValue">#a96836</data>
98107
</entity>
108+
<entity name="PageBuilderBackgroundColor_HSVa_Orange" type="pagebuilder_background_color_property">
109+
<data key="name">Background Color</data>
110+
<data key="section">background</data>
111+
<data key="fieldName">background_color</data>
112+
<data key="value">hsva(26.09, 68.05, 66.27, .4)</data>
113+
<data key="rgb">rgba(169, 104, 54, 0.4)</data>
114+
<data key="hex">#a96836</data>
115+
<data key="editPanelValue">rgba(169, 104, 54, 0.4)</data>
116+
</entity>
99117
<entity name="PageBuilderBackgroundColor_CenterColorPicker" type="pagebuilder_background_color_property">
100118
<data key="name">Background Color</data>
101119
<data key="section">background</data>
@@ -143,7 +161,7 @@
143161
<data key="value">magento3.jpg</data>
144162
<data key="fileName">magento3</data>
145163
<data key="extension">jpg</data>
146-
<data key="path">wysiwyg/magento3</data>
164+
<data key="path">wysiwyg</data>
147165
</entity>
148166
<entity name="PageBuilderBackgroundImageRoot_JPG" type="pagebuilder_background_image_property">
149167
<data key="name">Background Image</data>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
<data key="fieldName">line_color</data>
5353
<data key="value">rgba(255, 87, 51, 0.5)</data>
5454
<data key="rgb">rgba(255, 87, 51, 0.5)</data>
55-
<data key="editPanelValue">#ff5733</data>
55+
<data key="editPanelValue">rgba(255, 87, 51, 0.5)</data>
5656
</entity>
5757
<entity name="PageBuilderDividerLineColor_HSL11_100_60" type="pagebuilder_divider_line_color_property">
5858
<data key="name">Line Color</data>

0 commit comments

Comments
 (0)