MC-5769: Complete content type tutorial

Removing plugin markup that breaks links in devdocs build

Author: bdenham

.gitignore

@@ -5,4 +5,5 @@
 /dev/tests/acceptance/vendor
 static-error-log.xml
 .DS_Store
-.vscode
+.vscode
+.history/

docs/configurations/block-chooser-configuration.md

@@ -1,19 +1,9 @@
-# Block chooser <!-- omit in toc -->
+# Block chooser
 
-<!-- {% raw %} -->
-
-## What's in this topic <!-- omit in toc -->
+## What's in this topic
 
 This topic describes how to use the block chooser UI component for a custom content type.
 
-## Overview <!-- omit in toc -->
-
-To use the block chooser component for your custom content type:
-
-- [Configuration options](#configuration-options)
-- [Add the block select grid listing modal to content type XML](#add-the-block-select-grid-listing-modal-to-content-type-xml)
-- [Add component to content type XML](#add-component-to-content-type-xml)
-
 ## Configuration options
 
 Extends all `abstract` configuration.
@@ -137,5 +127,3 @@ To insert the block chooser UI component, `Magento_PageBuilder/js/form/element/b
 The `block_id` field pulls in the selected value from the modal.
 
 Then the `block_chooser` component pulls in the value from the `block_id` field to ascertain when it should commence updating.
-
-<!-- {% endraw %} -->

docs/configurations/content-type-configuration.md

@@ -498,6 +498,14 @@ define([], function () {
 });
 ```
 
+### Form
+
+Individual appearances may have different uiComponent forms in order to use different customizable content.
+
+``` xml
+<form>pagebuilder_banner_collage_left_form</form>
+```
+
 ## Preview component settings
 
 | Property                 | Description                                                                                                                         | Example        |

docs/configurations/panel-configurations.md

@@ -1,5 +1,3 @@
-<!-- {% raw %} -->
-
 # Panel groups and configurations
 
 By default, the Page Builder panel has four groups (Layout, Elements, Media, Add Content) and 16 content types as shown here:
@@ -20,10 +18,12 @@ These groups are defined in the Page Builder `group.xml` file and can be extende
 
 This topic describes four ways to customize the Page Builder panel:
 
-- [Rename panel groups](#rename-panel-groups)
-- [Reorder panel groups](#reorder-panel-groups)
-- [Add new panel groups](#add-new-panel-groups)
-- [Add content types to different panel group](#add-content-types-to-different-panel-groups).
+- [Panel groups and configurations](#panel-groups-and-configurations)
+    - [Overview](#overview)
+    - [Rename panel groups](#rename-panel-groups)
+    - [Reorder panel groups](#reorder-panel-groups)
+    - [Add new panel groups](#add-new-panel-groups)
+    - [Add content types to different panel groups](#add-content-types-to-different-panel-groups)
 
 {: .bs-callout .bs-callout-info }
 For the sake of the user experience, please don't forget the affect your panel configurations may have on the end user. User's should have access the most important content types first, so be careful how you reorder groups and content types within groups. We strongly encourage you to place your content types into the existing groups when possible, instead of creating your own group.
@@ -103,6 +103,3 @@ To add your content type to a new group or one of the existing groups, set your
 The result looks like this:
 
 ![Group with content type](../images/group-with-content-type.png)
-
-
-<!-- {% endraw %} -->

docs/configurations/server-side-rendered-previews.md

@@ -1,27 +1,14 @@
-# Server-side rendered previews <!-- omit in toc -->
-
-<!-- {% raw %} -->
+# Server-side rendered previews
 
 ## What's in this topic
 
 This topic describes how to use the `RenderPool` on the stage to render a backend [content type] preview. 
 
 Using this method, you can preview content types that cannot be rendered on the stage and require further backend processing to be previewed.
 
-The following steps utilize some example values; substitute those with values specific to your situation.
-
-## Overview
-
-To use the stage's `RenderPool` to produce a content type preview:
+The following steps utilize some example values. Substitute those with values specific to your situation.
 
-- [What's in this topic](#whats-in-this-topic)
-- [Overview](#overview)
-- [Create a renderer](#create-a-renderer)
-- [Add the renderer to the pool](#add-the-renderer-to-the-pool)
-- [Submit an HTTP request to the preview controller](#submit-an-http-request-to-the-preview-controller)
-- [Render the element](#render-the-element)
-
-## Create a renderer
+## Step 1: Create a renderer
 
 Create a renderer that implements the renderer interface, `Magento\PageBuilder\Model\Stage\RendererInterface`:
 
@@ -38,7 +25,7 @@ class AwesomeElement implements \Magento\PageBuilder\Model\Stage\RendererInterfa
 }
 ```
 
-## Add the renderer to the pool
+## Step 2: Add the renderer to the pool
 
 Add the renderer you just created as an argument to the `Magento\PageBuilder\Model\Stage\RendererPool` type that specifies your custom content type role as the name in the `di.xml` file:
 
@@ -52,7 +39,7 @@ Add the renderer you just created as an argument to the `Magento\PageBuilder\Mod
 </type>
 ```
 
-## Submit an HTTP request to the preview controller
+## Step 3: Submit an HTTP request to the preview controller
 
 To invoke the renderer from the stage, submit an HTTP request to the PageBuilder preview controller:
 
@@ -95,12 +82,10 @@ To invoke the renderer from the stage, submit an HTTP request to the PageBuilder
         });
     ```
 
-## Render the element
+## Step 4: Render the element
 
 Your exact configuration and situation determine when, and how, you render the element. 
 
 Generally, you would perform this operation when the properties change, by overriding the `afterObservablesUpdated` method with this logic (as shown in the previous example).
 
 To update the Document Object Model (DOM) to display your content, amend the JavaScript property that represents the HTML variable of your main element with the response from the HTTP request, `this.data.main.html(response.content);` from the previous example.
-
-<!-- {% endraw %} -->

docs/configurations/storefront-configuration.md

@@ -1,14 +1,8 @@
-# Storefront customization <!-- omit in toc -->
+# Storefront customization
 
-<!-- {% raw %} -->
-You can customize PageBuilder content types by adding your own logic on the frontend.
+You can customize Page Builder content types by adding your own logic on the frontend, as described here.
 
-To add custom logic to content types:
-
-- [Create a JavaScript widget](#create-a-javascript-widget)
-- [Add XML configuration](#add-xml-configuration)
-
-## Create a JavaScript widget
+## Step 1: Create a JavaScript widget
 
 Create a JavaScript widget in your module's `/view/frontend/web/js/content-type/{content-type-name}/appearance/{appearance-name}/widget.js` file:
 
@@ -48,7 +42,7 @@ define([
 
 ```
 
-## Add XML configuration
+## Step 2: Add XML configuration
 
 The XML configuration loads the widget on the frontend, and on the stage, so that you can preview content inside both the block and dynamic block content types.
 
@@ -75,6 +69,4 @@ Add the following configuration to the `etc/di.xml` file in your custom module d
         </argument>
     </arguments>
 </type>
-```
-
-<!-- {% endraw %} -->
+```

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

@@ -5,13 +5,13 @@ The development of this tutorial is currently **IN PROGRESS**.
 
 ***
 
-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 comes with 16 content types (controls) you can use to build your storefront pages. In this tutorial, you will add a new content type: a Quote control, which you can use to show customer testimonials or other quotations on a page.
 
 ![Page Builder Content Types](../images/panel-horizontal.png)
 
 ## Prerequisites
 
-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.
+Page Builder creates content types from a module with UI components. So this topic assumes you have a basic module structure in which to add your content type files.
 
 ![Minimum module structure](../images/module-minimum-structure.png)
 
@@ -32,5 +32,5 @@ The files you will need to create in order to build a basic content type are sho
 
 ![Before and after content type](../images/content-type-files.png)
 
-## Tutorial
-This tutorial walks you through creating these files, starting with [Step 1: Add configuration](step-1-add-configuration.md). 
+## Next
+[Step 1: Add configuration](step-1-add-configuration.md). 

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

@@ -30,7 +30,6 @@ Content types cannot be rendered without these templates. Add them to your modul
 
 ![Create config file](../images/step2-add-templates.png)
 
-
 ## Create the `preview_template`
 
 1. Create the `preview.html` file (as noted above) using the example content that follows.
@@ -60,7 +59,6 @@ Content types cannot be rendered without these templates. Add them to your modul
 
 ## Create the `master_template`
 
-
 ```html
 <!--master.html-->
 <h2 attr="data.main.attributes" 

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

@@ -36,6 +36,4 @@ Add them to your module here (`view/adminhtml/web/js/content-type/<content-type-
 
 ![Create config file](../images/step3-add-component.png)
 
-
-
 ## Create preview component

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

@@ -181,5 +181,4 @@ In this example, let's create a form that extends `pagebuilder_base_form` to pro
 
 [Insert descriptions]
 
-## Create layout
-
+## Create layout