MC-5710: Beta docs tutorial

Combined steps 4 and 5 into one step 4 add editor

Author: bdenham

README.md

@@ -38,10 +38,9 @@ We offer one method for installing PageBuilder:
 * [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 form editor](docs/create-basic-content-type/step-4-add-form-editor.md)
-* [Step 5: Add layout](docs/create-basic-content-type/step-5-add-layout.md)
-* [Step 6: Add styles](docs/create-basic-content-type/step-6-add-styles.md)
-* [Step 7: Add frontend widget](docs/create-basic-content-type/step-7-add-frontend-widget.md)
+* [Step 4: Add editor](docs/create-basic-content-type/step-4-add-editor.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)
 
 ### Configurations

docs/_pagebuilder.yml

@@ -35,19 +35,15 @@ pages:
     url: /page-builder/create-basic-content-type/step-3-add-components.html
     versionless: true
 
-  - label: Step 4. Add form editor
-    url: /page-builder/create-basic-content-type/step-4-add-form-editor.html
+  - label: Step 4. Add editor
+    url: /page-builder/create-basic-content-type/step-4-add-editor.html
     versionless: true
 
-  - label: Step 5. Add layout
-    url: /page-builder/create-basic-content-type/step-5-add-layout.html
+  - label: Step 5. Add styles
+    url: /page-builder/create-basic-content-type/step-6-add-styles.html
     versionless: true
 
-  - label: Step 6. Add styles and icons
-    url: /page-builder/create-basic-content-type/step-6-add-styles-icons.html
-    versionless: true
-
-  - label: Step 7. Add frontend widget
+  - label: Step 6. Add frontend widget
     url: /page-builder/create-basic-content-type/step-7-add-frontend-widget.html
     versionless: true
 

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

@@ -1,10 +1,8 @@
 <!-- {% raw %} -->
-{: .bs-callout .bs-callout-warning }
-The development of this tutorial is currently **IN PROGRESS**, **INCOMPLETE**, and potentially **INCORRECT**. The expected completion time is Nov. 27.
 
 # Overview
 
-{: .bs-callout .bs-callout-info }
+{: .bs-callout .bs-callout-warning }
 The development of this tutorial is currently **IN PROGRESS**. A more complete rough draft is available in the How Tos section here: [How to develop a new content type](docs/how-to/how-to-develop-new-content-type.md). When this tutorial is complete, it will replace the equivalent How To topic.
 
 Out of the box, Page Builder comes with several content types (controls) that you can drag onto the stage to build your storefront pages, as shown below. In this topic, you will learn how to create your own content type for use within Page Builder.
@@ -23,13 +21,12 @@ An overview of the steps for creating a Page Builder content type are briefly il
 
 ![Creating Custom Content Types](../images/content-type-overview.png)
 
-1. **Add configuration**: an XML file to setup all the other files that control the appearances and behaviors of your content type.  
-2. **Add templates**: HTML files that define the appearance of your content types on the Admin stage (preview.html) and the storefront (master.html).
-3. **Add component**: a JavaScript file that define the behavior of your content type on the Admin stage (preview.js) and the storefront (master.js).
-4. **Add form (editor)**: a UI component (XML file) to give users the ability to add or edit content using your content type.
-5. **Add layout**: an XML file to add your form editor to the stage. 
-6. **Add styles and icons**: LESS and image files (png, svg) to add specific styling and images to your content types as they appear on the Admin stage and the storefront. 
-7. **Add frontend widget**: a JavaScript file to control the UI behavior (user interactivity) of your content type on the storefront.  
+1. **Add configuration**: Create an XML file to setup all the other files that control the appearances and behaviors of your content type.  
+2. **Add templates**: Create HTML files that define the appearance of your content types on the Admin stage (preview.html) and the storefront (master.html).
+3. **Add component**: Create a JavaScript file that define the behavior of your content type on the Admin stage (preview.js) and the storefront (master.js).
+4. **Add editor**: Create a UI component (XML file) and a layout to give users the ability to add or edit content using your content type.
+5. **Add styles**: Create LESS files to style your content types when rendered in the Admin UI and on the storefront. 
+6. **Add frontend widget**: Create a JavaScript file to control the UI behavior (user interactivity) of your content type on the storefront.  
 
 ## Content type files
 

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

@@ -1,24 +1,19 @@
 <!-- {% raw %} -->
-{: .bs-callout .bs-callout-warning }
-The development of this tutorial is currently **IN PROGRESS**, **INCOMPLETE**, and potentially **INCORRECT**. The expected completion time is Nov. 27.
 
 # Step 1: Add configuration
 
