MAGEDOC-3448: Add docs for content type styles

Incorporated review comments

Author: bdenham

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

@@ -35,7 +35,7 @@ The steps for creating the Quote content type are illustrated and described belo
 3. **Add component**: Create a JavaScript file that defines the behavior of your content type on the Admin stage (`preview.js`) and the storefront (`master.js`).
 4. **Add form**: Create a UI component form and a layout so Admin users can edit your content type within the Page Builder editor.
 5. **Add styles**: Create LESS files to style your content types when rendered in the Admin UI and on the storefront. 
-6. **Add icon**: Create an SVG icon to visually identify your content type within the Page Builder panel.
+6. **Add an icon**: Create an SVG icon to visually identify your content type within the Page Builder panel.
 
 ## Quote file structure
 

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

@@ -27,7 +27,7 @@ The following configuration is from the Quote content type. An overview of these
 ```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="example_quote"
+    <type name="example_quote"
         label="Quote"
         group="elements"
         component="Magento_PageBuilder/js/content-type"
@@ -39,18 +39,18 @@ The following configuration is from the Quote content type. An overview of these
         translate="label">
     <children default_policy="deny"/>
     <parents default_policy="deny">
-      <parent name="column" policy="allow"/>
+        <parent name="column" policy="allow"/>
     </parents>
     <appearances>
-      <appearance name="default"
+        <appearance name="default"
                   default="true"
                   preview_template="Example_PageBuilderQuote/content-type/acme_quote/default/preview"
                   render_template="Example_PageBuilderQuote/content-type/acme_quote/default/master"
                   reader="Magento_PageBuilder/js/master-format/read/configurable">
         <elements...>
-      </appearance>
+        </appearance>
     </appearances>
-  </type>
+    </type>
 </config>
 ```
 
@@ -67,8 +67,8 @@ The `type` element defines the key properties of your content type. The attribut
 | `preview_component` | Optional. JavaScript file (`preview.js`) that provides rendering logic within the Admin UI. The preview component does not need to specify the `.js` extension. If you don't provide the `preview_component`, Page Builder uses the base `Preview` component shown in the code: `Magento_PageBuilder/js/content-type/preview`. |
 | `master_component`  | Optional. JavaScript file (`master.js`) that provides rendering logic generic for all appearances of your content type when rendered on the storefront. The master component does not need to specify the `.js` extension. If you don't provide the `master_component`, Page Builder uses the base `Master` component shown in the code: `Magento_PageBuilder/js/content-type/master`. |
 | `form`              | UI component form that provides the form controls for editing your content type. |
-| `icon`              | Optional. Class name for your PNG or SVG image (or font icon) displayed in the Page Builder panel alongside the label. If no icon value is provided, the content type will simply be displayed in the Page Builder panel without an icon. |
-| `sortOrder`         | Optional. The listed order within the menu group. For example, `sortOrder=21` puts the content type third in the `Elements` menu group, after the content types with `sortOrder`s of 10 and 20. |
+| `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 group. For example, `sortOrder=21` puts the content type third in the `Elements` menu group, 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. |
 
 ## The  `children` element
@@ -87,7 +87,7 @@ The `parents` element determines if other content types can be a parent to your
 
 ```xml
 <parents default_policy="deny">
-  <parent name="column" policy="allow"/>
+    <parent name="column" policy="allow"/>
 </parents>
 ```
 
@@ -103,10 +103,10 @@ Each of these views is defined as an `appearance` within the Banner configuratio
 
 ```xml
 <appearances>
-  <appearance name="collage-left"...>
-  <appearance name="collage-centered"...>
-  <appearance name="collage-right"...>
-  <appearance name="poster" default="true" ...>
+    <appearance name="collage-left"...>
+    <appearance name="collage-centered"...>
+    <appearance name="collage-right"...>
+    <appearance name="poster" default="true" ...>
 </appearances>
 ```
 

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

@@ -16,10 +16,10 @@ Conventions for adding content type templates are as follows.
 
   ```xml
   <appearances>
