MC-5710: Beta docs tutorial

bdenham · bdenham · commit 5cd27040c46f · 2018-11-27T10:55:58.000-06:00
Changed add editor to add form in step 4 of tutorial, graphics included.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ https://devdocs.magedevteam.com/ds_pagebuilder/page-builder/getting-started/intr
 * [Step 1: Add configuration](docs/create-basic-content-type/step-1-add-configuration.md)
 * [Step 2: Add templates](docs/create-basic-content-type/step-2-add-templates.md)
 * [Step 3: Add components](docs/create-basic-content-type/step-3-add-components.md)
-* [Step 4: Add editor](docs/create-basic-content-type/step-4-add-editor.md)
+* [Step 4: Add editor](docs/create-basic-content-type/step-4-add-form.md)
 * [Step 5: Add styles](docs/create-basic-content-type/step-5-add-styles.md)
 * [Step 6: Add frontend widget](docs/create-basic-content-type/step-6-add-frontend-widget.md)
 * [What's next](docs/create-basic-content-type/whats-next.md)
diff --git a/docs/create-basic-content-type/step-1-add-configuration.md b/docs/create-basic-content-type/step-1-add-configuration.md
@@ -11,7 +11,7 @@ The configuration file gives your content type its existence. It's where you set
 
 The file name should reflect the name of your content type. Use underscores to separate multi-word names as needed. 
 
-## Example
+## Example configuration
 
 {: .bs-callout .bs-callout-info }
 Only a subset of configuration elements are described in this example (enough to understand the configuration file's role within a content type). For more details, refer to [Main configurations](../configurations/content-type-configuration.md) and [Additional configurations](../configurations/additional-configurations.md).
@@ -51,7 +51,6 @@ The following configuration shows the minimal requirements for defining a conten
             <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
             <attribute name="name" source="data-role"/>
             <attribute name="appearance" source="data-appearance"/>
-            <tag name="example_type"/>
             <html name="example_text" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
             <css name="css_classes"/>
           </element>
@@ -74,7 +73,7 @@ The `<type>` node defines the key properties of your content type. The attribute
 | component         | Currently there are 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. Use `Magento_PageBuilder/js/content-type-collection` for content types that can contain children, otherwise known as container content types. |
 | preview_component | JavaScript file that provides preview-specific rendering logic within the Admin UI. |
 | master_component  | JavaScript file that provides master format rendering logic generic for all appearances of your content type when rendered on the storefront. |
-| form              | UI component form that provides the editor for your content type. |
+| form              | UI component form that provides the form controls for editing your content type. |
 | icon              | Optional. PNG or SVG image displayed in the Page Builder panel alongside the label. |
 | is_hideable       | Optional. Default `true`. Include it only when you want to set it to `false` to prevent the end-user from hiding your  content type on demand, using a button (eye icon) in the options menu. A setting of false will remove the hide button from the options menu. |
 | translate         | Identifies the attribute you want Magento to translate. Here, the `label` value is set for translation. |
@@ -99,7 +98,7 @@ All content types must have at least one `<appearance>` defined within the `<app
 
 ## The `elements` node
 
-The purpose of `<elements>` node in the configuration is to map the data from the editor to the content type's master format so that the values entered in the editor can be stored and rendered correctly within both the Admin preview and the storefront. These nodes will be explained more fully in Step 4: Add editor.
+The purpose of `<elements>` node in the configuration is to map the data from the form to the content type's master format so that the values entered in the editor can be stored and rendered correctly within both the Admin preview and the storefront. These nodes will be explained more fully in Step 4: Add editor.
 
 ## Next
 
diff --git a/docs/create-basic-content-type/step-2-add-templates.md b/docs/create-basic-content-type/step-2-add-templates.md
@@ -9,7 +9,7 @@ Templates are the HTML files that define the appearance of content types within
 
 ## Configuration
 
-Templates are referenced from the `<appearance>` element of the configuration file as shown here:
+In your configuration file, reference your templates as shown here within the `<appearance>` element:
 
 ```xml
 <appearance name="default"
diff --git a/docs/create-basic-content-type/step-3-add-components.md b/docs/create-basic-content-type/step-3-add-components.md
@@ -9,7 +9,7 @@ Components are the JavaScript files that define the behaviors of your content ty
 
 ## Configuration
 
-Components are referenced from the `<type>` element of the configuration file as shown here:
+In your configuration file, reference your JavaScript component (`preview.js`) as shown here within the `<type>` element:
 
 ```XML
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
diff --git a/docs/create-basic-content-type/step-4-add-form.md b/docs/create-basic-content-type/step-4-add-form.md
@@ -1,28 +1,28 @@
-# Step 4: Add editor
+# Step 4: Add form
 
 {: .bs-callout .bs-callout-info }
 The development of this tutorial is currently **IN PROGRESS**.
 
-Page Builder provides an editor that slides out from the right of the screen within the Admin UI to give users a way to add content and customize the appearance of your content type, as shown in the screen shot. All you have to do is create a UI component form and a layout for the editor to use.
+Page Builder provides an editor that slides out from the right of the screen within the Admin UI to give you a way to add content and customize the appearance of your content type, as shown in the screen shot. To use and customize this editor for your needs, you need to create a UI component form along with the layout to display that form.
 
 ![Create config file](../images/content-type-editor.png)
 
 ## Configuration
 
-Reference your UI component form as shown here in the `<type>` element of your configuration file:
+In your configuration file, reference your UI component form as shown here within the `<type>` element:
 
 ```xml
 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
   <type name="example"
         label="Example"
         form="pagebuilder_example_form"
+        ...
 ```
 
 | Attribute | Description                                                  |
 | --------- | ------------------------------------------------------------ |
 | form      | `pagebuilder_example_form.xml` - UI component form that provides the editor for your content type. |
-
 {:style="table-layout:auto"}
 
 ## Location
@@ -32,13 +32,11 @@ Add the layout and form to your module as shown here:
 - `view/adminhtml/web/layout/`
 - `view/adminhtml/web/ui-component/`
 
-![Create config file](../images/step4-add-editor.png)
-
-
+![Create config file](../images/step4-add-form.png)
 
 ## Create UI component form
 
-In this example, we create a form that extends `pagebuilder_base_form` to provide a basic form editor for our content type. The code is provided here followed by descriptions of the key parts.
+In this example, let's create a form that extends `pagebuilder_base_form` to provide form controls for editing our content type. The code is provided here followed by descriptions of the key parts.
 
 ```xml
 <?xml version="1.0" encoding="UTF-8"?>
@@ -181,7 +179,7 @@ In this example, we create a form that extends `pagebuilder_base_form` to provid
 
 ```
 
-
+[Insert descriptions]
 
 ## Create layout
 
diff --git a/docs/create-basic-content-type/step-5-add-styles.md b/docs/create-basic-content-type/step-5-add-styles.md
@@ -35,6 +35,6 @@ Add your LESS files here:
 
 ## Create LESS files
 
-In this example, 
+In this example... 
 
 <!-- {% endraw %} -->
diff --git a/docs/create-basic-content-type/step-6-add-frontend-widget.md b/docs/create-basic-content-type/step-6-add-frontend-widget.md
@@ -10,9 +10,6 @@ The frontend widget is a JavaScript file that controls the UI behavior (user int
 ## Configuration
 
 
-
-
-
 ## Location
 
 Add it to your module in the following location (`view/base/web/js/content-type/example/appearance/default/`):
diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md
@@ -26,7 +26,7 @@ See [Install Page Builder](install-pagebuilder.md)
 * [Step 1: Add configuration](../create-basic-content-type/step-1-add-configuration.md)
 * [Step 2: Add templates](../create-basic-content-type/step-2-add-templates.md)
 * [Step 3: Add components](../create-basic-content-type/step-3-add-components.md)
-* [Step 4: Add editor](../create-basic-content-type/step-4-add-editor.md)
+* [Step 4: Add editor](../create-basic-content-type/step-4-add-form.md)
 * [Step 5: Add styles](../create-basic-content-type/step-5-add-styles.md)
 * [Step 6: Add frontend widget](../create-basic-content-type/step-6-add-frontend-widget.md)
 * [What's next](../create-basic-content-type/whats-next.md)
diff --git a/docs/images/content-type-overview.png b/docs/images/content-type-overview.png
diff --git a/docs/images/step4-add-form.png b/docs/images/step4-add-form.png
