You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
PageBuilder is tool that simplifies content creation by letting you draganddrop content types and configure them without writing a line of code.
5
+
PageBuilder is a tool that simplifies content creation by letting you drag-and-drop content types and configure them without writing a line of code.
6
6
Changes appear in real time in the preview area in the Admin and matches what users see on the storefront.
7
7
8
8
## Technologies
9
9
10
-
PageBuilder is written in [TypeScript], a superset of JavaScript, that is compiled down to JavaScript prior to a release.
11
-
Use the TypeScript components in the module as reference to understand the flow information.
10
+
We wrote PageBuilder in [TypeScript], a superset of JavaScript. Before each release, we transpile the TypeScript to JavaScript.
11
+
Use the TypeScript components in the module as a reference to understand the flow of information.
12
12
13
13
**Note:**
14
-
*You do not need to use TypeScript in your module to work with the PageBuilder code.*
14
+
*You need not use TypeScript in your module to work with the PageBuilder code.*
15
15
16
-
PageBuilder also uses core Magento technologies such as jQuery, Knockout & UI Components.
17
-
It also uses additional libraries to help with various content types shipped with the module.
16
+
PageBuilder also uses core Magento technologies such as jQuery, Knockout, and UI Components, along with additional libraries to help with various content types shipped with the module.
18
17
19
18
## Storage format
20
19
21
-
PageBuilder uses XHTML with inline styles and data attributes for storage and as the master format.
22
-
This allows the content to be displayed with minimum changes to the Magento storefront and other third-party systems.
23
-
24
-
To display Page Builder content on storefront Magento and third party systems need to do the following
20
+
**[Can you add a definition and explain what the master format is? The first sentence below is not clear.]**
25
21
22
+
PageBuilder uses XHTML with inline styles and data attributes for storage and as the master format.
23
+
This allows Page Builder to display content with minimum changes to the Magento storefront and other third-party systems.
26
24
Use the following steps to display PageBuilder content on a Magento storefront or third-party system:
27
-
28
25
<!-- {% raw %} -->
26
+
29
27
1. Replace all Magento directives such as `{{image url=path/to/image.png}}`
30
-
2. Add custom stylesheet to provide the base styles that user can't edit.
31
-
This includes styles for the content types such as `slider`, `tabs`, etc.
32
-
3. After the content renders, load and initialize the widgets and libraries on the frontend that need initialization, such as slider, tabs, etc.
28
+
2. Add custom stylesheet to provide the base styles that the user can't edit. This includes styles for the content types, such as the `slider` and the `tabs`.
29
+
3. After the content renders, load and initialize the widgets and libraries on the frontend that need initialization, such as the `slider` and the `tabs`.
33
30
<!-- {% endraw %} -->
34
31
35
32
## Integration with Magento and custom modules
36
33
37
-
When PageBuilder is enabled in the system configuration, it replaces all WYSIWYG instances.
38
-
It does this by intercepting the WYSIWYG UI Component field and replacing the traditional WYSIWYG editor with the PageBuilder editor.
39
-
40
-
This means that any custom extension that utilizes the WYSIWYG field UI Component automatically supports the PageBuilder editor.
34
+
**[This seems very relevant to our current issues with PB compatibility. Can you provide more detailed info on this topic?]**
41
35
42
-
To revert back to using the default WYSIWYG, add the following entry to the field configuration in the XML configuration file:
36
+
When you activate PageBuilder, it replaces all WYSIWYG instances by intercepting the WYSIWYG UI Component field and replacing the traditional WYSIWYG editor with the PageBuilder editor.
37
+
This means that you need to write any custom extension that uses the WYSIWYG field UI Component to support the PageBuilder editor.
38
+
You can revert to using the default WYSIWYG again by adding the following entry to the field configuration in the XML configuration file:
43
39
44
40
```
45
41
<item name="wysiwygConfigData" xsi:type="array">
@@ -49,80 +45,88 @@ To revert back to using the default WYSIWYG, add the following entry to the fiel
49
45
50
46
## Big picture
51
47
52
-
48
+
| Content type |`component`| View model responsible for rendering the preview and master format |
53
+
| Preview component |`preview_component`| Contains preview specific logic generic for all appearances. Preview component is optional |
54
+
| Master component |`content_component`| Contains master format rendering logic generic for all appearances. Content component is optional |
55
+
| Data Store || Contains data for the content type |
60
56
| Appearance |`appearance`| Configuration for content type that defines look and behavior. Includes data mapping, form, templates, reader. |
61
-
| Preview template |`preview_template`| Template used to display the element in the preview |
62
-
| Master template |`master_template`| Template used to render the content type to the master format |
63
-
| Form |`form`| Form that will be used to edit content type |
64
-
| Reader |`reader`| Reads data for the content type from the master format |
57
+
| Preview template |`preview_template`| Template used to display the element in the preview |
58
+
| Master template |`master_template`| Template used to render the content type to the master format |
59
+
| Form |`form`| Form used to edit attributes of the content type|
60
+
| Reader |`reader`| Reads data for the content type from the master format |
65
61
66
62
## Data flow
67
63
68
-
69
-
64
+
70
65
The following is a simple overview of the data flow:
71
66
72
-
1.Data is read by reader `Magento_PageBuilder/js/master-format/read/configurable`.
73
-
2.Data for each element (`border`, `border_color`, `border_width` etc) is converted to an internal format by element converters.
74
-
3.Data is converted by mass converters. For more details see [converter interface](../configurations/content-type-configuration.md).
75
-
4.Content type is created and `Magento_PageBuilder/js/data-store` is populated with data.
76
-
5.Data in the data store is modified in the form or using liveedit.
77
-
6.Data is converted by mass converters.
78
-
7.It is then converted by element data converters.
79
-
8.The preview and master component observables are updated.
80
-
9. When the user saves the page's master format into the database, the editable with the PageBuilder entity attribute is updated.
67
+
1.Page Builder's reader (`Magento_PageBuilder/js/master-format/read/configurable`) reads the data.
68
+
2.Page Builder's element converters convert the data for each element (`border`, `border_color`, `border_width` etc) to an internal format.
69
+
3.Page Builder's mass converters convert the data. For more details see [converter interface](../configurations/content-type-configuration.md).
70
+
4.Page Builder creates its content types and populates the `Magento_PageBuilder/js/data-store` with data.
71
+
5.End-users modify the data in the data store within the form editor or when using `live-edit` on the stage.
72
+
6.Page Builder converts the data using mass converters.
73
+
7.Page Builder converts the data using element data converters.
74
+
8.Page Builder updates the preview and master component observables.
75
+
9. When the end-user saves the page's master format into the database, Page Builder updates the editable entity attribute.
81
76
82
77
### Mass converter
83
78
84
-
A Mass converter modifies data for all content type elements.
85
-
For example, the content type of two elements, main and image has data stored in the fields `border`, `border_color`, `border_width`, `background_image`.
86
-
A mass converter allows you to modify all these fields.
79
+
A Mass converter changes data for all content type elements.
80
+
For example, the content type for two elements, main and image, has data stored in the fields `border`, `border_color`, `border_width`, `background_image`.
81
+
A mass converter allows you to change all these fields.
87
82
88
-
For more information, read about how [data is stored internally](#Datastore).
83
+
**[Can you provide a small snippet of code that shows briefly what using a mass converter looks like within a content type.]**
84
+
85
+
For more information, read about how Page Builder [stores data](#datastore).
89
86
90
87
### Element converter
91
88
92
-
An element converter modifies a single field at a time.
89
+
An element converter changes a single field at a time.
93
90
94
91
## Datastore
95
92
96
-
Data for content types are stored in a simple object called the DataStore `Magento_PageBuilder/js/data-store`.
93
+
Page Builder stores data for content types in a simple object called the DataStore: `Magento_PageBuilder/js/data-store`.
94
+
95
+
97
96
98
-
`var` from [content type configuration](../configurations/content-type-configuration.md) is the name of a parameter in the DataStore.
97
+
**[Can you provide more information to the paragraph below needs more explanation. I'm not sure what significance the parameter `var` has. It was just mentioned but it needs more info on its use and significance]**
99
98
100
-
You can use the `subscribe` method to subscribe to changes in the data and perform custom action on it.
99
+
The parameter `var` from [content type configuration](../configurations/content-type-configuration.md) is the name of a parameter in the DataStore.
100
+
You can use the `subscribe` method to listen for changes in the DataStore and perform custom actions on the data.
101
101
102
102
## Content type configuration
103
103
104
-
Please see [content type configuration](../configurations/content-type-configuration.md) for information on content type configuration.
104
+
Please see [content type configuration](../configurations/content-type-configuration.md) for more information.
105
105
106
106
## Appearances
107
107
108
-
Appearances allow you to make the following customization on existing content types:
108
+
Appearances allow you to customize existing content types as follows:
109
109
110
-
1. Add new style properties to existing content types
111
-
2. Add new attributes to existing content types. This is similar to above.
112
-
3. Change templates
113
-
4. Move data between elements, achieved with datamapping configuration.
110
+
1. Add new style properties to existing content types.
111
+
2. Add new attributes to existing content types. This is similar to adding new style properties.
112
+
3. Change templates.
113
+
4. Move data between elements, by data-mapping within the content type's configuration file.
114
114
For example, a developer can move the `margin` style property from one element to another.
*We also considered introducing appearance component and/or moving the initialization of the libraries to bindings. This would allow you to add custom logic per appearance changes and libraries per appearance for content types like slider, tabs, etc.*
130
+
*We also considered introducing appearance component and/or moving the initialization of the libraries to bindings. This would allow you to add custom logic per appearance changes and libraries per appearance for content types like the `slider` and the `tabs`.
0 commit comments