-    <appearance name="collage-left"...>
-    <appearance name="collage-centered"...>
-    <appearance name="collage-right"...>
-    <appearance name="poster" default="true" ...>
+      <appearance name="collage-left"...>
+      <appearance name="collage-centered"...>
+      <appearance name="collage-right"...>
+      <appearance name="poster" default="true" ...>
   </appearances>
   ```
 
@@ -33,8 +33,8 @@ The Quote example defines only one `appearance`. Therefore, by convention, set t
 
 ```xml
 <appearances>
-  <appearance name="default"
-  ...
+    <appearance name="default"
+    ...
 ```
 
 ![Create config file](../images/step2-add-templates.png)
@@ -43,13 +43,13 @@ These files can be blank initially; they just need to exist in their proper loca
 
 ```xml
 <appearances>
-  <appearance name="default"
+    <appearance name="default"
               default="true"
               preview_template="Example_PageBuilderQuote/content-type/example-quote/default/preview"
               render_template="Example_PageBuilderQuote/content-type/example-quote/default/master"
               reader="Magento_PageBuilder/js/master-format/read/configurable">
     <elements...>
-  </appearance>
+    </appearance>
 </appearances>
 ```
 
@@ -74,24 +74,24 @@ The Quote `preview_template`  (`preview.html`) is shown here in full, followed b
      class="pagebuilder-content-type" 
      css="data.main.css" 
      event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
-  <render args="getOptions().template" />
-  <blockquote attr="data.quote.attributes" 
+    <render args="getOptions().template" />
+    <blockquote attr="data.quote.attributes" 
               ko-style="data.quote.style" 
               css="data.quote.css" 
               data-bind="liveEdit: { field: 'quote_text', placeholder: $t('Enter Quote') }">
-  </blockquote>
-  <div class="quote-author" 
+    </blockquote>
+    <div class="quote-author" 
        attr="data.author.attributes" 
        ko-style="data.author.style" 
        css="data.author.css" 
        data-bind="liveEdit: { field: 'quote_author', placeholder: $t('Enter Author') }">
-  </div>
-  <div class="quote-title" 
+    </div>
+    <div class="quote-title" 
        attr="data.author_title.attributes" 
        ko-style="data.author_title.style" 
        css="data.author_title.css" 
        data-bind="liveEdit: { field: 'quote_author_desc', placeholder: $t('Enter Description') }">
-  </div>
+    </div>
 </div>
 ```
 
@@ -104,8 +104,8 @@ The value for `attr` is derived from the `element` name in the configuration fil
 ```xml
 <!-- quote.xml -->
 <element name="quote">
-  <html name="quote_text" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
-  <css name="quote_css"/>
+    <html name="quote_text" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
+    <css name="quote_css"/>
 </element>
 ```
 
@@ -118,15 +118,15 @@ The `ko-style` attribute applies the `<style>` attributes from the form to a tem
 ```xml
 <!-- quote.xml -->
 <element name="main">
-  <style name="text_align" source="text_align"/>
-  <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
-  <style name="border_color" source="border_color"/>
-  <style name="background_color" source="background_color"/>
-  <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
-  <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
-  <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
-  <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
-  ...
+    <style name="text_align" source="text_align"/>
+    <style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
+    <style name="border_color" source="border_color"/>
+    <style name="background_color" source="background_color"/>
+    <style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
+    <style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
+    <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
+    <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
+    ...
 </element>
 ```
 
@@ -173,23 +173,24 @@ The Quote `render_template` (`master.html`) is shown here in full. The same attr
 ```html
 <!--master.html-->
 <div attr="data.main.attributes">
-  <blockquote attr="data.quote.attributes" 
+    <blockquote class="quote-content"
+              attr="data.quote.attributes" 
               ko-style="data.quote.style" 
               css="data.quote.css" 
               html="data.quote.html">
-  </blockquote>
-  <div class="quote-author" 
+    </blockquote>
+    <div class="quote-author" 
        attr="data.author.attributes" 
        ko-style="data.author.style" 
        css="data.author.css" 
        html="data.author.html">
-  </div>
-  <div class="quote-title" 
+    </div>
+    <div class="quote-title" 
        attr="data.author_title.attributes" 
        ko-style="data.author_title.style" 
        css="data.author_title.css" 
        html="data.author_title.html">
-  </div>
+    </div>
 </div>
 ```
 
