MAGEDOC-3644: Post GA release docs cleanup

bdenham · bdenham · commit d45a32eab4d0 · 2019-03-27T13:42:34.000-05:00
Table formatting fixes and tutorial summary udpate
diff --git a/docs/create-container-content-type/overview.md b/docs/create-container-content-type/overview.md
diff --git a/docs/create-custom-content-type/step-1-add-configuration.md b/docs/create-custom-content-type/step-1-add-configuration.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
 
diff --git a/docs/create-custom-content-type/step-2-add-templates.md b/docs/create-custom-content-type/step-2-add-templates.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`
 
diff --git a/docs/create-custom-content-type/step-3-add-components.md b/docs/create-custom-content-type/step-3-add-components.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`
 
diff --git a/docs/create-custom-content-type/step-4-add-form.md b/docs/create-custom-content-type/step-4-add-form.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: 
 
diff --git a/docs/create-custom-content-type/step-6-add-icon.md b/docs/create-custom-content-type/step-6-add-icon.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).
+[Summary](summary.md).
 
 
diff --git a/docs/create-custom-content-type/summary.md b/docs/create-custom-content-type/summary.md
@@ -0,0 +1,17 @@
+# Summary
+
+If you made it this far, congratulations! We hope this tutorial has been useful to learning the basics of creating a completely new content type for your end-users.
+
+Here's a list of good next topics to learn more about customizing Page Builder to meet your needs:
+
+- [Extend an existing content type](../extend-existing-content-type/overview.md)
+- [How to customize the Page Builder panel](page-builder/docs/how-to/how-to-customize-panel.md)
+- [How to add an image uploader](page-builder/docs/how-to/how-to-add-image-uploader.md)
+- [How to add a storefront widget](page-builder/docs/how-to/how-to-add-storefront-widget.md)
+- [How to add a custom toolbar](page-builder/docs/how-to/how-to-add-custom-toolbar.md)
+- [How to add icons and images](page-builder/docs/how-to/how-to-add-icons-images.md)
+- [How to change breakpoints](page-builder/docs/how-to/how-to-change-breakpoints.md)
+- [Page Builder configurations](page-builder/docs/reference/configurations.md)
+- [Page Builder Datastore](page-builder/docs/reference/data-store.md)
+- [Page Builder events](page-builder/docs/reference/events.md)
+- [Page Builder Knockout bindings](page-builder/docs/reference/knockout-bindings.md)
diff --git a/docs/create-custom-content-type/whats-next.md b/docs/create-custom-content-type/whats-next.md
diff --git a/docs/extend-existing-content-type/step-2-extend-appearances.md b/docs/extend-existing-content-type/step-2-extend-appearances.md
@@ -71,7 +71,6 @@ The following table describes the elements in our extension configuration.
 | `elements`    | The grouping element that specifies one or more `element` nodes. |
 | `element`     | The element maps styles and other appearance extensions from the form editor to the HTML templates that render content on the Admin stage and storefront. We want our appearance styles to map to the `wrapper` element of the Banner's templates, so the element for each appearance extension is named `wrapper`. |
 | `style`       | The `style` element configures the bindings from the form field to the template elements. In this case, our style is applied to the `wrapper` element of the template. The style `name` represents the CSS `max-height` style. The `source` is the name of the form field you want the style bound to. Hint: The field name added in step 3 is `max-height`. |
-
 {:style="table-layout:auto"}
 
 ## Next
diff --git a/docs/extend-existing-content-type/step-3-extend-forms.md b/docs/extend-existing-content-type/step-3-extend-forms.md
@@ -91,7 +91,6 @@ Some of the key elements are described here.
 | `field`    | The field `name` should match the CSS max-height style property, but in snake_case. Fields also have a `sortOrder` you can use to place your field above or below existing fields. The `formElement` for a field describes the HTML form type, such as input, checkbox, select, and more. |
 | `argument` | Provides the way to add a `default` value to your field. Our default value is set to `300`. |
 | `settings` | Provides the markup that gives your field a label, CSS styling, validation, and other properties as needed. |
-
 {:style="table-layout:auto"}
 
 After adding max-height field as previously shown, flush your cache, drag a banner to the Admin stage, open the editor, and see your new style property field being rendered in the Banner's form, as shown here:
diff --git a/docs/getting-started/view-pagebuilder.md b/docs/getting-started/view-pagebuilder.md
@@ -1,6 +1,6 @@
 # View Page Builder
 
-After activating Page Builder, you can view it by navigating to one of several locations within the Admin UI:
+You can view Page Builder by navigating to one of several locations within the Admin UI:
 
 - Catalog Product
 - Catalog Category
diff --git a/docs/how-to/how-to-add-custom-toolbar.md b/docs/how-to/how-to-add-custom-toolbar.md
@@ -52,6 +52,7 @@ The `OptionInterface` and `ValueInterface` define the structure of toolbar optio
 | `value`  | Field option value, such as a CSS class (as shown in the code example). |
 | `label`  | Field option label, such as a label for a select option (as shown in the code example) |
 | `icon`   | CSS class name for the icon to display in the toolbar to represent the field's option. If you don't include a CSS class, the toolbar will display the label instead. |
