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. It allows to grag and drop content types and configure them. Changes are immediately displayed in the preview in admin and it matches to what user will see on the storefront.
6
-
7
-
## What is Page Builder?
8
-
9
-
PageBuilder is tool that simplifies content creation. It allows to grag and drop content types and configure them. Changes are immediately displayed in the preview in admin and it matches to what user will see on the storefront.
[BlueFoot to PageBuilder data migration]: bluefoot-data-migration.md
24
+
[Third-party content type migration]: new-content-type-example.md
25
+
[Iconography]: iconography.md
26
+
[Module integration]: module-integration.md
27
+
[Additional data configuration]: custom-configuration.md
28
+
[Content type configuration]: content-type-configuration.md
29
+
[How to add a new content type]: how-to-add-new-content-type.md
30
+
[Roadmap and Known Issues]: roadmap.md
31
+
32
+
## What is PageBuilder?
33
+
34
+
PageBuilder is tool that simplifies content creation by letting you drag and drop content types and configure them without writing a line of code.
35
+
Changes appear in real time in the preview area in the Admin and matches what users see on the storefront.
10
36
11
37
## Technologies
12
38
13
-
Page Builder written in TypeScript, however it comes with compiled JavaScript. You don't need to worry about compiling TypeScript or use it TypeScript your module.
39
+
PageBuilder is written in [TypeScript], a superset of JavaScript, that is compiled down to JavaScript prior to a release.
40
+
Use the TypeScript components in the module as reference to understand the flow information.
14
41
15
-
Page Builder also uses Knockout.js, UI components for building forms and different libraries like slick.
42
+
**Note:**
43
+
*You do not need to use TypeScript in your module to work with the PageBuilder code.*
44
+
45
+
PageBuilder also uses core Magento technologies such as jQuery, Knockout & UI Components.
46
+
It also uses additional libraries to help with various content types shipped with the module.
16
47
17
48
## Storage format
18
49
19
-
For storage (later master format) Page Builder uses XHTML with inline styles and data attributes. The idea is that is that content can be displayed with minimum changes on Magento storefront and also by third party systems.
50
+
PageBuilder uses XHTML with inline stlyes and data attributes for storage and as the [master format].
51
+
This allows the content to be displayed with minimum changes to the Magento storefront and other third-party systems.
20
52
21
53
To display Page Builder content on storefront Magento and third party systems need to do the following
2. Add custom stylesheet to provide base styles that user can't edit (this includes styles for the content types like `slider`, `tabs`, `accordion`, etc).
25
-
3. After content is rendered, on the frontend find all of content types that need to have widgets initialized (for instance, slider, tabs, etc) and load and initialize these widgets.
55
+
Use the following steps to display PageBuilder content on a Magento storefront or third-party system:
26
56
27
-
See more on [master format](master-format.md)
57
+
1. Replace all Magento directives such as `{{image url=path/to/image.png}}`
58
+
2. Add custom stylesheet to provide the base styles that user can't edit.
59
+
This includes styles for the content types such as `slider`, `tabs`, `accordion`, etc.
60
+
3. After the content renders, load and initialze the widgets and libraries on the frontend that need initalization, such as slider, tabs, etc.
28
61
29
62
## Integration with Magento and custom modules
30
63
31
-
PageBuilder replaces WYSIWYG on all forms. You can enable/disable Page Builder for product attributes.
64
+
When PageBuilder is enabled in the system configuration, it replaces all WYSIWYG instances.
65
+
It does this by intercepting the WYSIWYG UI Component field and replacing the traditional WYSIWYG editor with the PageBuilder editor.
66
+
67
+
This means that any custom extension that utilises the WYSIWYG field UI Component automatically supports the PageBuilder editor.
32
68
33
-
Page Builder also would be enabled in custom extensions where WYSIWYG is used.
69
+
To revert back to using the default WYSIWYG, add the following entry to the field configuration in the XML configuration file:
@@ -52,43 +94,52 @@ Page Builder also would be enabled in custom extensions where WYSIWYG is used.
52
94
53
95
54
96
55
-
Here is simplified data flow:
56
-
1. Data read by reader `Magento_PageBuilder/js/master-format/read/configurable`.
57
-
2. Data for each element (`border`, `border_color`, `border_width` etc) converted to internal format by element converters.
58
-
3. Data converted by mass converters, for more details see [converter interface](content-type-configuration.md).
59
-
4. Content type created and `Magento_PageBuilder/js/data-store` populated with data.
60
-
5. Data in data store modified in the form or using live edit.
61
-
6. Data converted by mass converters.
62
-
7. Converted by element data converters.
63
-
8. Preview and master component observables updated.
64
-
9. Editable with Page Builder entity attribute updated, when user saves the pages master format being saved to the database.
97
+
The following is a simple overview of the data flow:
98
+
99
+
1. Data is read by reader `Magento_PageBuilder/js/master-format/read/configurable`.
100
+
2. Data for each element (`border`, `border_color`, `border_width` etc) is converted to an internal format by element converters.
101
+
3. Data is converted by mass converters. For more details see [converter interface](content-type-configuration.md).
102
+
4. Content type is created and `Magento_PageBuilder/js/data-store` is populated with data.
103
+
5. Data in the data store is modified in the form or using live edit.
104
+
6. Data is converted by mass converters.
105
+
7. It is then converted by element data converters.
106
+
8. The preview and master component observables are updated.
107
+
9. When the user saves the page's master format into the database, the editable with the PageBuilder entity attribute is updated.
108
+
109
+
### Mass converter
65
110
66
-
Mass converter modifies on data for all content type elements. For instance, if content type two elements, main and image. And data for these elements stored in the fields `border`, `border_color`, `border_width`, `background_image`. Mass converter will allow to modify all these fields. See more on how [data stored internally](#Data store).
111
+
A Mass converter modifies data for all content type elements.
112
+
For example, the content type of two elements, main and image has data stored in the fields `border`, `border_color`, `border_width`, `background_image`.
113
+
A mass converter allows you to modify all these fields.
67
114
68
-
Element converter modifies single field at a time.
115
+
For more information, read about how [data is stored internally](#Data store).
116
+
117
+
### Element converter
118
+
119
+
An element converter modifies a single field at a time.
69
120
70
121
## Data store
71
122
72
-
Data for content type stored in DataStore `Magento_PageBuilder/js/data-store`.
123
+
Data for content types are stored in a simple object called the DataStore `Magento_PageBuilder/js/data-store`.
73
124
74
-
DataStore is a simple object. `var` from [content type configuration](content-type-configuration.md) is the name of parameter in DataStore.
125
+
`var` from [content type configuration](content-type-configuration.md) is the name of a parameter in the DataStore.
75
126
76
-
You can use `subscribe` method to subscribe to changes of the data and perform custom action on it.
127
+
You can use the `subscribe` method to subscribe to changes in the data and perform custom action on it.
77
128
78
129
## Content type configuration
79
130
80
-
Please see [content type configuration](content-type-configuration.md#Converter Interfaces) for content type configuration.
131
+
Please see [content type configuration](content-type-configuration.md#Converter Interfaces) for information on content type configuration.
81
132
82
133
## Appearances
83
134
84
-
Appearances allow to customize existing content types.
135
+
Appearances allow you to make the following customization on existing content types:
85
136
86
-
Appearance allows to make the following customizations to content type:
87
-
1. Add new style properties to existing content types.
137
+
1. Add new style properties to existing content types
88
138
2. Add new attributes to existing content types. This is similar to above.
89
139
3. Change templates
90
-
4. Move data between elements, achieved with data mapping configuration. For example, developer can move margin from one element to another.
91
-
5. Change form for content type.
140
+
4. Move data between elements, achieved with data mapping configuration.
141
+
For example, a developer can move the `margin` style property from one element to another.
142
+
5. Change the form for a [content type]
92
143
93
144
## Module structure
94
145
@@ -99,4 +150,8 @@ Appearance allows to make the following customizations to content type:
*We also considering introducing appearance component and/or moving initialization of the libraries to bindings. This would allow add custom logic per appearance changes libraries per appearance for content types like slider, tabs, accordion, etc.*
153
+
*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, accordion, etc.*
Copy file name to clipboardExpand all lines: app/code/Magento/PageBuilder/docs/developer-documentation.md
+4Lines changed: 4 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,6 +6,7 @@
6
6
2.[Installation guide]
7
7
3. Contribution guide
8
8
4.**Developer documentation**
9
+
1.[Architecture overview]
9
10
1.[BlueFoot to PageBuilder data migration]
10
11
1.[Third-party content type migration]
11
12
1.[Iconography]
@@ -15,6 +16,8 @@
15
16
1.[How to add a new content type]
16
17
5.[Roadmap and known issues]
17
18
19
+
**[Architecture overview]** - An overview of the PageBuilder module architecture.
20
+
18
21
**[BlueFoot to PageBuilder data migration]** - An overview of how data is migrated from BlueFoot to PageBuilder and a summary of the API available for this process.
19
22
20
23
**[Third-party content type migration]** - A tutorial that illustrates the process of migrating a BlueFoot third-party content type into PageBuilder.
@@ -31,6 +34,7 @@
31
34
32
35
[Introduction]: README.md
33
36
[Installation guide]: install.md
37
+
[Architecture overview]: architecture-overview.md
34
38
[BlueFoot to PageBuilder data migration]: bluefoot-data-migration.md
35
39
[Third-party content type migration]: new-content-type-example.md
0 commit comments