Merge pull request #244 from magento-devdocs/develop

[Owls] Sync GA release docs with mainline

Author: cspruiell

dev/tests/integration/testsuite/Magento/PageBuilder/_files/uploader/a.png

@@ -1,6 +1,6 @@
 # Component status
 
-**Last Updated: February 14, 2019**
+**Last Updated: March 26, 2019**
 
 <style type="text/css" style="display: none">
 .status {

docs/comp-status2.md

@@ -16,7 +16,7 @@ And the same three Quote controls are shown rendered here on a mock testimonial
 
 ## Quote module
 
-As with most things in Magento, content types for Page Builder are housed in modules. The convention for naming modules that are solely dedicated to Page Builder, such as our Quote content type, is to prefix all the content type name with `PageBuilder`. This helps visually group content type modules within your vendor directory. Of course, this convention doesn't apply If you are adding a content type as part of an existing module.
+As with most things in Magento, content types for Page Builder are housed in modules. The convention for naming modules that are solely dedicated to Page Builder, such as our Quote content type, is to prefix all content type names with `PageBuilder`. This helps visually group content type modules within your vendor directory. Of course, this convention does not apply if you are adding a content type as part of an existing module.
 
 Applying this convention to the module for our Quote content type, we get the name `PageBuilderQuote`, and can set up our module as shown here:
 
@@ -28,7 +28,7 @@ After registering your module (`bin/magento setup:upgrade`) you will be ready to
 
 The steps for creating the Quote content type are illustrated and described below. The reality is not quite this linear, but these steps do represent the basic phases and flow for building new Page Builder content types.
 
-![Creating Custom Content Types](../images/content-type-overview.png)
+![Creating Custom Content Types](../images/content-type-overview.svg)
 
 1. **Add configuration**: Create an XML file to define your content type and reference the other files that control the appearance and behavior of your content type.  
 2. **Add templates**: Create HTML templates that define the appearance of your content types on the Admin stage (`preview.html`) and the storefront (`master.html`).

docs/create-container-content-type/overview.md

@@ -70,6 +70,7 @@ The `type` element defines the key properties of your content type. The attribut
 | `icon`              | Optional. Class name for your PNG or SVG image (or font icon) displayed in the Page Builder panel alongside the label. If you don't provide an icon value, the Page Builder panel displays the content type name without an icon. |
 | `sortOrder`         | Optional. The listed order within the menu section. For example, `sortOrder=21` puts the content type third in the `Elements` menu section, after the content types with `sortOrder` values of 10 and 20. |
 | `translate`         | Identifies the attribute you want Magento to translate. Here, the `label` value is set for translation. |
+{:style="table-layout:auto"}
 
 ## The  `children` element
 

docs/create-custom-content-type/overview.md

@@ -62,6 +62,7 @@ The following table describes each `appearance` attribute in our example.
 | `preview_template` | References the `preview.html` (the Admin preview template) for rendering the preview appearance of your content type on the stage within the Admin UI. |
 | `master_template`  | References the `master.html` (the master format storefront template) for rendering the appearance of your content type on the storefront for customers to see. |
 | `reader`           | Reads content type data from the master format.      |
+{:style="table-layout:auto"}
 
 ## Quote `preview_template`
 

docs/create-custom-content-type/step-1-add-configuration.md

@@ -67,6 +67,7 @@ A description of each component-related attribute from the Quote configuration f
 | `component`         | Page Builder provides two component types to choose from: `content-type` and `content-type-collection`. Use `Magento_PageBuilder/js/content-type` for static content types that do not have children (like our Quote). Use `Magento_PageBuilder/js/content-type-collection` for content types that can contain children (container content types). You can also create and specify your own component implementations, provided they conform to the Page Builder interfaces. |
 | `preview_component` | Optional. The `preview.js` file provides rendering logic to the Admin preview template. If your content type does not require any changes to Page Builder's standard rendering logic, you can omit this attribute from the the `type` element. When you omit the attribute, Page Builder will use `Magento_PageBuilder/js/content-type/preview` by default.<br /><br />However, if you want to make changes to the option menu for your content type, or other customize other user-interactivity in the Admin, you need to create your own preview component as we have done for the Quote content type. |
 | `master_component`  | Optional. The `master.js` file provides rendering logic to the master format storefront template. As with the `preview_component`, if your content type does not require any specific user-interactivity or other behavior when it's displayed in the storefront, you can simply omit this attribute from the the `type` element. When you omit the attribute, Page Builder will use `Magento_PageBuilder/js/content-type/master` by default. <br /><br />In the Quote configuration, the `master_component` attribute is only included for discussion. It simply points to the Page Builder default `master.js` component that would be used the attribute was omitted. |
+{:style="table-layout:auto"}
 
 ## Quote `preview_component`
 

docs/create-custom-content-type/step-2-add-templates.md

@@ -56,6 +56,7 @@ In your configuration file, add your form name (without the .xml file extension)
 | Attribute | Description                                                  |
 | --------- | ------------------------------------------------------------ |
 | `form`    | Name of the UI component form that provides the form editor for your content type. |
+{:style="table-layout:auto"}
 
 ## The Quote form
 
@@ -71,6 +72,7 @@ The purpose of each field is described as follows:
 | Author        | A text input field for the author's name.                    |
 | Description   | A text input field to describe the author's title or origin of the quote. |
 | CSS for Quote | A text input field for end-users to add CSS class names for styling the text in the Quote field. This option is detailed in [Step 5: Add styles](step-5-add-styles.md). |
+{:style="table-layout:auto"}
 
 The Quote form is shown in full here for you to copy into your `pagebuilder_example_form.xml` file, followed by descriptions of the key parts.
 
@@ -234,6 +236,7 @@ Page Builder requires fields to be grouped within named `<fieldset>` elements. F
 | ----------- | ------------------------------------------------------------ |
 | `name`      | You can name your fieldset whatever you want. Currently, it has no significance for data binding. |
 | `sortOrder` | Determines where Page Builder puts the fieldset within the editor in relation to other fieldsets. Page Builder sets the `sortOrder` for the `pagebuilder_base_form` fieldset to `90`. Setting your fieldset to a value less than that (such as `20`) will put your fieldset above both inherited fieldsets. A value greater than `90` will put your fieldset below the inherited fieldsets. |
+{:style="table-layout:auto"}
 
 ### field
 
@@ -244,6 +247,7 @@ The `<field>` element creates the actual HTML form element as specified by the `
 | `name`        | The name of the field used for data bindings.                |
 | `sortOrder`   | Determines where Page Builder puts the field within the fieldset in relation to other fields. |
 | `formElement` | Determines the HTML form element to render for the field.    |
+{:style="table-layout:auto"}
 
 ### data source
 
@@ -277,6 +281,7 @@ The `<settings>` element defines the data scope, data type, and label to use for
 | `dataScope` | Specifies the name of your input field for data binding. The `dataScope` node allows you to change the value of the `name` attribute for your input field. We do not need to change the field name value, so we keep our dataScope value the same as our field name. |
 | `dataType`  | Specifies the data type for the field's data. Common values are `text` and `boolean`. |
 | `label`     | Specifies the text label applied to the input field on the form. |
+{:style="table-layout:auto"}
 
 ## Quote form layout
 
@@ -340,6 +345,7 @@ The `<element>` element provides a scope for the data bindings within it.
 | Attribute | Description                                                  |
 | --------- | ------------------------------------------------------------ |
 | `name`    | Specifies the name of the element scope for the data binding when applied to template elements. In our example, the element name of `main` is used as the scope for binding styles and other attributes to the top-level `<div>` element in our template: `<div attr="data.main.attributes" ko-style="data.main.style">` |
+{:style="table-layout:auto"}
 
 #### style
 
@@ -353,6 +359,7 @@ The `<style>` element configures the bindings from the form style fields to the
 | `preview_converter` | Converts the value for the preview. Used for cases where the conversion logic is different between the two views. |
 | `storage_key`       | Optional variable name for value in the data storage. If no value is provided, the `name` attribute will be used. |
 | `reader`            | Reader used for parsing attributes and properties out of the DOM. Should not be used with read-only persistence_mode. |
+{:style="table-layout:auto"}
 
 #### attribute
 
@@ -362,6 +369,7 @@ The `<attribute>` element provides a mechanism to attach DOM attributes to templ
 | --------- | ------------------------------------------------------------ |
 | `name`    | Unique name used for configuration merging, and the default value for storage_key if none is provided. |
 | `source`  | The name of the property or attribute in the DOM. Must be in snake_case. |
+{:style="table-layout:auto"}
 
 #### css
 
@@ -370,6 +378,7 @@ The `<css>` element sets the binding for the CSS Classes form field (`css_classe
 | Attribute | Description                                      |
 | --------- | ------------------------------------------------ |
 | `name`    | Specifies the name of the form field to bind to. |
+{:style="table-layout:auto"}
 
 For example, in our Quote configuration, we define an `<element>` named `quote` with a `<css>` element bound to an input field in our form named `quote_css`, as shown here: 
 
@@ -415,6 +424,7 @@ The `<html>` element binds the HTML content entered in a form field. When the `<
 | Attribute | Description                                      |
 | --------- | ------------------------------------------------ |
 | `name`    | Specifies the name of the form field to bind to. |
+{:style="table-layout:auto"}
 
 For example, as with the previous `css` binding, the Quote configuration defines the `<element>` named `quote` with an `<html>` element that is bound to an input field in our form named `quote_text`, as shown here: 
 

docs/create-custom-content-type/step-3-add-components.md

@@ -50,6 +50,7 @@ The CSS for integrating SVG and PNG images with the font icons used by Page Buil
 | `width`         | Sets the width of the content area that most closely matches the widths of Page Builder icon fonts. |
 | `height`        | Sets the height of the content area that most closely matches the widths of Page Builder icon fonts. |
 | `margin-bottom` | Pulls the SVG or PNG image down within the panel container to more closely match the positioning of Page Builder's font icon. |
+{:style="table-layout:auto"}
 
 When deployed, your icon images are linked from `pub/static` as shown here: 
 
@@ -77,7 +78,6 @@ The last step is to add our icon's class name to our config file. Previous to th
 That's it. Now you can regenerate your static assets, empty your browser cache, and do a hard reload of your Admin page to see your new icon in the panel. 
 
 ## Next
-
-Congratulations! You just finished the last step in this tutorial. To wrap things up, find out [What's next](whats-next.md).
+[Tutorial summary](summary.md).
 
 

docs/create-custom-content-type/step-4-add-form.md

@@ -0,0 +1,26 @@
+# Summary
+
+If you made it this far, congratulations! We hope this tutorial was useful for learning the basics of creating a completely new content type for your end users. 
+
+## Next steps
+Review the following topics to learn more about customizing Page Builder:
+
+### Tutorials
+
+- [Extend an existing content type](../extend-existing-content-type/overview.md)
+
+### How-Tos
+
+- [How to customize the Page Builder panel](../how-to/how-to-customize-panel.md)
+- [How to add an image uploader](../how-to/how-to-add-image-uploader.md)
+- [How to add a storefront widget](../how-to/how-to-add-storefront-widget.md)
+- [How to add a custom toolbar](../how-to/how-to-add-custom-toolbar.md)
+- [How to add icons and images](../how-to/how-to-add-icons-images.md)
+- [How to change breakpoints](../how-to/how-to-change-breakpoints.md)
+
+### Reference
+
+- [Page Builder configurations](../reference/configurations.md)
+- [Page Builder Datastore](../reference/data-store.md)
+- [Page Builder events](../reference/events.md)
+- [Page Builder Knockout bindings](../reference/knockout-bindings.md)