Skip to content

Commit 9f66551

Browse files
author
Michael Yu
committed
MC-3363: Additional configuration node changes
- Updated property and static_property to style and static_style nodes in configuration - Updated configuration schemas for the above changes - Updated integration tests for above changes - Updated documentation for above changes
1 parent 5353de4 commit 9f66551

33 files changed

+608
-610
lines changed

‎app/code/Magento/PageBuilder/Model/Config/ContentType/Converter.php

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ private function convertAppearanceData(\DOMElement $appearanceNode): array
125125
$appearanceData = [];
126126
$appearanceData = array_merge(
127127
$appearanceData,
128-
$this->convertAppearanceProperties($appearanceNode)
128+
$this->convertAppearanceStyles($appearanceNode)
129129
);
130130
$readerNode = $appearanceNode->getElementsByTagName('reader')->item(0);
131131
if ($readerNode && $readerNode->nodeValue) {
@@ -155,7 +155,7 @@ private function convertAppearanceData(\DOMElement $appearanceNode): array
155155
* @param \DOMElement $elementNode
156156
* @return array
157157
*/
158-
private function convertAppearanceProperties(\DOMElement $elementNode): array
158+
private function convertAppearanceStyles(\DOMElement $elementNode): array
159159
{
160160
$data = [];
161161
foreach ($elementNode->getElementsByTagName('data') as $dataNode) {
@@ -215,7 +215,7 @@ private function convertElements(\DOMElement $childNode): array
215215
foreach ($childNode->getElementsByTagName('element') as $elementNode) {
216216
$elementName = $elementNode->attributes->getNamedItem('name')->nodeValue;
217217
$elementData[$elementName] = [
218-
'style' => $this->convertProperties($elementNode),
218+
'style' => $this->convertStyles($elementNode),
219219
'attributes' => $this->convertAttributes($elementNode),
220220
'html' => $this->convertHtml($elementNode),
221221
'css' => $this->convertCss($elementNode),
@@ -258,35 +258,35 @@ private function convertAdditionalData(\DOMElement $elementNode): array
258258
}
259259

260260
/**
261-
* Convert properties
261+
* Convert styles
262262
*
263263
* @param \DOMElement $elementNode
264264
* @return array
265265
*/
266-
private function convertProperties(\DOMElement $elementNode): array
266+
private function convertStyles(\DOMElement $elementNode): array
267267
{
268-
$propertiesData = [];
269-
foreach ($elementNode->getElementsByTagName('property') as $propertyNode) {
270-
$propertiesData[] = [
271-
'var' => $this->extractVariableName($propertyNode),
272-
'name' => $this->getAttributeValue($propertyNode, 'source'),
273-
'converter' => $this->getAttributeValue($propertyNode, 'converter'),
274-
'preview_converter' => $this->getAttributeValue($propertyNode, 'preview_converter'),
275-
'persistence_mode' => $this->getAttributeValue($propertyNode, 'persistence_mode')
268+
$stylesData = [];
269+
foreach ($elementNode->getElementsByTagName('style') as $styleNode) {
270+
$stylesData[] = [
271+
'var' => $this->extractVariableName($styleNode),
272+
'name' => $this->getAttributeValue($styleNode, 'source'),
273+
'converter' => $this->getAttributeValue($styleNode, 'converter'),
274+
'preview_converter' => $this->getAttributeValue($styleNode, 'preview_converter'),
275+
'persistence_mode' => $this->getAttributeValue($styleNode, 'persistence_mode')
276276
?? 'readwrite',
277-
'reader' => $this->getAttributeValue($propertyNode, 'reader')
277+
'reader' => $this->getAttributeValue($styleNode, 'reader')
278278
?? self::DEFAULT_PROPERTY_READER,
279279
];
280280
}
281-
foreach ($elementNode->getElementsByTagName('static_property') as $propertyNode) {
282-
$propertiesData[] = [
283-
'name' => $this->getAttributeValue($propertyNode, 'source'),
284-
'value' => $this->getAttributeValue($propertyNode, 'value'),
281+
foreach ($elementNode->getElementsByTagName('static_style') as $styleNode) {
282+
$stylesData[] = [
283+
'name' => $this->getAttributeValue($styleNode, 'source'),
284+
'value' => $this->getAttributeValue($styleNode, 'value'),
285285
'static' => true
286286
];
287287
}
288288

289-
return $propertiesData;
289+
return $stylesData;
290290
}
291291

292292
/**
@@ -556,7 +556,7 @@ private function getAttributeValue(\DOMElement $attributeNode, $attributeName)
556556
}
557557

558558
/**
559-
* Extract variable name from property and attribute nodes
559+
* Extract variable name from style and attribute nodes
560560
*
561561
* @param \DOMElement $node
562562
* @return string

‎app/code/Magento/PageBuilder/Model/Config/ContentType/Reader.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ class Reader extends \Magento\Framework\Config\Reader\Filesystem
2424
self::TYPE_PATH . '/appearances/appearance' => 'name',
2525
self::TYPE_PATH . '/appearances/appearance/data' => 'name',
2626
self::TYPE_PATH . '/appearances/appearance/elements/element' => 'name',
27-
self::TYPE_PATH . '/appearances/appearance/elements/element/property'
27+
self::TYPE_PATH . '/appearances/appearance/elements/element/style'
2828
=> 'name',
29-
self::TYPE_PATH . '/appearances/appearance/elements/element/static_property'
29+
self::TYPE_PATH . '/appearances/appearance/elements/element/static_style'
3030
=> 'source',
3131
self::TYPE_PATH . '/additional_data/item' => 'name',
3232
self::TYPE_PATH . '/appearances/appearance/elements/element/attribute' => 'name',

‎app/code/Magento/PageBuilder/docs/content-type-configuration.md

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -98,11 +98,11 @@ The following is an example of a content type configuration in `view/adminhtml/p
9898
reader="Magento_PageBuilder/js/master-format/read/configurable">
9999
<elements>
100100
<element name="main">
101-
<property name="border" source="border_style"/>
102-
<property name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
103-
<property name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
104-
<property name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
105-
<property name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
101+
<style name="border" source="border_style"/>
102+
<style name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
103+
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
104+
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
105+
<style name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
106106
<attribute name="name" source="data-role"/>
107107
<attribute name="appearance" source="data-appearance"/>
108108
<attribute name="show_button" source="data-show-button"/>
@@ -116,37 +116,37 @@ The following is an example of a content type configuration in `view/adminhtml/p
116116
<attribute name="virtual_link_type" storage_key="link_url" source="data-link-type" converter="Magento_PageBuilder/js/converter/attribute/link-type" persistence_mode="write"/>
117117
</element>
118118
<element name="overlay">
119-
<property name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
120-
<property name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/banner/style/overlay-background-color" persistence_mode="write"/>
121-
<property name="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
119+
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
120+
<style name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/banner/style/overlay-background-color" persistence_mode="write"/>
121+
<style name="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
122122
<attribute name="overlay_color" source="data-overlay-color" converter="Magento_PageBuilder/js/converter/banner/attribute/overlay-color" persistence_mode="read"/>
123123
<attribute name="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/converter/banner/attribute/overlay-transparency" persistence_mode="read"/>
124124
<attribute name="virtual_overlay_transparency" storage_key="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/converter/banner/attribute/overlay-color-transparency" persistence_mode="write"/>
125125
</element>
126126
<element name="desktop_image">
127-
<property name="text_align" source="text_align"/>
128-
<property name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
129-
<property name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
130-
<property name="background_position" source="background_position"/>
131-
<property name="background_size" source="background_size"/>
132-
<property name="background_repeat" source="background_repeat" converter="Magento_PageBuilder/js/converter/style/background-repeat"/>
133-
<property name="background_attachment" source="background_attachment"/>
127+
<style name="text_align" source="text_align"/>
128+
<style name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
129+
<style name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
130+
<style name="background_position" source="background_position"/>
131+
<style name="background_size" source="background_size"/>
132+
<style name="background_repeat" source="background_repeat" converter="Magento_PageBuilder/js/converter/style/background-repeat"/>
133+
<style name="background_attachment" source="background_attachment"/>
134134
</element>
135135
<element name="mobile_image">
136-
<property name="text_align" source="text_align"/>
137-
<property name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
138-
<property name="mobile_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
139-
<property name="background_position" source="background_position"/>
140-
<property name="background_size" source="background_size"/>
141-
<property name="background_repeat" source="background_repeat" converter="Magento_PageBuilder/js/converter/style/background-repeat"/>
142-
<property name="background_attachment" source="background_attachment"/>
136+
<style name="text_align" source="text_align"/>
137+
<style name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
138+
<style name="mobile_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
139+
<style name="background_position" source="background_position"/>
140+
<style name="background_size" source="background_size"/>
141+
<style name="background_repeat" source="background_repeat" converter="Magento_PageBuilder/js/converter/style/background-repeat"/>
142+
<style name="background_attachment" source="background_attachment"/>
143143
</element>
144144
<element name="content">
145145
<html name="message"/>
146146
</element>
147147
<element name="button">
148-
<property name="opacity" source="opacity" converter="Magento_PageBuilder/js/converter/banner/style/button-opacity" persistence_mode="write"/>
149-
<property name="visibility" source="visibility" converter="Magento_PageBuilder/js/converter/banner/style/button-visibility" persistence_mode="write"/>
148+
<style name="opacity" source="opacity" converter="Magento_PageBuilder/js/converter/banner/style/button-opacity" persistence_mode="write"/>
149+
<style name="visibility" source="visibility" converter="Magento_PageBuilder/js/converter/banner/style/button-visibility" persistence_mode="write"/>
150150
<html name="button_text"/>
151151
<css name="button_type">
152152
<filter>
@@ -306,9 +306,9 @@ Set the `default` attribute to "true" in an `appearance` node to set the default
306306
``` xml
307307
<elements>
308308
<element name="main">
309-
<property name="border" source="border_style"/>
310-
<property name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
311-
<property name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
309+
<style name="border" source="border_style"/>
310+
<style name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
311+
<style name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
312312
<attribute name="name" source="data-role"/>
313313
<css name="css_classes"/>
314314
</element>
@@ -324,17 +324,17 @@ Set the `default` attribute to "true" in an `appearance` node to set the default
324324
<attribute name="virtual_overlay_transparency" storage_key="overlay_transparency" source="data-overlay-color" converter="Magento_PageBuilder/js/converter/banner/attribute/overlay-color-transparency" persistence_mode="write"/>
325325
</element>
326326
<element name="desktop_image">
327-
<property name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
327+
<style name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
328328
</element>
329329
<element name="mobile_image">
330-
<property name="mobile_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
330+
<style name="mobile_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
331331
</element>
332332
<element name="content">
333333
<html name="message"/>
334334
</element>
335335
<element name="button">
336-
<property name="opacity" source="opacity" converter="Magento_PageBuilder/js/converter/banner/style/button-opacity" persistence_mode="write"/>
337-
<property name="visibility" source="visibility" converter="Magento_PageBuilder/js/converter/banner/style/button-visibility" persistence_mode="write"/>
336+
<style name="opacity" source="opacity" converter="Magento_PageBuilder/js/converter/banner/style/button-opacity" persistence_mode="write"/>
337+
<style name="visibility" source="visibility" converter="Magento_PageBuilder/js/converter/banner/style/button-visibility" persistence_mode="write"/>
338338
<html name="button_text"/>
339339
<css name="button_type">
340340
<filter>
@@ -372,17 +372,17 @@ You may optionally set a `reader` value in configuration, otherwise `Magento_Pag
372372
`property` and `attribute` can contain `converter` and `preview_converter`.
373373

374374
``` xml
375-
<property name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
375+
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
376376
```
377377

378-
`static_property` and `static_attribute` allows you to add specific style properites or attributes to an element.
378+
`static_style` and `static_attribute` allows you to add specific style properites or attributes to an element.
379379

380-
`static_property` and `static_attribute` do not contain `converter` and `preview_converter` elements.
380+
`static_style` and `static_attribute` do not contain `converter` and `preview_converter` elements.
381381

382382
``` xml
383383
<element name="desktop_image">
384-
<static_property source="max-width" value="100%"/>
385-
<static_property source="height" value="auto"/>
384+
<static_style source="max-width" value="100%"/>
385+
<static_style source="height" value="auto"/>
386386
</element>
387387
```
388388

0 commit comments

Comments
 (0)