Skip to content

Commit 85478aa

Browse files
anthoulaanthoula
committed
MAGETWO-92265: Missing documentation from Editing Heading
- update docs for custom toolbar
1 parent dfb46eb commit 85478aa

File tree

4 files changed

+202
-1
lines changed

4 files changed

+202
-1
lines changed

‎app/code/Magento/PageBuilder/docs/README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ It replaces the default WYSIWYG Editor in the Admin area with a highly configura
2020
1. [Events]
2121
1. [Master format]
2222
1. [Visual select]
23+
1. [Custom Toolbar]
2324
5. [Roadmap and known issues]
2425

2526
[Introduction]: README.md
@@ -37,4 +38,5 @@ It replaces the default WYSIWYG Editor in the Admin area with a highly configura
3738
[Events]: events.md
3839
[Master format]: master-format.md
3940
[Visual select]: visual-select.md
40-
[Roadmap and Known Issues]: roadmap.md
41+
[Custom Toolbar]: toolbar.md
42+
[Roadmap and Known Issues]: roadmap.md

‎app/code/Magento/PageBuilder/docs/developer-documentation.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
1. [Events]
1818
1. [Master format]
1919
1. [Visual select]
20+
1. [Custom Toolbar]
2021
5. [Roadmap and known issues]
2122

2223
**[Architecture overview]** - An overview of the PageBuilder module architecture.
@@ -41,6 +42,8 @@
4142

4243
**[Visual select]** - Documentation on customizing the visual select field.
4344

45+
**[Custom Toolbar]** - Documentation on adding a custom toolbar.
46+
4447
[Introduction]: README.md
4548
[Contribution guide]: CONTRIBUTING.md
4649
[Installation guide]: install.md
@@ -55,4 +58,5 @@
5558
[Events]: events.md
5659
[Master format]: master-format.md
5760
[Visual select]: visual-select.md
61+
[Custom Toolbar]: toolbar.md
5862
[Roadmap and known issues]: roadmap.md

‎app/code/Magento/PageBuilder/docs/images/toolbar.png

12.4 KB
Loading

