Merge pull request #70 from magento-obsessive-owls/MAGETWO-92265-docs-edit-heading

anthoula · web-flow · commit 3b25e3652377 · 2018-05-30T17:04:20.000-05:00
[CMS Team 1] MAGETWO-92265 Missing documentation from Editing Heading
diff --git a/README.md b/README.md
@@ -36,6 +36,7 @@ This project repository contains PageBuilder developer documentation on the foll
 1. [Events]
 1. [Master format]
 1. [Visual select]
+1. [Custom Toolbar]
 
 [Architecture overview]: app/code/Magento/PageBuilder/docs/architecture-overview.md
 [BlueFoot to PageBuilder data migration]: app/code/Magento/PageBuilder/docs/bluefoot-data-migration.md
@@ -48,6 +49,7 @@ This project repository contains PageBuilder developer documentation on the foll
 [Events]: app/code/Magento/PageBuilder/docs/events.md
 [Master format]: app/code/Magento/PageBuilder/docs/master-format.md
 [Visual select]: app/code/Magento/PageBuilder/docs/visual-select.md
+[Custom Toolbar]: app/code/Magento/PageBuilder/docs/toolbar.md
 
 ## Contribute to PageBuilder
 
diff --git a/app/code/Magento/PageBuilder/docs/CONTRIBUTING.md b/app/code/Magento/PageBuilder/docs/CONTRIBUTING.md
@@ -27,6 +27,7 @@
 [Events]: events.md
 [Master format]: master-format.md
 [Visual select]: visual-select.md
+[Custom Toolbar]: toolbar.md
 [Roadmap and Known Issues]: roadmap.m
 
 ## Overview
diff --git a/app/code/Magento/PageBuilder/docs/README.md b/app/code/Magento/PageBuilder/docs/README.md
@@ -20,6 +20,7 @@ It replaces the default WYSIWYG Editor in the Admin area with a highly configura
     1. [Events]
     1. [Master format]
     1. [Visual select]
+    1. [Custom Toolbar]
 5. [Roadmap and known issues]
 
 [Introduction]: README.md
@@ -37,4 +38,5 @@ It replaces the default WYSIWYG Editor in the Admin area with a highly configura
 [Events]: events.md
 [Master format]: master-format.md
 [Visual select]: visual-select.md
-[Roadmap and Known Issues]: roadmap.md
+[Custom Toolbar]: toolbar.md
+[Roadmap and Known Issues]: roadmap.md
diff --git a/app/code/Magento/PageBuilder/docs/architecture-overview.md b/app/code/Magento/PageBuilder/docs/architecture-overview.md
@@ -17,6 +17,7 @@
     1. [Events]
     1. [Master format]
     1. [Visual select]
+    1. [Custom Toolbar]
 5. [Roadmap and known issues]
 
 [Introduction]: README.md
@@ -34,6 +35,7 @@
 [Events]: events.md
 [Master format]: master-format.md
 [Visual select]: visual-select.md
+[Custom Toolbar]: toolbar.md
 [Roadmap and Known Issues]: roadmap.md
 
 ## What is PageBuilder?
diff --git a/app/code/Magento/PageBuilder/docs/bluefoot-data-migration.md b/app/code/Magento/PageBuilder/docs/bluefoot-data-migration.md
@@ -16,6 +16,7 @@
     1. [Events]
     1. [Master format]
     1. [Visual select]
+    1. [Custom Toolbar]
 5. [Roadmap and known issues]
 
 [Introduction]: README.md
@@ -33,6 +34,7 @@
 [Events]: events.md
 [Master format]: master-format.md
 [Visual select]: visual-select.md
+[Custom Toolbar]: toolbar.md
 [Roadmap and known issues]: roadmap.md
 
 ## Overview
diff --git a/app/code/Magento/PageBuilder/docs/content-type-configuration.md b/app/code/Magento/PageBuilder/docs/content-type-configuration.md
@@ -19,7 +19,8 @@
     1. [How to add a new content type]
     1. [Events]
     1. [Master format]
-    1. [Visual select]    
+    1. [Visual select]   
+    1. [Custom Toolbar] 
 5. [Roadmap and known issues]
 
 [Introduction]: README.md
@@ -37,6 +38,7 @@
 [Events]: events.md
 [Master format]: master-format.md
 [Visual select]: visual-select.md
+[Custom Toolbar]: toolbar.md
 [Roadmap and known issues]: roadmap.md
 
 ## Configuration
diff --git a/app/code/Magento/PageBuilder/docs/custom-configuration.md b/app/code/Magento/PageBuilder/docs/custom-configuration.md
@@ -16,7 +16,8 @@
     1. [How to add a new content type]
     1. [Events]
     1. [Master format]
-    1. [Visual select]   
+    1. [Visual select]
+    1. [Custom Toolbar]
 5. [Roadmap and known issues]
 
 [Introduction]: README.md
@@ -34,6 +35,7 @@
 [Events]: events.md
 [Master format]: master-format.md
 [Visual select]: visual-select.md
+[Custom Toolbar]: toolbar.md
 [Roadmap and known issues]: roadmap.md
 
 