+{:style="table-layout:auto"}
 
 ## Step 2: Create `Toolbar` instance
 
diff --git a/docs/how-to/how-to-add-icons-images.md b/docs/how-to/how-to-add-icons-images.md
@@ -114,6 +114,7 @@ If you create an icon for the panel, replace the `background-image` attribute wi
 | `background-image url` | The `url` used for the `background-image` is the most critical part of your own CSS classes. Always use the `@{baseDir}` variable followed by your full module name, followed by the path to your image, starting with `css`. When deployed, Page Builder creates a link in the static output where the browser can resolve it, as described below. |
 | `width`                | Sets the width of the icon image.                            |
 | `height`               | Sets the height of the icon image.                           |
+{:style="table-layout:auto"}
 
 When deployed, your CSS classes and links to your icons are generated in `pub/static`, as shown here: 
 
diff --git a/docs/how-to/how-to-add-image-uploader.md b/docs/how-to/how-to-add-image-uploader.md
@@ -76,6 +76,7 @@ define(['Magento_PageBuilder/js/content-type/uploader'], function (Uploader) {
 | `initialValue`     | Object[]  | The image value to set for the initial state of the uploader component. | yes     | None                                                                                                    |
 | `onChangeCallback` | Function  | The callback to execute when the end-user selects an image.                           | no    | Magento saves the image to the provided `dataStore` using `uploaderConfig.dataScope` as the key.        |
 | `onDeleteCallback` | Function  | The callback to execute when the end-user deletes the current image from storage. | no    | Magento removes the image from to the provided `dataStore` using `uploaderConfig.dataScope` as the key. |
+{:style="table-layout:auto"}
 
 ## Step 3: Add markup for the uploader
 
diff --git a/docs/index.md b/docs/index.md
@@ -22,7 +22,6 @@ This documentation describes how to do both.
 
 The following topics will help you get started with Page Builder development:
 
-- [Install Page Builder](getting-started/install-pagebuilder.md)
+- [Contributors Only - Install Page Builder](getting-started/install-pagebuilder.md)
 - [View Page Builder](getting-started/view-pagebuilder.md)
 - [Install Page Builder Examples](getting-started/install-pagebuilder-examples.md)
-
diff --git a/docs/reference/architecture.md b/docs/reference/architecture.md
@@ -47,6 +47,7 @@ This means you don't have to change your custom extensions if you're using UI co
 | Master template   | `master_template`     | Template used to render the content type to the master format |
 | Form              | `form`                | Form used to edit attributes of the content type             |
 | Reader            | `reader`              | Reads data for the content type from the master format       |
+{:style="table-layout:auto"}
 
 ## Data flow
 
@@ -155,6 +156,7 @@ Appearances provide several ways to customize your content types. For example, y
 | Content type components | `Vendor/ModuleName/view/adminhtml/web/js/content-type/content-type-name` |
 | Content type templates  | `Vendor/ModuleName/view/adminhtml/web/template/content-type/content-type-name/appearance-name` |
 | Styles                  | `Vendor/ModuleName/view/adminhtml/web/css/source/content-type/content-type-name` |
+{:style="table-layout:auto"}
 
 **Note:**
 We have also considered introducing an appearance component and/or moving the initialization of the libraries to bindings. This would allow you to add custom logic per appearance changes and libraries per appearance for content types like the `slider` and the `tabs`.
diff --git a/docs/reference/configurations.md b/docs/reference/configurations.md
@@ -200,6 +200,7 @@ These are declared under the `<elements />` node within the appearance.
 | Attribute           | Description                                                                            |
 | ------------------- | -------------------------------------------------------------------------------------- |
 | `name`              | The name for the element that will be used to reference the data mapping configuration from your templates. This must be unique within the current appearance.    |
+{:style="table-layout:auto"}
 
 The name specified here is used within your templates bindings to retrieve the data from your configuration.
 
@@ -475,7 +476,7 @@ We discourage modifying existing menu sections if they do not belong to your mod
 | `name`              | The internal name for this menu section, will be used by content types to reference your section.      |
 | `translate`         | Determine which aspects of the menu section should be translated.                                                                                    |
 | `sortOrder`         | The sort order in relation to other menu sections, within our configuration we step these 10 integers apart to allow for new sections to be added in between. |
-| `label`             | The label to be displayed within the left menu    |                                                                                      |
+| `label`             | The label to be displayed within the left menu    |
 {:style="table-layout:auto"}
 
 The following is an example of a menu section configuration in `view/adminhtml/pagebuilder/menu_section.xml`:
diff --git a/docs/reference/data-store.md b/docs/reference/data-store.md
@@ -28,6 +28,7 @@ The data store maintains its own events system and does not use the global event
 Because of this, you need to create an instance of `dataStore` to observe events.
 
 Page Builder fires a single event called `state`, which returns the entire state of the data store. Page Builder fires this event whenever the state changes.
+
 ```js
 dataStore.events.on("state", function (state) {
     console.log(state);    
diff --git a/docs/reference/events.md b/docs/reference/events.md
diff --git a/docs/reference/knockout-bindings.md b/docs/reference/knockout-bindings.md