‎app/code/Magento/PageBuilder/docs/toolbar.md

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
# Visual Select
2+
3+
## Navigation
4+
5+
1. [Introduction]
6+
2. [Installation guide]
7+
3. [Contribution guide]
8+
4. [Developer documentation]
9+
1. [Architecture overview]
10+
1. [BlueFoot to PageBuilder data migration]
11+
1. [Third-party content type migration]
12+
1. [Iconography]
13+
1. [Module integration]
14+
1. [Additional data configuration]
15+
1. [Content type configuration]
16+
1. [How to add a new content type]
17+
1. [Events]
18+
1. [Master format]
19+
1. [Visual select]
20+
1. **Toolbar**
21+
5. [Roadmap and known issues]
22+
23+
[Introduction]: README.md
24+
[Installation Guide]: install.md
25+
[Contribution guide]: CONTRIBUTING.md
26+
[Developer documentation]: developer-documentation.md
27+
[Architecture overview]: architecture-overview.md
28+
[BlueFoot to PageBuilder data migration]: bluefoot-data-migration.md
29+
[Third-party content type migration]: new-content-type-example.md
30+
[Iconography]: iconography.md
31+
[Module integration]: module-integration.md
32+
[Additional data configuration]: custom-configuration.md
33+
[Content type configuration]: content-type-configuration.md
34+
[How to add a new content type]: how-to-add-new-content-type.md
35+
[Events]: events.md
36+
[Master format]: master-format.md
37+
[Visual select]: visual-select.md
38+
[Toolbar]: toolbar.md
39+
[Roadmap and Known Issues]: roadmap.md
40+
41+
## What's in this topic
42+
This document outlines how to add a custom toolbar in Page Builder. It's a simplified/lightweight version of a WYSIWYG:
43+
![Page Builder toolbar](images/toolbar.png)
44+
45+
## Overview
46+
47+
To add toolbar customization to a Page Builder content block:
48+
1. [Add toolbar configuration](#toolbarConfig)
49+
2. [Add toolbar template](#toolbarTpl)
50+
51+
## Add toolbar configuration
52+
53+
Add configuration options to your content block preview, and pass to a new instance of Toolbar.
54+
55+
An example can be found in the Heading content block:
56+
`app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/heading/preview.ts`
57+
58+
59+
```typescript
60+
import $ from "jquery";
61+
import events from "uiEvents";
62+
import _ from "underscore";
63+
import ContentTypeConfigInterface from "../../content-type-config.d";
64+
import Toolbar from "../../content-type-toolbar";
65+
import ToolbarOptionInterface from "../../content-type-toolbar/option.d";
66+
import ContentTypeInterface from "../../content-type.d";
67+
import ContentTypeReadyEventParamsInterface from "../content-type-ready-event-params.d";
68+
import ObservableUpdater from "../observable-updater";
69+
import BasePreview from "../preview";
70+
71+
export default class Heading extends BasePreview {
72+
public toolbar: Toolbar;
73+
private element: Element;
74+
75+
/**
76+
* @param {ContentTypeInterface} parent
77+
* @param {ContentTypeConfigInterface} config
78+
* @param {ObservableUpdater} observableUpdater
79+
*/
80+
constructor(
81+
parent: ContentTypeInterface,
82+
config: ContentTypeConfigInterface,
83+
observableUpdater: ObservableUpdater,
84+
) {
85+
super(parent, config, observableUpdater);
86+
this.toolbar = new Toolbar(
87+
this,
88+
this.getToolbarOptions(),
89+
);
90+
}
91+
92+
/**
93+
* On render init the tabs widget
94+
*
95+
* @param {Element} element
96+
*/
97+
public afterRender(element: Element): void {
98+
this.element = element;
99+
}
100+
101+
public bindEvents() {
102+
super.bindEvents();
103+
104+
// When a heading is dropped for the first time show heading toolbar
105+
events.on("heading:block:dropped:create", (args: ContentTypeReadyEventParamsInterface) => {
106+
if (args.id === this.parent.id) {
107+
_.delay(() => {
108+
$(this.element).focus();
109+
}, 100); // 100 ms delay to allow for heading to render
110+
}
111+
});
112+
}
113+
114+
/**
115+
* Build and return the tool bar options for heading
116+
*
117+
* @returns {ToolbarOptionInterface[]}
118+
*/
119+
private getToolbarOptions(): ToolbarOptionInterface[] {
120+
return [
121+
{
122+
key: "heading_type",
123+
type: "select",
124+
values: [
125+
{
126+
value: "h1",
127+
label: "H1",
128+
icon: "",
129+
},
130+
{
131+
value: "h2",
132+
label: "H2",
133+
icon: "",
134+
},
135+
{
136+
value: "h3",
137+
label: "H3",
138+
icon: "",
139+
},
140+
{
141+
value: "h4",
142+
label: "H4",
143+
icon: "",
144+
},
145+
{
146+
value: "h5",
147+
label: "H5",
148+
icon: "",
149+
},
150+
{
151+
value: "h6",
152+
label: "H6",
153+
icon: "",
154+
},
155+
],
156+
},
157+
{
158+
key: "text_align",
159+
type: "select",
160+
values: [
161+
{
162+
value: "left",
163+
label: "Left",
164+
icon: "icon-pagebuilder-align-left",
165+
},
166+
{
167+
value: "center",
168+
label: "Center",
169+
icon: "icon-pagebuilder-align-center",
170+
},
171+
{
172+
value: "right",
173+
label: "Right",
174+
icon: "icon-pagebuilder-align-right",
175+
},
176+
],
177+
},
178+
];
179+
}
180+
}
181+
```
182+
183+
## Add toolbar template
184+
185+
In your content block template, add the toolbar events to your main toolbar container, and insert the toolbar template:
186+
```html
187+
<div class="pagebuilder-toolbar-container" tabindex="0" event="{ focusin: toolbar.onFocusIn, focusout: toolbar.onFocusOut }">
188+
<with args="toolbar">
189+
<render args="template" />
190+
</with>
191+
</div>
192+
```
193+
194+
195+

0 commit comments

Comments
 (0)