diff --git a/app/code/Magento/PageBuilder/docs/developer-documentation.md b/app/code/Magento/PageBuilder/docs/developer-documentation.md
@@ -17,6 +17,7 @@
     1. [Events]
     1. [Master format]
     1. [Visual select] 
+    1. [Custom Toolbar] 
 5. [Roadmap and known issues]
 
 **[Architecture overview]** - An overview of the PageBuilder module architecture.
@@ -41,6 +42,8 @@
 
 **[Visual select]** - Documentation on customizing the visual select field.
 
+**[Custom Toolbar]** - Documentation on adding a custom toolbar.
+
 [Introduction]: README.md
 [Contribution guide]: CONTRIBUTING.md
 [Installation guide]: install.md
@@ -55,4 +58,5 @@
 [Events]: events.md
 [Master format]: master-format.md
 [Visual select]: visual-select.md
+[Custom Toolbar]: toolbar.md
 [Roadmap and known issues]: roadmap.md
diff --git a/app/code/Magento/PageBuilder/docs/events.md b/app/code/Magento/PageBuilder/docs/events.md
@@ -17,6 +17,7 @@
     1. **Events**
     1. [Master format]
     1. [Visual select]
+    1. [Custom Toolbar]
 5. [Roadmap and known issues]
 
 [Introduction]: README.md
@@ -34,6 +35,7 @@
 [Events]: events.md
 [Master format]: master-format.md
 [Visual select]: visual-select.md
+[Custom Toolbar]: toolbar.md
 [Roadmap and Known Issues]: roadmap.md
 
 This document contains reference information for events dispatched in PageBuilder.
diff --git a/app/code/Magento/PageBuilder/docs/how-to-add-new-content-type.md b/app/code/Magento/PageBuilder/docs/how-to-add-new-content-type.md
@@ -17,6 +17,7 @@
     1. [Events]
     1. [Master format]
     1. [Visual select]   
+    1. [Custom Toolbar]
 5. [Roadmap and known issues]
 
 [Introduction]: README.md
@@ -34,6 +35,7 @@
 [Events]: events.md
 [Master format]: master-format.md
 [Visual select]: visual-select.md
+[Custom Toolbar]: toolbar.md
 [Roadmap and known issues]: roadmap.md
 
 
diff --git a/app/code/Magento/PageBuilder/docs/iconography.md b/app/code/Magento/PageBuilder/docs/iconography.md
@@ -16,7 +16,8 @@
     1. [How to add a new content type]
     1. [Events]
     1. [Master format]
-    1. [Visual select] 
+    1. [Visual select]
+    1. [Custom Toolbar]
 5. [Roadmap and known issues]
 
 [Introduction]: README.md
@@ -34,6 +35,7 @@
 [Events]: events.md
 [Master format]: master-format.md
 [Visual select]: visual-select.md
+[Custom Toolbar]: toolbar.md
 [Roadmap and known issues]: roadmap.md
 
 ## Overview
diff --git a/app/code/Magento/PageBuilder/docs/images/toolbar.png b/app/code/Magento/PageBuilder/docs/images/toolbar.png
diff --git a/app/code/Magento/PageBuilder/docs/master-format.md b/app/code/Magento/PageBuilder/docs/master-format.md
@@ -17,6 +17,7 @@
     1. [Events]
     1. **Master format**
     1. [Visual select]
+    1. [Custom Toolbar]
 5. [Roadmap and known issues]
 
 [Introduction]: README.md
@@ -34,6 +35,7 @@
 [Events]: events.md
 [Master format]: master-format.md
 [Visual select]: visual-select.md
+[Custom Toolbar]: toolbar.md
 [Roadmap and Known Issues]: roadmap.md
 
 PageBuilder uses XHTML with inline styles and data attributes as the master format for storage.
diff --git a/app/code/Magento/PageBuilder/docs/module-integration.md b/app/code/Magento/PageBuilder/docs/module-integration.md
@@ -16,7 +16,8 @@
     1. [How to add a new content type]
     1. [Events]
     1. [Master format]
-    1. [Visual select] 
+    1. [Visual select]
+    1. [Custom Toolbar]
 5. [Roadmap and known issues]
 
 [Introduction]: README.md
@@ -34,6 +35,7 @@
 [Events]: events.md
 [Master format]: master-format.md
 [Visual select]: visual-select.md
+[Custom Toolbar]: toolbar.md
 [Roadmap and known issues]: roadmap.md
 
 
diff --git a/app/code/Magento/PageBuilder/docs/new-content-type-example.md b/app/code/Magento/PageBuilder/docs/new-content-type-example.md
@@ -17,6 +17,7 @@
     1. [Events]
     1. [Master format]
     1. [Visual select]
+    1. [Custom Toolbar]
 5. [Roadmap and known issues]
 
 [Introduction]: README.md
@@ -34,6 +35,7 @@
 [Events]: events.md
 [Master format]: master-format.md
 [Visual select]: visual-select.md
+[Custom Toolbar]: toolbar.md
 [Roadmap and known issues]: roadmap.md
 
 
