MAGETWO-92697: Add vertical alignment to column configuration

- return empty string if path is optional
- do not read data if path is optional

Author: anthoula

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

@@ -204,7 +204,7 @@ private function convertDataMapping(\DOMElement $childNode): array
         $elementData = [];
         foreach ($childNode->getElementsByTagName('element') as $elementNode) {
             $elementName = $elementNode->attributes->getNamedItem('name')->nodeValue;
-            $elementPath = $elementNode->attributes->getNamedItem('path')->nodeValue;
+            $elementPath = ($elementNode->attributes->getNamedItem('path') ? $elementNode->attributes->getNamedItem('path')->nodeValue : '');
             $elementData[$elementName] = [
                 'path' => $elementPath,
                 'style' => $this->convertProperties($elementNode),

app/code/Magento/PageBuilder/view/adminhtml/web/js/master-format/read/configurable.js

@@ -36,43 +36,50 @@ export default class Configurable implements ReadInterface {
                 let data = {};
                 for (const elementName of Object.keys(config.elements)) {
                     const elementConfig = config.elements[elementName];
-                    const xpathResult = document.evaluate(
-                        elementConfig.path,
-                        element,
-                        null,
-                        XPathResult.FIRST_ORDERED_NODE_TYPE,
-                        null,
-                    );
-                    const currentElement = xpathResult.singleNodeValue;
-                    if (currentElement === null || currentElement === undefined) {
-                        continue;
-                    }
-                    if (elementConfig.style.length) {
-                        data = this.readStyle(
-                            elementConfig.style,
-                            currentElement,
-                            data,
-                            propertyReaderPool,
-                            converterPool,
-                        );
-                    }
-                    if (elementConfig.attributes.length) {
-                        data = this.readAttributes(
-                            elementConfig.attributes,
-                            currentElement,
-                            data,
-                            propertyReaderPool,
-                            converterPool,
+                    // Do not read if path is optional
+                    console.log(elementConfig);
+                    if (elementConfig.path !== "") {
+                        console.log("path");
+                        const xpathResult = document.evaluate(
+                            elementConfig.path,
+                            element,
+                            null,
+                            XPathResult.FIRST_ORDERED_NODE_TYPE,
+                            null,
                         );
-                    }
-                    if (undefined !== elementConfig.html.var) {
-                        data = this.readHtml(elementConfig, currentElement, data, converterPool);
-                    }
-                    if (undefined !== elementConfig.tag.var) {
-                        data = this.readHtmlTag(elementConfig, currentElement, data);
-                    }
-                    if (undefined !== elementConfig.css.var) {
-                        data = this.readCss(elementConfig, currentElement, data);
+                        const currentElement = xpathResult.singleNodeValue;
+                        if (currentElement === null || currentElement === undefined) {
+                            continue;
+                        }
+                        if (elementConfig.style.length) {
+                            data = this.readStyle(
+                                elementConfig.style,
+                                currentElement,
+                                data,
+                                propertyReaderPool,
+                                converterPool,
+                            );
+                        }
+                        if (elementConfig.attributes.length) {
+                            data = this.readAttributes(
+                                elementConfig.attributes,
+                                currentElement,
+                                data,
+                                propertyReaderPool,
+                                converterPool,
+                            );
+                        }
+                        if (undefined !== elementConfig.html.var) {
+                            data = this.readHtml(elementConfig, currentElement, data, converterPool);
+                        }
+                        if (undefined !== elementConfig.tag.var) {
+                            data = this.readHtmlTag(elementConfig, currentElement, data);
+                        }
+                        if (undefined !== elementConfig.css.var) {
+                            data = this.readCss(elementConfig, currentElement, data);
+                        }
+                    } else {
+                        console.log("no path");
                     }
                 }
                 data = this.convertData(config, data, massConverterPool);