Skip to content

Commit 7808c0d

Browse files
author
Michael Yu
committed
MC-800: [Doc] Create Custom Content Block
- Update documentations to use updated configurations
1 parent 466f842 commit 7808c0d

File tree

2 files changed

+142
-167
lines changed

2 files changed

+142
-167
lines changed

‎app/code/Magento/PageBuilder/docs/creating-custom-content-block.md

Lines changed: 108 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -67,77 +67,69 @@ Use the content type configuration to add new content types. Refer to content-ty
6767
The following is an example of a custom container content type configuration in DaveMacaulay_PageBuilderGrid/view/base/pagebuilder/content_type/homepage_grid.xml:
6868

6969
``` xml
70-
<content_types>
71-
<type name="homepage-grid"
72-
label="Grid"
73-
component="Magento_PageBuilder/js/content-type-collection"
74-
preview_component="DaveMacaulay_PageBuilderGrid/js/content-type/homepage-grid/preview"
75-
master_component="Magento_PageBuilder/js/content-type/master-collection"
76-
form="pagebuilder_homepage_grid_form"
77-
group="general"
78-
icon="icon-pagebuilder-row"
79-
sortOrder="1"
80-
translate="label">
81-
<parents default_policy="deny">
82-
<parent name="stage" policy="allow"/>
83-
</parents>
84-
<children default_policy="deny">
85-
<child name="homepage-grid-item" policy="allow"/>
86-
</children>
87-
<appearances>
88-
<appearance default="true"
89-
name="default"
90-
preview_template="DaveMacaulay_PageBuilderGrid/content-type/homepage-grid/default/preview"
91-
render_template="DaveMacaulay_PageBuilderGrid/content-type/homepage-grid/default/master"
92-
reader="Magento_PageBuilder/js/master-format/read/configurable">
93-
<data_mapping>
94-
<elements>
95-
<element name="main">
96-
<style_properties>
97-
<property name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
98-
<property name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
99-
<property name="background_position" source="background_position"/>
100-
<property name="background_size" source="background_size"/>
101-
<property name="background_repeat" source="background_repeat"/>
102-
<property name="background_attachment" source="background_attachment"/>
103-
<property name="text_align" source="text_align"/>
104-
<property name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
105-
<property name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
106-
<property name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
107-
<property name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
108-
<complex_property name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/margins"/>
109-
<complex_property name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/paddings"/> </style_properties>
110-
<attributes>
111-
<attribute name="name" source="data-role"/>
112-
<attribute name="appearance" source="data-appearance"/>
113-
<attribute name="background_color_format" source="data-background-color-format" virtual="true"/>
114-
</attributes>
115-
<css name="css_classes">
116-
<filter>
117-
<class source="pagebuilder-homepage-grid"/>
118-
</filter>
119-
</css>
120-
</element>
121-
</elements>
122-
<converters>
123-
<converter name="preferred_color_format" component="Magento_PageBuilder/js/mass-converter/preferred-color-format">
124-
<config>
125-
<item name="background_color_format" value="background_color_format"/>
126-
</config>
127-
</converter>
128-
</converters>
129-
</data_mapping>
130-
</appearance>
131-
</appearances>
132-
</type>
133-
</content_types>
70+
<type name="homepage-grid"
71+
label="Grid"
72+
component="Magento_PageBuilder/js/content-type-collection"
73+
preview_component="DaveMacaulay_PageBuilderGrid/js/content-type/homepage-grid/preview"
74+
master_component="Magento_PageBuilder/js/content-type/master-collection"
75+
form="pagebuilder_homepage_grid_form"
76+
group="general"
77+
icon="icon-pagebuilder-row"
78+
sortOrder="1"
79+
translate="label">
80+
<parents default_policy="deny">
81+
<parent name="stage" policy="allow"/>
82+
</parents>
83+
<children default_policy="deny">
84+
<child name="homepage-grid-item" policy="allow"/>
85+
</children>
86+
<appearances>
87+
<appearance default="true"
88+
name="default"
89+
preview_template="DaveMacaulay_PageBuilderGrid/content-type/homepage-grid/default/preview"
90+
render_template="DaveMacaulay_PageBuilderGrid/content-type/homepage-grid/default/master"
91+
reader="Magento_PageBuilder/js/master-format/read/configurable">
92+
<elements>
93+
<element name="main">
94+
<style name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
95+
<style name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
96+
<style name="background_position" source="background_position"/>
97+
<style name="background_size" source="background_size"/>
98+
<style name="background_repeat" source="background_repeat"/>
99+
<style name="background_attachment" source="background_attachment"/>
100+
<style name="text_align" source="text_align"/>
101+
<style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
102+
<style name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
103+
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
104+
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
105+
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/margins"/>
106+
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/paddings"/>
107+
<attribute name="name" source="data-role"/>
108+
<attribute name="appearance" source="data-appearance"/>
109+
<attribute name="background_color_format" source="data-background-color-format" persistence_mode="write"/>
110+
<css name="css_classes">
111+
<filter>
112+
<class source="pagebuilder-homepage-grid"/>
113+
</filter>
114+
</css>
115+
</element>
116+
</elements>
117+
<converters>
118+
<converter name="preferred_color_format" component="Magento_PageBuilder/js/mass-converter/preferred-color-format">
119+
<config>
120+
<item name="background_color_format" value="background_color_format"/>
121+
</config>
122+
</converter>
123+
</converters>
124+
</appearance>
125+
</appearances>
126+
</type>
134127
```
135128