-The configuration file gives your content type its existence. It's where you set the name, display label, and references to the other files that define the appearance and behavior of your content type.
-
-{: .bs-callout .bs-callout-info }
-Only a subset of configuration elements are described here (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).
-
-## Location
-
-Add your configuration file here (`view/adminhtml/pagebuilder/content_type/`):
+The configuration file gives your content type its existence. It's where you set the name, display label, and references to the other files that define the appearance and behavior of your content type. Add it to your module in the following location (`view/adminhtml/pagebuilder/content_type/`):
 
 ![Create config file](../images/step1-add-config-file.png)
 
-The file name should reflect the name of your content type, using underscores to separate multi-word names as needed. 
+The file name should reflect the name of your content type. Use underscores to separate multi-word names as needed. 
 
 ## Example
 
+{: .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).
+
+
 The following configuration shows the minimal requirements for defining a content type, described in the tables that follow.
 
 ``` xml

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

@@ -1,14 +1,8 @@
 <!-- {% raw %} -->
-{: .bs-callout .bs-callout-warning }
-The development of this tutorial is currently **IN PROGRESS**, **INCOMPLETE**, and potentially **INCORRECT**. The expected completion time is Nov. 27.
 
 # Step 2: Add templates
 
-Page Builder templates are HTML files that define the appearance of content types within both the Admin UI (using the preview.html) and the storefront UI (using the master.html). Content types cannot be rendered without these templates, so let's create the ones already specified in the `<appearance>` element of our configuration file.
-
-## Location
-
-Add your HTML templates here (`view/adminhtml/web/template/content-type/<content-type-name>/default/`):
+Page Builder templates are HTML files that define the appearance of content types within both the Admin UI (using the preview.html) and the storefront UI (using the master.html). Content types cannot be rendered without these templates, so let's create the ones already specified in the `<appearance>` element of our configuration file. Add them to your module in the following location (`view/adminhtml/web/template/content-type/<content-type-name>/default/`):
 
 ![Create config file](../images/step2-add-templates.png)
 

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

@@ -1,17 +1,12 @@
 <!-- {% raw %} -->
-{: .bs-callout .bs-callout-warning }
-The development of this tutorial is currently **IN PROGRESS**, **INCOMPLETE**, and potentially **INCORRECT**. The expected completion time is Nov. 27.
-
-# Step 3: Add components
 
-Components are JavaScript files that define the behavior of your content type within the Admin UI stage (using preview.js) and the storefront UI (using master.js).
+# Step 3: Add component
 
-## Location
-
-Add your preview component here (`view/adminhtml/web/js/content-type/<content-type-name>/`):
+A component is a JavaScript file that defines the behavior of your content type within the Admin UI stage (using preview.js). Add it to your module in the following location (`view/adminhtml/web/js/content-type/<content-type-name>/`):
 
 ![Create config file](../images/step3-add-component.png)
 
-1. Add a preview.js file to ...
+{: .bs-callout .bs-callout-warning }
+The development of this tutorial is currently **IN PROGRESS**, **INCOMPLETE**, and potentially **INCORRECT**. The expected completion time is Nov. 27.
 
 <!-- {% endraw %} -->

docs/create-basic-content-type/step-4-add-editor.md

@@ -0,0 +1,15 @@
+<!-- {% raw %} -->
+
+# Step 4: Add editor
+
+The editor for your content type requires two files: a UI component form and a simple layout. The editor slides out from the right of the screen within the Admin UI to give users a way to customize your content type. Add these files to your module in the following locations:
+ - `view/adminhtml/web/layout/`
+ - `view/adminhtml/web/ui-component/`
+
+![Create config file](../images/step4-add-editor.png)
+
+
+{: .bs-callout .bs-callout-warning }
+The development of this tutorial is currently **IN PROGRESS**, **INCOMPLETE**, and potentially **INCORRECT**. The expected completion time is Nov. 27.
+
+<!-- {% endraw %} -->

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

@@ -0,0 +1,16 @@
+<!-- {% raw %} -->
+
+# Step 5: Add styles
+
+Styles are LESS files that add specific CSS styling to content types when rendered in the Admin UI and on the storefront. Add them to your module in the following locations:
+
+- `view/adminhtml/web/css/source/content-type/<content-type-name>/`
+- `view/frontend/web/css/source/content-type/<content-type-name>/`
+
+![Create config file](../images/step6-add-styles.png)
+
+
+{: .bs-callout .bs-callout-warning }
+The development of this tutorial is currently **IN PROGRESS**, **INCOMPLETE**, and potentially **INCORRECT**. The expected completion time is Nov. 27.
+
+<!-- {% endraw %} -->