Merge pull request #164 from magento-obsessive-owls/owls-ce

[Owls] PageBuilder Bug Fixes with core changes

Author: cpartica

.gitignore

@@ -4,3 +4,5 @@
 **.d.js
 /dev/tests/acceptance/vendor
 static-error-log.xml
+.DS_Store
+.vscode

CONTRIBUTING.md

@@ -1,27 +1,5 @@
 # Contributing to Magento 2 code
 
-<!--{% comment %}-->
-## Navigation
-
-1. [Introduction]
-2. [Installation guide]
-3. **Contribution guide**
-    1. [Overview](#overview)
-    1. [Contribution requirements](#contribution-requirements)
-    1. [Contribution process](#contribution-process)
-    1. [Code of Conduct](#code-of-conduct)
-4. [Developer documentation]
-5. [Roadmap and known issues]
-6. [How to create custom PageBuilder content type container]
-
-[Introduction]: docs/introduction.md
-[Installation guide]: docs/install.md
-[Developer documentation]: docs/developer-documentation.md
-[Roadmap and Known Issues]: docs/roadmap.md
-[How to create custom PageBuilder content type container]: docs/how-to-create-custom-content-type-container.md
-<!--{% endcomment %}-->
-
-<!-- {% raw %} -->
 ## Overview
 
 Contributions to the Magento 2 codebase are done using the fork & pull model.
@@ -31,25 +9,23 @@ Contributions can take the form of new components/features, changes to existing
 
 The Magento 2 development team will review all issues and contributions submitted by the community of developers in the first in, first out order. During the review we might require clarifications from the contributor. If there is no response from the contributor for two weeks, the issue is closed.
 
-
 ## Contribution requirements
 
 1. Contributions must adhere to [Magento coding standards](http://devdocs.magento.com/guides/v2.0/coding-standards/bk-coding-standards.html).
 2. Pull requests (PRs) must be accompanied by a meaningful description of their purpose. Comprehensive descriptions increase the chances of a pull request to be merged quickly and without additional clarification requests.
 3. Commits must be accompanied by meaningful commit messages.
 4. PRs which include bug fixing, must be accompanied with step-by-step description of how to reproduce the bug.
-3. PRs which include new logic or new features must be submitted along with:
-* Unit/integration test coverage where applicable.
-* Updated documentation in the module directory `app/code/PageBuilder/docs`.
-4. For large features or changes, please [open an issue](https://github.com/magento/magento2/issues) and discuss first. This may prevent duplicate or unnecessary effort, and it may gain you some additional contributors.
-5. All automated tests are passed successfully locally. After PR submitted Magento team will run builds on continuous integration environment.
+5. PRs which include new logic or new features must be submitted along with:
+    * Unit/integration test coverage where applicable.
+    * Updated documentation in the `docs` directory at the root level.
+6. For large features or changes, please [open an issue](https://github.com/magento/magento2/issues) and discuss first. This may prevent duplicate or unnecessary effort, and it may gain you some additional contributors.
+7. All automated tests are passed successfully locally. After PR submitted Magento team will run builds on continuous integration environment.
 
 ## Contribution process
 
 If you are a new GitHub user, we recommend that you create your own [free github account](https://github.com/signup/free). By doing that, you will be able to collaborate with the Magento 2 development team, “fork” the Magento 2 project and be able to easily send “pull requests”.
 
-1. Search current [listed issues](https://github.com/magento/magento2-page-builder/issues) on GitHub (open or closed) and [list of known issues](docs/roadmap.md#Known Issues) on our roadmap for similar proposals of intended contribution before starting work on a new contribution.
-2. Please contact us in Slack chanel if you want to work on issue from [list of known issues](docs/roadmap.md#Known Issues).
+1. Search current [listed issues](https://github.com/magento/magento2-page-builder/issues) on GitHub (open or closed) before starting work on a new contribution.
 2. Review the [Contributor License Agreement](https://magento.com/legaldocuments/mca) if this is your first time contributing.
 3. Create and test your work.
 4. Fork the Magento 2 repository according to [Fork a repository instructions](http://devdocs.magento.com/guides/v2.0/contributor-guide/contributing.html#fork) and when you are ready to send us a pull request – follow [Create a pull request instructions](http://devdocs.magento.com/guides/v2.0/contributor-guide/contributing.html#pull_request). Instructions written for `https://github.com/magento/magento2` repository, but they also apply to `https://github.com/magento/magento2-page-builder`.
@@ -59,5 +35,3 @@ If you are a new GitHub user, we recommend that you create your own [free github
 
 Please note that this project is released with a Contributor Code of Conduct. We expect you to agree to its terms when participating in this project.
 The full text is available in the repository [Wiki](https://github.com/magento/magento2/wiki/Magento-Code-of-Conduct).
-
-<!-- {% endraw %} -->

README.md

@@ -9,72 +9,77 @@ The PageBuilder Early Access Program (EAP) gives partners the following perks:
 * Explore PageBuilder extension points to build custom modules and integrations for 3rd party services, such as Facebook, Instagram, etc.
 * Try out PageBuilder customization options and extend its functionality beyond its default features.
 * Preview PageBuilder to prepare a migration plan from BlueFoot 1.0 to PageBuilder.
- 
+
 **Note:**
 *This program should not be used to design and launch a production website using early code.*
 
 ## Installation
 
 We offer one method for installing PageBuilder:
 
+* As a [Composer package] - use this option if you do not plan to contribute to the PageBuilder code repository.
+* Using the [GitHub repository] - use this option to install PageBuilder from the GitHub repository and contribute to the code.
 
-* Using the [GitHub repository] - use this option to install PageBuilder from the GitHub repository and contribute to the code 
+[Composer package]: docs/install-pagebuilder.md#composer-installation
+[GitHub repository]: docs/install-pagebuilder.md#github-installation
 
-[Composer package]: docs/install.md#composer-installation
-[GitHub repository]: docs/install.md#github-installation
+<!-- {% comment %} -->
 
 ## Developer documentation
 
-This project repository contains PageBuilder developer documentation on the following topics:
-
-1. [Architecture overview]
-1. [BlueFoot to PageBuilder data migration]
-1. [Third-party content type migration]
-1. [Iconography]
-1. [Module integration]
-1. [Additional data configuration]
-1. [Content type configuration]
-1. [How to add a new content type]
-1. [Events]
-1. [Bindings]
-1. [Master format]
-1. [Visual select]
-1. [Custom Toolbar]
-
-[Architecture overview]: docs/architecture-overview.md
-[BlueFoot to PageBuilder data migration]: docs/bluefoot-data-migration.md
-[Third-party content type migration]: docs/new-content-type-example.md
-[Iconography]: docs/iconography.md
-[Module integration]: docs/module-integration.md
-[Additional data configuration]: docs/custom-configuration.md
-[Content type configuration]: docs/content-type-configuration.md
-[How to add a new content type]: docs/how-to-add-new-content-type.md
-[Events]: docs/events.md
-[Bindings]: docs/bindings.md
-[Master format]: docs/master-format.md
-[Visual select]: docs/visual-select.md
-[Custom Toolbar]: docs/toolbar.md
+### Getting Started
 
-## Contribute to PageBuilder
+1. [Introduction](docs/getting-started/introduction.md)
+2. [Install Page Builder](docs/getting-started/install-pagebuilder.md)
+3. [Activate Page Builder](docs/getting-started/activate-pagebuilder.md)
+
+### Customizations
+
+* [Block chooser](docs/customizations/block-chooser.md)
+* [Full-width page layouts](docs/customizations/full-width-page-layouts.md)
+* [Responsive layouts](docs/customizations/responsive-layouts.md)
+* [Storefront customization](docs/customizations/storefront-customization.md)
+* [Visual selects](docs/customizations/visual-selects.md)
+* [Additional data configuration](docs/customizations/additional-data-configuration.md)
+* [Product conditions](docs/customizations/product-conditions.md)
+* [Server-side rendered previews](docs/customizations/server-side-rendered-previews.md)
+
+### How Tos
+
+* [How to develop a new content type](docs/how-to/how-to-develop-new-content-type.md)
+* [How to develop a container content type](docs/how-to/how-to-develop-container-content-type.md)
+* [How to use the Image Uploader](docs/how-to/how-to-use-image-uploader.md)
+* [How to add inline text editing](docs/how-to/how-to-add-inline-text-editing.md)
+* [How to add a custom toolbar](docs/how-to/how-to-add-custom-toolbar.md)
+* [How to convert product attribute fields to use Page Builder](docs/how-to/how-to-convert-product-attributes-to-use-pagebuilder.md)
+* [How to store a component master format as a widget-directive](docs/how-to/how-to-store-master-format-as-widget-directive.md)
+
+### Reference
 
-We appreciate any and all contributions to PageBuilder. 
-A good place to start is by looking at our [features roadmap] and list of [known issues].
+* [Architecture](docs/reference/architecture.md)
+* [Events](docs/reference/events.md)
+* [Knockout bindings](docs/reference/knockout-bindings.md)
+* [Configuration](docs/reference/configuration.md)
+* [Master format](docs/reference/master-format.md)
 
-If you are interested in contributing to this repository, please see our [Contribution Guide].
+### Migration
+
+* [Migrate from BlueFoot](docs/migration/migrate-from-bluefoot.md)
+* [Migrate custom content types from BlueFoot](docs/migration/migrate-custom-content-types-from-bluefoot.md)
+  
+<!-- {% endcomment %} -->
+
+## Contribute to PageBuilder
+
+We appreciate any and all contributions to PageBuilder. If you are interested in contributing to this repository, please see our [Contribution Guide].
 
 [Contribution Guide]: CONTRIBUTING.md
-[features roadmap]: docs/roadmap.md#planned-features-and-functionality
-[known issues]: docs/roadmap.md#known-issues
 
 ## PageBuilder updates from the Magento core team
 
 The PageBuilder team updates the code every 2 weeks.
 **These changes may introduce breaking changes.**
 
-To help you prepare for these changes, we are publishing a [roadmap] of features and issues that we are going to work on in the following months.
-
-[roadmap]: docs/roadmap.md
-
 ## Provide feedback
 
 We want to hear what you think of PageBuilder!

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderBannerSection.xml

@@ -34,6 +34,7 @@
         <element name="messageContent" type="text" selector="(//div[@data-role='banner'])[{{arg1}}]//div[@data-element='wrapper']//div[@data-element='content']//p[.='{{arg2}}']" parameterized="true"/>
         <element name="noMessageContent" type="text" selector="(//div[@data-role='banner'])[{{arg1}}]//div[@data-element='wrapper']//div[@data-element='content'][.='Edit Banner Text'][not(*)]" parameterized="true"/>
         <element name="messageContentTextArea" type="text" selector="(//div[@data-role='banner'])[{{arg1}}]//div[@data-element='wrapper']//div[@data-element='content'][.='{{arg2}}']" parameterized="true"/>
+        <element name="messageContentTextAreaImage" type="text" selector="(//div[@data-role='banner'])[{{arg1}}]//div[@data-element='wrapper']//div[@data-element='content']//img[contains(@src, {{arg2}})]" parameterized="true"/>
         <element name="messageContentTextAreaTextWidget" type="text" selector="(//div[@data-role='banner'])[{{arg1}}]//div[@data-element='content']//a[contains(@href,'{{arg2}}{{arg3}}')]" parameterized="true"/>
         <element name="messageContentText" type="text" selector="(//div[@data-role='banner'])[{{arg1}}]//div[@data-element='content']//*[contains(text(),'{{arg2}}')]" parameterized="true"/>
         <element name="messageContentHeightJS" type="text" selector="return document.evaluate(&quot;(//div[@data-role='banner'])[{{arg1}}]//div[@data-element='content']//div[contains(text(),'{{arg2}}')]&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.clientHeight;" parameterized="true"/>
@@ -100,6 +101,7 @@
         <element name="showOverlay" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}][@data-show-overlay='{{arg2}}']" parameterized="true"/>
         <element name="overlayColorAndTransparency" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='overlay'][contains(@style,'background-color: rgba({{arg2}}, {{arg3}});')]" parameterized="true"/>
         <element name="transparentOverlay" type="button" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='overlay'][contains(@style,'background-color: transparent;')]" parameterized="true"/>
+        <element name="inlineWYSIWYGEditorWithTag" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[contains(@class,'inline-wysiwyg')]//{{arg2}}" parameterized="true"/>
         <!-- Advanced Configuration -->
         <element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='wrapper'][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
         <element name="noAlignment" type="text" selector="(//div[contains(@class,'pagebuilder-banner') and @data-element='main'])[{{arg1}}]//div[@data-element='wrapper'][not(contains(@style,'text-align:'))]" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderImageSection.xml

@@ -42,7 +42,7 @@
         <element name="backgroundImageSource" type="text" selector="//div[contains(@style,'{{var1}}')]" parameterized="true"/>
         <element name="imageDisplay" type="button" selector="figure[data-role='image']"/>
         <element name="imageElement" type="button" selector="figure[data-role='image'] img:nth-child({{arg1}})" parameterized="true"/>
-        <element name="imageElementCSS" type="text" selector="figure[data-role=image] img" />
+        <element name="imageElementCSS" type="text" selector="figure[data-role=image] img"/>
         <element name="imageHasAltText" type="button" selector="img.pagebuilder-mobile-hidden[alt='{{arg1}}']" parameterized="true"/>
         <element name="imageHasCaption" type="button" selector="figcaption"/>
         <element name="imageHasTitleTag" type="button" selector="img.pagebuilder-mobile-hidden[title='{{arg1}}']" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderSliderSection.xml

@@ -90,6 +90,7 @@
         <element name="messageContent" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='content']//p[.='{{arg2}}']" parameterized="true"/>
         <element name="noMessageContent" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='wrapper']//div[@data-element='content'][not(*)]" parameterized="true"/>
         <element name="messageContentTextArea" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='wrapper']//div[@data-element='content'][.='{{arg2}}']" parameterized="true"/>
+        <element name="messageContentTextAreaImage" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='wrapper']//div[@data-element='content']//img[contains(@src, {{arg2}})]" parameterized="true"/>
         <element name="messageContentTextAreaTextWidget" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='content']//a[contains(@href,'{{arg2}}{{arg3}}')]" parameterized="true"/>
         <element name="messageContentText" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='content']//*[contains(text(),'{{arg2}}')]" parameterized="true"/>
         <element name="messageContentHeightJS" type="text" selector="return document.evaluate(&quot;(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='content']//*[contains(text(),'{{arg2}}')]&quot;, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.clientHeight;" parameterized="true"/>
@@ -159,6 +160,7 @@
         <element name="showOverlay" type="button" selector="(//div[@data-role='slide'])[{{arg1}}][@data-show-overlay='{{arg2}}']" parameterized="true"/>
         <element name="overlayColorAndTransparency" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='overlay' or contains(@class,'pagebuilder-overlay')][contains(@style,'background-color: rgba({{arg2}}, {{arg3}});')]" parameterized="true"/>
         <element name="transparentOverlay" type="button" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@data-element='overlay' or contains(@class,'pagebuilder-overlay')][contains(@style,'background-color: transparent;')]" parameterized="true"/>
+        <element name="inlineWYSIWYGEditorWithTag" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[contains(@class,'inline-wysiwyg')]//{{arg2}}" parameterized="true"/>
         <!-- Advanced Configuration -->
         <element name="posterAlignment" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@class='pagebuilder-slide-wrapper'][contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
         <element name="posterNoAlignment" type="text" selector="(//div[@data-role='slide'])[{{arg1}}]//div[@class='pagebuilder-slide-wrapper'][not(contains(@style,'text-align:'))]" parameterized="true"/>

app/code/Magento/PageBuilder/Test/Mftf/Section/PageBuilderTextSection.xml

@@ -27,6 +27,7 @@
         <element name="textInImportantStyle" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//div[contains(normalize-space(@class), 'cms-content-important') and text()='{{arg2}}']" parameterized="true"/>
         <element name="emptyTextInImportantStyle" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//div[contains(normalize-space(@class), 'cms-content-important')]" parameterized="true"/>
         <element name="imageSource" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//img[contains(@src,'{{var1}}')]" parameterized="true"/>
+        <element name="inlineWYSIWYGEditorWithTag" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]//div[contains(@class,'inline-wysiwyg')]//{{arg2}}" parameterized="true"/>
         <!-- Advanced Configuration -->
         <element name="alignment" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]/div[contains(@style,'text-align: {{arg2}};')]" parameterized="true"/>
         <element name="noAlignment" type="text" selector="(//div[contains(@class,'pagebuilder-text')])[{{arg1}}]/div[not(contains(@style,'text-align:'))]" parameterized="true"/>
@@ -68,6 +69,7 @@
         <element name="notHidden" type="text" selector="(//div[@data-role='text'])[{{arg1}}][not(contains(@style, 'display: none'))]" parameterized="true"/>
         <element name="baseJs" type="text" selector="document.querySelectorAll('[data-role=\'text\']')[{{arg1}}]" parameterized="true"/>
         <element name="textAreaWidget" type="text" selector="(//div[@data-role='text'])[{{arg1}}]//a[contains(@href,'{{arg2}}{{arg3}}{{arg4}}')]" parameterized="true"/>
+        <element name="messageContentTextAreaImage" type="text" selector="(//div[@data-role='text'])[{{arg1}}]//img[contains(@src, {{arg2}})]" parameterized="true"/>
         <element name="textWidget" type="text" selector="(//div[@data-role='text'])[{{arg1}}]//a[contains(@href,'{{arg2}}{{arg3}}')]" parameterized="true"/>
         <element name="textAreaText" type="text" selector="(//div[@data-role='text'])[{{arg1}}][contains(text(),'{{arg2}}')]" parameterized="true"/>
         <element name="textAreaVariable" type="text" selector="(//div[@data-role='text'])[{{arg1}}]//a[contains(@href,'{{arg2}}{{arg3}}')]" parameterized="true"/>