136129
The following is an example of a custom container children content type configuration in DaveMacaulay_PageBuilderGrid/view/base/pagebuilder/content_type/homepage_grid_item.xml:
137130

138131
``` xml
139-
<content_types>
140-
<type name="homepage-grid-item"
132+
<type name="homepage-grid-item"
141133
label="Grid Item"
142134
component="Magento_PageBuilder/js/content-type-collection"
143135
preview_component="DaveMacaulay_PageBuilderGrid/js/content-type/homepage-grid-item/preview"
@@ -147,62 +139,56 @@ The following is an example of a custom container children content type configur
147139
icon="icon-pagebuilder-row"
148140
sortOrder="1"
149141
translate="label">
150-
<parents default_policy="deny">
151-
<parent name="homepage-grid" policy="allow"/>
152-
</parents>
153-
<children default_policy="deny">
154-
<child name="heading" policy="allow"/>
155-
<child name="buttons" policy="allow"/>
156-
<child name="text" policy="allow"/>
157-
</children>
158-
<is_visible>false</is_visible>
159-
<appearances>
160-
<appearance default="true"
161-
name="default"
162-
preview_template="DaveMacaulay_PageBuilderGrid/content-type/homepage-grid-item/default/preview"
163-
render_template="DaveMacaulay_PageBuilderGrid/content-type/homepage-grid-item/default/master"
164-
reader="Magento_PageBuilder/js/master-format/read/configurable">
165-
<data_mapping>
166-
<elements>
167-
<element name="main">
168-
<style_properties>
169-
<property name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
170-
<property name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
171-
<property name="background_position" source="background_position"/>
172-
<property name="background_size" source="background_size"/>
173-
<property name="background_repeat" source="background_repeat"/>
174-
<property name="background_attachment" source="background_attachment"/>
175-
<property name="text_align" source="text_align"/>
176-
<property name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
177-
<property name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
178-
<property name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
179-
<property name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
180-
<complex_property name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/margins"/>
181-
<complex_property name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/paddings"/> </style_properties>
182-
<attributes>
183-
<attribute name="name" source="data-role"/>
184-
<attribute name="appearance" source="data-appearance"/>
185-
<attribute name="background_color_format" source="data-background-color-format" virtual="true"/>
186-
</attributes>
187-
<css name="css_classes">
188-
<filter>
189-
<class source="pagebuilder-homepage-grid-item"/>
190-
</filter>
191-
</css>
192-
</element>
193-
</elements>
194-
<converters>
195-
<converter name="preferred_color_format" component="Magento_PageBuilder/js/mass-converter/preferred-color-format">
196-
<config>
197-
<item name="background_color_format" value="background_color_format"/>
198-
</config>
199-
</converter>
200-
</converters>
201-
</data_mapping>
202-
</appearance>
203-
</appearances>
204-
</type>
205-
</content_types>
142+
<parents default_policy="deny">
143+
<parent name="homepage-grid" policy="allow"/>
144+
</parents>
145+
<children default_policy="deny">
146+
<child name="heading" policy="allow"/>
147+
<child name="buttons" policy="allow"/>
148+
<child name="text" policy="allow"/>
149+
</children>
150+
<is_visible>false</is_visible>
151+
<appearances>
152+
<appearance default="true"
153+
name="default"
154+
preview_template="DaveMacaulay_PageBuilderGrid/content-type/homepage-grid-item/default/preview"
155+
render_template="DaveMacaulay_PageBuilderGrid/content-type/homepage-grid-item/default/master"
156+
reader="Magento_PageBuilder/js/master-format/read/configurable">
157+
<elements>
158+
<element name="main">
159+
<style name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
160+
<style name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
161+
<style name="background_position" source="background_position"/>
162+
<style name="background_size" source="background_size"/>
163+
<style name="background_repeat" source="background_repeat"/>
164+
<style name="background_attachment" source="background_attachment"/>
165+
<style name="text_align" source="text_align"/>
166+
<style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
167+
<style name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
168+
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
169+
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
170+
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/margins"/>
171+
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/paddings"/>
172+
<attribute name="name" source="data-role"/>
173+
<attribute name="appearance" source="data-appearance"/>
174+
<attribute name="background_color_format" source="data-background-color-format" persistence_mode="write"/>
175+
<css name="css_classes">
176+
<filter>
177+
<class source="pagebuilder-homepage-grid-item"/>
178+
</filter>
179+
</css>
180+
</element>
181+
</elements>
182+
<converters>
183+
<converter name="preferred_color_format" component="Magento_PageBuilder/js/mass-converter/preferred-color-format">
184+
<config>
185+
<item name="background_color_format" value="background_color_format"/>
186+
</config>
187+
</converter>
188+
</converters>
189+
</appearance>
190+
</appearances>
191+
</type>
206192
```
207193

208194
### Preview template & block system

0 commit comments

Comments
 (0)