Skip to content

Commit 4f6df11

Browse files
author
Bruce Denham
committed
Updates from review
1 parent a9dea71 commit 4f6df11

File tree

1 file changed

+7
-125
lines changed

1 file changed

+7
-125
lines changed

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

Lines changed: 7 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -50,133 +50,12 @@ To add a custom toolbar to a Page Builder content block:
5050

5151
## Add a toolbar configuration
5252

53-
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. Page Builder's Heading content block (`app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/heading/preview.ts`) provides an example of what you can do in your own content block:
53+
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.
5454

55-
```typescript
56-
import $ from "jquery";
57-
import events from "uiEvents";
58-
import _ from "underscore";
59-
import ContentTypeConfigInterface from "../../content-type-config.d";
60-
import Toolbar from "../../content-type-toolbar";
61-
import ToolbarOptionInterface from "../../content-type-toolbar/option.d";
62-
import ContentTypeInterface from "../../content-type.d";
63-
import ContentTypeReadyEventParamsInterface from "../content-type-ready-event-params.d";
64-
import ObservableUpdater from "../observable-updater";
65-
import BasePreview from "../preview";
66-
67-
export default class Heading extends BasePreview {
68-
public toolbar: Toolbar;
69-
private element: Element;
70-
71-
/**
72-
* @param {ContentTypeInterface} parent
73-
* @param {ContentTypeConfigInterface} config
74-
* @param {ObservableUpdater} observableUpdater
75-
*/
76-
constructor(
77-
parent: ContentTypeInterface,
78-
config: ContentTypeConfigInterface,
79-
observableUpdater: ObservableUpdater,
80-
) {
81-
super(parent, config, observableUpdater);
82-
this.toolbar = new Toolbar(
83-
this,
84-
this.getToolbarOptions(),
85-
);
86-
}
87-
88-
/**
89-
* On render init the tabs widget
90-
*
91-
* @param {Element} element
92-
*/
93-
public afterRender(element: Element): void {
94-
this.element = element;
95-
}
96-
97-
public bindEvents() {
98-
super.bindEvents();
99-
100-
// When a heading is dropped for the first time show heading toolbar
101-
events.on("heading:block:dropped:create", (args: ContentTypeReadyEventParamsInterface) => {
102-
if (args.id === this.parent.id) {
103-
_.delay(() => {
104-
$(this.element).focus();
105-
}, 100); // 100 ms delay to allow for heading to render
106-
}
107-
});
108-
}
109-
110-
/**
111-
* Build and return the tool bar options for heading
112-
*
113-
* @returns {ToolbarOptionInterface[]}
114-
*/
115-
private getToolbarOptions(): ToolbarOptionInterface[] {
116-
return [
117-
{
118-
key: "heading_type",
119-
type: "select",
120-
values: [
121-
{
122-
value: "h1",
123-
label: "H1",
124-
icon: "",
125-
},
126-
{
127-
value: "h2",
128-
label: "H2",
129-
icon: "",
130-
},
131-
{
132-
value: "h3",
133-
label: "H3",
134-
icon: "",
135-
},
136-
{
137-
value: "h4",
138-
label: "H4",
139-
icon: "",
140-
},
141-
{
142-
value: "h5",
143-
label: "H5",
144-
icon: "",
145-
},
146-
{
147-
value: "h6",
148-
label: "H6",
149-
icon: "",
150-
},
151-
],
152-
},
153-
{
154-
key: "text_align",
155-
type: "select",
156-
values: [
157-
{
158-
value: "left",
159-
label: "Left",
160-
icon: "icon-pagebuilder-align-left",
161-
},
162-
{
163-
value: "center",
164-
label: "Center",
165-
icon: "icon-pagebuilder-align-center",
166-
},
167-
{
168-
value: "right",
169-
label: "Right",
170-
icon: "icon-pagebuilder-align-right",
171-
},
172-
],
173-
},
174-
];
175-
}
176-
}
177-
```
55+
An example implementation can be found in the Heading content block:
56+
`app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/heading/preview.ts`
17857

179-
In the Heading example, the `Toolbar` constructor requires its parent preview and the toolbar options you want to include:
58+
In the Heading example, the `Toolbar` constructor requires its parent preview and the toolbar options you want to include as follows:
18059

18160
```javascript
18261
new Toolbar(this, this.getToolbarOptions());
@@ -230,4 +109,7 @@ In your content block template, add the toolbar events to your main toolbar cont
230109
</div>
231110
```
232111

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

0 commit comments

Comments
 (0)