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
We open access to PageBuilder code for Partners to:
6
-
- explore extension points that PageBuilder provides in oder to build integration with native PageBuilder capabilities for 3rd parties (Facebook, Instagram etc) and their own modules
7
-
- try out PageBuilder customization options to grow its functionality beyond native features
8
-
- Prepare to migrate clients from Bluefoot 1.0 to PageBuilder
5
+
The PageBuilder Early Access Program (EAP) gives partners the following perks:
9
6
10
-
This program is _not design_ to build a website and go live using early code.
7
+
* Explore PageBuilder extension points to build custom modules and integrations for 3rd party services, such as Facebook, Instagram, etc.
8
+
* Try out PageBuilder customization options and extend its functionality beyond its default features.
9
+
* Preview PageBuilder to prepare a migration plan from BlueFoot 1.0 to PageBuilder.
10
+
11
+
**Note:**
12
+
*This program should not be used to design and launch a production website using early code.*
11
13
12
-
# PageBuilder Package
13
-
We offer 2 options to get the PageBuilder code:
14
-
- Composer package - option for installing page builder if you do not plan to do any contribution into PageBuilder code repository
15
-
- GitHub repository - option to install page builder and contribute to the code
14
+
## Installation
16
15
17
-
# Contribution to the PageBuilder
18
-
We appreciate your direct contribution to PageBuilder repo. It can be either feature development or bug fix:
19
-
List of known issues
16
+
We offer two methods for installing PageBuilder:
20
17
21
-
# PageBuilder Updates from Magento Core Team
22
-
Expect the code to be updated on regular basis (every 2 weeks) and be ready to the update introducing breaking changes. We want to limit that harm so we publish the backlog that core teams are going to work on next couple of months:
23
-
link to the list of features
18
+
* As a [Composer package] - use this option if you do not plan to contribute to the PageBuilder code repository
19
+
* Using the [GitHub repository] - use this option to install PageBuilder from the GitHub repository and contribute to the code
24
20
25
-
# Feedback needed
26
-
We want to know more how you would need to customize PageBuilder. Here is the list of topics that we are specifically interested in:
[BlueFoot to PageBuilder data migration]: bluefoot-data-migration.md
21
+
[Third-party content type migration]: new-content-type-example.md
22
+
[Iconography]: iconography.md
23
+
[Module integration]: module-integration.md
24
+
[Additional data configuration]: custom-configuration.md
25
+
[Content type configuration]: content-type-configuration.md
26
+
[How to add a new content type]: how-to-add-new-content-type.md
27
+
[Events]: events.md
28
+
[Master format]: master-format.md
29
+
[Visual select]: visual-select.md
30
+
[Roadmap and Known Issues]: roadmap.m
31
+
32
+
## Overview
33
+
3
34
Contributions to the Magento 2 codebase are done using the fork & pull model.
4
35
This contribution model has contributors maintaining their own copy of the forked codebase (which can easily be synced with the main copy). The forked repository is then used to submit a request to the base repository to “pull” a set of changes (hence the phrase “pull request”).
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
28
+
[Third-party content type migration]: new-content-type-example.md
29
+
[Iconography]: iconography.md
30
+
[Module integration]: module-integration.md
31
+
[Additional data configuration]: custom-configuration.md
32
+
[Content type configuration]: content-type-configuration.md
33
+
[How to add a new content type]: how-to-add-new-content-type.md
34
+
[Events]: events.md
35
+
[Master format]: master-format.md
36
+
[Visual select]: visual-select.md
37
+
[Roadmap and Known Issues]: roadmap.md
38
+
39
+
## What is PageBuilder?
40
+
41
+
PageBuilder is tool that simplifies content creation by letting you drag and drop content types and configure them without writing a line of code.
42
+
Changes appear in real time in the preview area in the Admin and matches what users see on the storefront.
10
43
11
44
## Technologies
12
45
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.
46
+
PageBuilder is written in [TypeScript], a superset of JavaScript, that is compiled down to JavaScript prior to a release.
47
+
Use the TypeScript components in the module as reference to understand the flow information.
14
48
15
-
Page Builder also uses Knockout.js, UI components for building forms and different libraries like slick.
49
+
**Note:**
50
+
*You do not need to use TypeScript in your module to work with the PageBuilder code.*
51
+
52
+
PageBuilder also uses core Magento technologies such as jQuery, Knockout & UI Components.
53
+
It also uses additional libraries to help with various content types shipped with the module.
16
54
17
55
## Storage format
18
56
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.
57
+
PageBuilder uses XHTML with inline stlyes and data attributes for storage and as the [master format].
58
+
This allows the content to be displayed with minimum changes to the Magento storefront and other third-party systems.
20
59
21
60
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.
62
+
Use the following steps to display PageBuilder content on a Magento storefront or third-party system:
26
63
27
-
See more on [master format](master-format.md)
64
+
1. Replace all Magento directives such as `{{image url=path/to/image.png}}`
65
+
2. Add custom stylesheet to provide the base styles that user can't edit.
66
+
This includes styles for the content types such as `slider`, `tabs`, `accordion`, etc.
67
+
3. After the content renders, load and initialze the widgets and libraries on the frontend that need initalization, such as slider, tabs, etc.
28
68
29
69
## Integration with Magento and custom modules
30
70
31
-
PageBuilder replaces WYSIWYG on all forms. You can enable/disable Page Builder for product attributes.
71
+
When PageBuilder is enabled in the system configuration, it replaces all WYSIWYG instances.
72
+
It does this by intercepting the WYSIWYG UI Component field and replacing the traditional WYSIWYG editor with the PageBuilder editor.
73
+
74
+
This means that any custom extension that utilises the WYSIWYG field UI Component automatically supports the PageBuilder editor.
32
75
33
-
Page Builder also would be enabled in custom extensions where WYSIWYG is used.
76
+
To revert back to using the default WYSIWYG, add the following entry to the field configuration in the XML configuration file:
@@ -52,43 +101,52 @@ Page Builder also would be enabled in custom extensions where WYSIWYG is used.
52
101
53
102
54
103
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.
104
+
The following is a simple overview of the data flow:
105
+
106
+
1. Data is read by reader `Magento_PageBuilder/js/master-format/read/configurable`.
107
+
2. Data for each element (`border`, `border_color`, `border_width` etc) is converted to an internal format by element converters.
108
+
3. Data is converted by mass converters. For more details see [converter interface](content-type-configuration.md).
109
+
4. Content type is created and `Magento_PageBuilder/js/data-store` is populated with data.
110
+
5. Data in the data store is modified in the form or using live edit.
111
+
6. Data is converted by mass converters.
112
+
7. It is then converted by element data converters.
113
+
8. The preview and master component observables are updated.
114
+
9. When the user saves the page's master format into the database, the editable with the PageBuilder entity attribute is updated.
115
+
116
+
### Mass converter
65
117
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).
118
+
A Mass converter modifies data for all content type elements.
119
+
For example, the content type of two elements, main and image has data stored in the fields `border`, `border_color`, `border_width`, `background_image`.
120
+
A mass converter allows you to modify all these fields.
67
121
68
-
Element converter modifies single field at a time.
122
+
For more information, read about how [data is stored internally](#Data store).
123
+
124
+
### Element converter
125
+
126
+
An element converter modifies a single field at a time.
69
127
70
128
## Data store
71
129
72
-
Data for content type stored in DataStore `Magento_PageBuilder/js/data-store`.
130
+
Data for content types are stored in a simple object called the DataStore `Magento_PageBuilder/js/data-store`.
73
131
74
-
DataStore is a simple object. `var` from [content type configuration](content-type-configuration.md) is the name of parameter in DataStore.
132
+
`var` from [content type configuration](content-type-configuration.md) is the name of a parameter in the DataStore.
75
133
76
-
You can use `subscribe` method to subscribe to changes of the data and perform custom action on it.
134
+
You can use the `subscribe` method to subscribe to changes in the data and perform custom action on it.
77
135
78
136
## Content type configuration
79
137
80
-
Please see [content type configuration](content-type-configuration.md#Converter Interfaces) for content type configuration.
138
+
Please see [content type configuration](content-type-configuration.md#Converter Interfaces) for information on content type configuration.
81
139
82
140
## Appearances
83
141
84
-
Appearances allow to customize existing content types.
142
+
Appearances allow you to make the following customization on existing content types:
85
143
86
-
Appearance allows to make the following customizations to content type:
87
-
1. Add new style properties to existing content types.
144
+
1. Add new style properties to existing content types
88
145
2. Add new attributes to existing content types. This is similar to above.
89
146
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.
147
+
4. Move data between elements, achieved with data mapping configuration.
148
+
For example, a developer can move the `margin` style property from one element to another.
149
+
5. Change the form for a [content type]
92
150
93
151
## Module structure
94
152
@@ -99,4 +157,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.*
160
+
*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.*
0 commit comments