MC-4272: Update content type docs

Add more configuration file instructions

Author: bdenham

README.md

@@ -30,6 +30,7 @@ We offer one method for installing PageBuilder:
 * [Introduction](docs/getting-started/introduction.md)
 * [Install Page Builder](docs/getting-started/install-pagebuilder.md)
 * [Activate Page Builder](docs/getting-started/activate-pagebuilder.md)
+* [View Page Builder](docs/getting-started/view-pagebuilder.md)
 
 ### Create a content type
 

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

@@ -1,18 +1,19 @@
-# Content type Overview
+# Overview
 
 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.
 
 ![Page Builder Content Types](../images/panel-horizontal.png)
 
 ## Prerequisites
+{:.tutorial-before}
 
 Page Builder creates content types from modules. So this topic assumes you have a basic module structure in which to add your content type files.
 
-![](../images/module-minimum-structure.png)
+![Minimum module structure](../images/module-minimum-structure.png)
 
 ## Overview
 
-The steps for creating a Page Builder content type are briefly outlined here. The remainder of this topic describes these steps in detail.
+An overview of the steps for creating a Page Builder content type are briefly illustrated and described here.
 
 ![Creating Custom Content Types](../images/content-type-overview.png)
 
@@ -24,5 +25,10 @@ The steps for creating a Page Builder content type are briefly outlined here. Th
 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.  
 
+## Content type files
+
+The files you will need to create in order to build a basic content type are shown here.
+
 ![Before and after content type](../images/content-type-files.png)
 
+This tutorial walks you through creating these files, step by step.

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

@@ -1 +1,73 @@
-# Step 1: Add a configuration
+# Step 1: Add configuration
+
+Creating a configuration file is the first step to creating a new content type. Through the configuration file, you can specify things like the label, location, and icon of your content type within the Page Builder panel menu. You can specify where your content type can be dropped on the stage, and reference the many other files you will use to control the appearance and behavior your content type.
+
+## Create the configuration file
+
+1. Create a new XML file in the following directory structure of your module: `view/adminhtml/pagebuilder/content_type/my-content-type.xml`. 
+
+2. Copy the contents of this example into your `my-content-type.xml` file:
+    ``` xml
+    <?xml version="1.0"?>
+    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
+        <type name="my-content-type"
+              label="My Content Type"
+              group="layout"
+              component="Magento_PageBuilder/js/content-type-collection"
+              preview_component="Magento_PageBuilder/js/content-type/preview"
+              master_component="Magento_PageBuilder/js/content-type/master"
+              form=""
+              icon=""
+              sortOrder="-1"
+              is_hideable="true"
+              translate="label">
+            <appearances>
+                <appearance name="default"
+                            default="true"
+                            preview_template="Vendor_Module/content-type/my-content-type/default/preview"
+                            render_template="Vendor_Module/content-type/my-content-type/default/master"
+                            reader="Magento_PageBuilder/js/master-format/read/configurable">
+                    <elements>
+                        <element name="main">
+                            <attribute name="name" source="data-role"/>
+                            <attribute name="appearance" source="data-appearance"/>
+                        </element>
+                    </elements>
+                </appearance>
+            </appearances>
+        </type>
+    </config>
+    ```
+
+3. Create the required `preview_template` and `render_template` as specified in the configuration file.
+
+    Before seeing the results of our configuration in the Page Builder panel menu, we need to create the two templates specified in the <appearance> element of the configuration file: 
+    * preview.html - to display our content type within the Admin UI. 
+    * master.html - to display our content type within the CMS page on the storefront. 
+
+    Both templates are required. So for now, just create the files within the following directory structure, `view/adminhtml/web/template/content_type/my-content-type/default/`, using the example content that follows. We will discuss them in detail later:
+    
+    ```html
+    <!--preview.html-->
+    <div class="pagebuilder-content-type" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
+        <render args="getOptions().template" />
+        <div attr="data.main.attributes" css="data.main.css" ko-style="data.main.style">
+            <div style="width: 100%; height: 100px; background-color: #f1f1f1; padding: 20px;">Admin template</div>
+        </div>
+    </div>
+    ```
+    
+    ```html
+    <!--master.html-->
+    <div class="pagebuilder-content-type" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
+        <render args="getOptions().template" />
+        <div attr="data.main.attributes" css="data.main.css" ko-style="data.main.style">
+            <div style="width: 100%; height: 100px; background-color: #f1f1f1; padding: 20px;">Admin template</div>
+        </div>
+    </div>
+    ```
+
+4. Flush your config cache `bin/magento cache:flush config` and view Page Builder from the Home Page editor (as a convenience for storefront viewing later). The Page Builder panel menu should show your content type at the top of the layout group:
+   
+   ![Page Builder Panel Config](../images/create-config-file-1.png) 
+   

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

@@ -1 +1 @@
-# Step 3: Add a component
+# Step 3: Add components

docs/create-basic-content-type/step-5-add-layout.md

@@ -1 +1 @@
-# Step 5: Add a layout
+# Step 5: Add layout

docs/create-basic-content-type/step-7-add-frontend-widget.md

@@ -1 +1 @@
-# Step 7: Add a frontend widget
+# Step 7: Add frontend widget

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

@@ -1 +1 @@
-# What's next
+# What's next?

docs/getting-started/view-pagebuilder.md

@@ -0,0 +1,9 @@
+# View Page Builder
+
+After activating Page Builder, you can view it by navigating to and editing any of your Magento CMS pages. For example, navigate to the Home Page editor by selecting **Content** > **Pages** > **Home Page** > **Edit**, as shown here:
+
+![Navigate to Page Builder](../images/navigate-to-pagebuilder.png)
+
+Then open the **Content** section on the Home Page to view Page Builder:
+
+![View Page Builder](../images/home-page-pagebuilder.png)