Skip to content

Commit 7d59614

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

File tree

1 file changed

+84
-128
lines changed

1 file changed

+84
-128
lines changed

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

Lines changed: 84 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Visual Select
1+
# Custom Toolbar
22

33
## Navigation
44

@@ -50,135 +50,89 @@ To add toolbar customization to a Page Builder content block:
5050

5151
## Add toolbar configuration
5252

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-
}
53+
Add configuration options to your content block preview. This is an array of options:
54+
55+
| Element | Description |
56+
| ------------------- | ------------------------------------------------------------------------ |
57+
| `key` | Describes the group name in the menu. |
58+
| `type` | Describes the element type. |
59+
| `values` | Array of values for each option. |
60+
| `value` | Value referenced in the dataStore. |
61+
| `label` | Label of the option. If no icon is specified, this will be displayed |
62+
| `icon` | Name of CSS class to use for the icon. |
63+
64+
65+
```javascript
66+
private getToolbarOptions(): ToolbarOptionInterface[] {
67+
return [
68+
{
69+
key: "heading_type",
70+
type: "select",
71+
values: [
72+
{
73+
value: "h1",
74+
label: "H1",
75+
icon: "",
76+
},
77+
{
78+
value: "h2",
79+
label: "H2",
80+
icon: "",
81+
},
82+
{
83+
value: "h3",
84+
label: "H3",
85+
icon: "",
86+
},
87+
{
88+
value: "h4",
89+
label: "H4",
90+
icon: "",
91+
},
92+
{
93+
value: "h5",
94+
label: "H5",
95+
icon: "",
96+
},
97+
{
98+
value: "h6",
99+
label: "H6",
100+
icon: "",
101+
},
102+
],
103+
},
104+
{
105+
key: "text_align",
106+
type: "select",
107+
values: [
108+
{
109+
value: "left",
110+
label: "Left",
111+
icon: "icon-pagebuilder-align-left",
112+
},
113+
{
114+
value: "center",
115+
label: "Center",
116+
icon: "icon-pagebuilder-align-center",
117+
},
118+
{
119+
value: "right",
120+
label: "Right",
121+
icon: "icon-pagebuilder-align-right",
122+
},
123+
],
124+
},
125+
];
180126
}
181127
```
128+
129+
Pass toolbar configuration to a new instance of Toolbar.
130+
```javascript
131+
new Toolbar(this, this.getToolbarOptions());
132+
```
133+
134+
An example implementation can be found in the Heading content block:
135+
`app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/heading/preview.ts`
182136

183137
## Add toolbar template
184138

@@ -191,5 +145,7 @@ In your content block template, add the toolbar events to your main toolbar cont
191145
</div>
192146
```
193147

148+
An example implementation can be found in the Heading content block:
149+
`app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/heading/default/preview.html`
194150

195151

0 commit comments

Comments
 (0)