Merge pull request #29 from magento-devdocs/MAGEDOC-3644

MAGEDOC-3644: Post GA release docs cleanup

Author: bdenham

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/step-1-add-configuration.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-2-add-templates.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-3-add-components.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-4-add-form.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-6-add-icon.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 topics
+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)

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

@@ -1,10 +1,10 @@
 # Overview
 
-One of quickest ways to customize Page Builder is by changing how _existing_ content types look and behave. End-users can already edit Page Builder's content types in several ways. But sometimes your end-users will want to change the structure or modify properties that do not exist on a given content type. In those cases, you can extend an existing content type by customizing its existing _appearance_ or adding a new _appearance_.
+One of the quickest ways to customize Page Builder is by changing how _existing_ content types look and behave. End users can already use Page Builder's content types to customize their content using the form editor. But your end users may want to change the structure or set properties that do not exist on the content type. In those cases, you can extend an existing content type by customizing its  _appearance_ or adding a new _appearance_.
 
 ## Appearances
 
-An **appearance** is an XML element in a content type's configuration file that lets you modify existing properties, templates, styles, and form fields, or create new ones. In other words, all Page Builder content types (existing or custom) are extended through appearances.
+An **appearance** is an XML element (in the content type's configuration file) that defines a view for your content type. This view defines HTML templates, styles, form fields, and other elements that you can customize in various ways. To extend existing Page Builder content types, you can either modify existing appearances or create new ones.
 
 Many of Page Builder's content types have only one `appearance` element. These include the Heading, Text, Image, Video, Tabs, and more. Other content types have several appearances. For example, the Banner content type has four appearances, as shown here:
 
@@ -21,7 +21,8 @@ Page Builder defines these appearances in the Banner's configuration file (`Mage
 </appearances>
 ```
 
-Within each `appearance` element, you can change content types in the following ways:
+In Page Builder 1.0.0, when you customize content types that have multiple appearances (like the Banner), you must apply your changes to all the appearances, not just one. Customizing a single appearance of a content type that defines multiple appearances is not currently supported.  
+You can use appearances to change content types in the following ways:
 
 - Add new style properties.
 - Add or change templates.
@@ -31,19 +32,19 @@ Within each `appearance` element, you can change content types in the following
 
 ## Banner extension tutorial
 
-In this tutorial, you will extend the Banner content type by adding a new `max-height` style property to two of the Banner's existing appearances: `collage-left` and `collage-right`.
+In this tutorial, you will learn how to extend one of Page Builder's existing content types by adding a new `max-height` style property to the Banner's existing appearances.
 
 ![Page Builder Banner menu item](../images/extend-banner-menu.png){:width="815px" height="auto"}
 
 ## Banner extension steps
 
-These steps show the basic pattern for adding style properties using existing appearances to extend a content type:
+These steps show the basic pattern for adding style properties and form fields to existing content type appearances:
 
 ![Creating Custom Content Types](../images/extension-steps-overview.svg)
 
 1. **Create an extension module**: Create a basic module for your Banner extensions.
 2. **Extend appearances**: Extend the existing content type's configuration file by customizing an existing appearance with new style properties.
-3. **Extend forms**: Extend the existing content type's UI component form by adding new form fields and changing defaults for existing fields.
+3. **Extend forms**: Extend the existing content type's UI component form by adding new form fields and/or changing defaults for existing fields.
 
 ## Next
 

docs/create-custom-content-type/whats-next.md

@@ -1,16 +1,16 @@
 # Step 1: Create an extension module
 
-Appearance extensions for Page Builder are implemented using modules. In this step, we will create an empty module so we can add our appearance and form extensions in steps 2 and 3, as shown here:
+The first step to creating appearance customizations for existing Page Builder content types is to create a standard Magento module. In this step, we create an empty module so we can add our appearance and form extensions in steps 2 and 3:
 
 ![Completed extension file structure](../images/extension-file-structure-complete.png){:width="826px" height="auto"}
 
-## Add directory structure
+## Add a directory structure
 
 To create a module for the Banner extensions, name your vendor directory `Example` and name your module `PageBuilderExtensionBanner`, as shown here:
 
 ![Minimum extension module structure](../images/banner-extension-file-structure.png){:width="530px" height="auto"}
 
-The convention for naming extension modules is to prefix your extension of an existing content type with `PageBuilderExtension`, followed by the name of the content type. This is not a required convention, but we find that it helps visually group extension modules within your vendor directory.
+The convention for naming extension modules is to prefix your extension of an existing content type with `PageBuilderExtension`, followed by the name of the content type. This is not a required convention, but we find it helps group extension modules within your vendor directory.
 
 ## Add module file