@@ -216,8 +217,8 @@ The `html` value is derived from the configuration `element` name  (`quote`) and
 
 ```xml
 <element name="quote">
-  <html name="quote_text" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
-	...
+    <html name="quote_text" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
+    ...
 </element>
 ```
 

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

@@ -50,13 +50,13 @@ In your configuration file, reference your Admin `preview_component` (`preview.j
 ```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_quote"
+    <type name="example_quote"
         label="Quote"
         component="Magento_PageBuilder/js/content-type"
         preview_component="Example_PageBuilderQuote/js/content-type/example_quote/preview"
         master_component="Magento_PageBuilder/js/content-type/master">
         ...
-  </type>
+    </type>
 </config>
 ```
 
@@ -76,37 +76,37 @@ The Quote `preview_component`  (`preview.js`) example is shown here in full for
 define([
   'Magento_PageBuilder/js/content-type/preview',
 ], function (PreviewBase) {
-  'use strict';
-  var $super;
-
-  function Preview(parent, config, stageId) {
+    'use strict';
+    var $super;
+    
+    function Preview(parent, config, stageId) {
     PreviewBase.call(this, parent, config, stageId);
-  }
-
-  Preview.prototype = Object.create(PreviewBase.prototype);
-  $super = PreviewBase.prototype;
-
-  Preview.prototype.retrieveOptions = function retrieveOptions() {
+    }
+    
+    Preview.prototype = Object.create(PreviewBase.prototype);
+    $super = PreviewBase.prototype;
+    
+    Preview.prototype.retrieveOptions = function retrieveOptions() {
     var options = $super.retrieveOptions.call(this, arguments);
-
+    
     // Change option menu icons
     options.remove.icon = "<i class='icon-admin-pagebuilder-error'></i>";
-
+    
     // Change tooltips
     options.edit.title = "Open Editor";
     options.remove.title = "Delete";
     // options.move.title = "Move";
     // options.duplicate.title = "Duplicate";
-
+    
     // Remove menu options
     // delete options.move;
     // delete options.duplicate;
     // delete options.edit;
     // delete options.remove;
-
+    
     return options;
-  };
-  return Preview;
+    };
+    return Preview;
 });
 ```
 
@@ -118,15 +118,15 @@ The first thing we do in our preview component is extend Page Builder's `Preview
 define([
   'Magento_PageBuilder/js/content-type/preview',
 ], function (PreviewBase) {
-  'use strict';
-  var $super;
-
-  function Preview(parent, config, stageId) {
+    'use strict';
+    var $super;
+    
+    function Preview(parent, config, stageId) {
     PreviewBase.call(this, parent, config, stageId);
-  }
-
-  Preview.prototype = Object.create(PreviewBase.prototype);
-  $super = PreviewBase.prototype;
+    }
+    
+    Preview.prototype = Object.create(PreviewBase.prototype);
+    $super = PreviewBase.prototype;
 ```
 
 You don't have to extend `Preview` this way, but if you do, you get access to both its public and protected functions. In our Quote example, we need access to one protected function, discussed next.
@@ -141,24 +141,24 @@ To do this, we need to override the protected `retrieveOptions()` function from
 
 ```js
 Preview.prototype.retrieveOptions = function retrieveOptions() {
-  var options = $super.retrieveOptions.call(this, arguments);
-  
-  // Change option menu icons
-  options.remove.icon = "<i class='icon-admin-pagebuilder-error'></i>";
-
-  // Change tooltips
-  options.edit.title = "Open Editor";
-  options.remove.title = "Delete";
-  // options.move.title = "Move";
-  // options.duplicate.title = "Duplicate";
-
-  // Remove menu options
-  // delete options.move;
-  // delete options.duplicate;
-  // delete options.edit;
-  // delete options.remove;
-
-  return options;
+    var options = $super.retrieveOptions.call(this, arguments);
+    
+    // Change option menu icons
+    options.remove.icon = "<i class='icon-admin-pagebuilder-error'></i>";
+    
+    // Change tooltips
+    options.edit.title = "Open Editor";
+    options.remove.title = "Delete";
+    // options.move.title = "Move";
+    // options.duplicate.title = "Duplicate";
+    
+    // Remove menu options
+    // delete options.move;
+    // delete options.duplicate;
+    // delete options.edit;
+    // delete options.remove;
+    
+    return options;
 };
 ```