diff --git a/app/code/Magento/PageBuilder/docs/toolbar.md b/app/code/Magento/PageBuilder/docs/toolbar.md
@@ -0,0 +1,115 @@
+# Custom Toolbar
+
+## Navigation
+
+1. [Introduction]
+2. [Installation guide]
+3. [Contribution guide]
+4. [Developer documentation]
+    1. [Architecture overview]
+    1. [BlueFoot to PageBuilder data migration]
+    1. [Third-party content type migration]
+    1. [Iconography]
+    1. [Module integration]
+    1. [Additional data configuration]
+    1. [Content type configuration]
+    1. [How to add a new content type]
+    1. [Events]
+    1. [Master format]
+    1. [Visual select]
+    1. **Custom Toolbar**
+5. [Roadmap and known issues]
+
+[Introduction]: README.md
+[Installation Guide]: install.md
+[Contribution guide]: CONTRIBUTING.md
+[Developer documentation]: developer-documentation.md
+[Architecture overview]: architecture-overview.md
+[BlueFoot to PageBuilder data migration]: bluefoot-data-migration.md
+[Third-party content type migration]: new-content-type-example.md
+[Iconography]: iconography.md
+[Module integration]: module-integration.md
+[Additional data configuration]: custom-configuration.md
+[Content type configuration]: content-type-configuration.md
+[How to add a new content type]: how-to-add-new-content-type.md
+[Events]: events.md
+[Master format]: master-format.md
+[Visual select]: visual-select.md
+[Custom Toolbar]: toolbar.md
+[Roadmap and Known Issues]: roadmap.md
+
+## What's in this topic
+This document outlines how to add a custom toolbar in Page Builder. It's a simplified/lightweight version of a WYSIWYG:
+![Page Builder toolbar](images/toolbar.png)
+
+## Overview
+
+To add a custom toolbar to a Page Builder content block:
+1. [Add a toolbar configuration](#toolbarConfig)
+2. [Add a toolbar template](#toolbarTpl)
+
+## Add a toolbar configuration
+
+To add a Toolbar configuration to your content block, you need to create a new instance of the `Toolbar` class, then add configuration options to it. 
+
+An example implementation can be found in the Heading content block:
+`app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/heading/preview.ts`
+
+In the Heading example, the `Toolbar` constructor requires its parent preview and the toolbar options you want to include as follows:
+
+```javascript
+new Toolbar(this, this.getToolbarOptions());
+```
+
+where `this.getToolbarOptions()`returns the toolbar options. For example, the Heading toolbar's three text-alignment options are defined as follows:
+
+```typescript
+{
+    key: "text_align",
+    type: "select",
+    values: [
+        {
+            value: "left",
+            label: "Left",
+            icon: "icon-pagebuilder-align-left",
+        },
+        {
+            value: "center",
+            label: "Center",
+            icon: "icon-pagebuilder-align-center",
+        },
+        {
+            value: "right",
+            label: "Right",
+            icon: "icon-pagebuilder-align-right",
+        },
+    ],
+},
+```
+Option property descriptions:
+
+| Element             | Description                                                                        |
+| ------------------- | ---------------------------------------------------------------------------------- |
+| `key`               | Describes the group name in the menu (comparable to a CSS property, `text_align`). |
+| `type`              | Describes the element type (comparable to the HTML `input` type).                  |
+| `values`            | Array of values for each option.                                                   |
+| `value`             | Value referenced in the dataStore (comparable to a CSS property value).            |
+| `label`             | Label of the option. If no icon is specified, this will be displayed               |
+| `icon`              | Name of CSS class to use for the icon.                                             |
+
+
+## Add toolbar template
+
+In your content block template, add the toolbar events to your main toolbar container, and insert the toolbar template:
+```html
+<div class="pagebuilder-toolbar-container" tabindex="0" event="{ focusin: toolbar.onFocusIn, focusout: toolbar.onFocusOut }">
+    <with args="toolbar">
+        <render args="template" />
+    </with>
+</div>
+```
+
+An example implementation can be found in the Heading content block:
+`app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/heading/default/preview.html`
+
+
diff --git a/app/code/Magento/PageBuilder/docs/visual-select.md b/app/code/Magento/PageBuilder/docs/visual-select.md
@@ -17,6 +17,7 @@
     1. [Events]
     1. [Master format]
     1. **Visual select**
+    1. [Custom Toolbar]
 5. [Roadmap and known issues]
 
 [Introduction]: README.md
@@ -34,6 +35,7 @@
 [Events]: events.md
 [Master format]: master-format.md
 [Visual select]: visual-select.md
+[Custom Toolbar]: toolbar.md
 [Roadmap and Known Issues]: roadmap.md
 
 ## What's in this topic
@@ -88,7 +90,7 @@ Use a virtual type of `Magento\PageBuilder\Model\Source\VisualSelect` in your mo
            <argument name="optionsSize" xsi:type="string">small</argument>
            <argument name="optionsData" xsi:type="array">
                <item name="0" xsi:type="array">
-                   <item name="value" xsi:type="string">default</item>
+                   <item name="value" xsi:type="string"/>
                    <item name="title" xsi:type="string" translate="true">Default</item>
                </item>
                <item name="1" xsi:type="array">
