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
Copy file name to clipboardExpand all lines: docs/create-basic-content-type/step-1-add-configuration.md
+48-21Lines changed: 48 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -2,15 +2,15 @@
2
2
3
3
# Step 1: Add configuration
4
4
5
-
Creating a configuration file is the first step to creating a new content type. Through the configuration file, you can specify things like the label, location, and icon of your content type within the Page Builder panel menu. You can specify where your content type can be dropped on the stage, and reference the many other files you will use to control the appearance and behavior your content type.
5
+
Creating a configuration file is the first step to defining a new content type. It defines the properties and files that control the appearances and behaviors of a content type.
6
6
7
-
## Create the configuration file
7
+
## Create a configuration file
8
8
9
-
1.Create a new XML file in the following directory structure of your module: `view/adminhtml/pagebuilder/content_type/my-content-type.xml`.
9
+
Create a new configuration (XML) file in the following directory structure of your module: `view/adminhtml/pagebuilder/content_type/my-content-type.xml`.
@@ -44,22 +44,49 @@ Creating a configuration file is the first step to creating a new content type.
44
44
</config>
45
45
```
46
46
47
-
**Line 2**: The `content-type.xsd` schema that defines the elements for you config file can be found here: `magento2-page-builder/app/code/Magento/PageBuilder/et/content_type.xsd`.
47
+
## The `type` node
48
48
49
-
**Line 3-13:** Attributes of the <type> element define several key properties of your content type as follows:
49
+
The `<type>` node defines the key properties of your content type. The attributes are described here:
| name | Name for your content type. The convention for using multi-word names is to separate the words with hyphens. |
54
-
| label | Label that displays in the Page Builder panel, option menu, and on the Admin stage. |
55
-
| group | Group or category in the panel menu where your content type is displayed. The default groups are Layout, Elements, Media, and Add Content. See [Panel configurations](../configurations/panel-configurations.md) for more details. |
| name | Name of the content type that Magento uses for XML merging. The convention for using multi-word names is to separate the words with hyphens. |
54
+
| label | Label displayed in the Page Builder panel, option menu, and on the Admin stage. |
55
+
| group | Group or category in the panel menu where your content type is displayed. The default groups are Layout, Elements, Media, and Add Content. See [Panel configurations](../configurations/panel-configurations.md) for more details. |
56
+
| component | Currently there are two component types to choose from: `content-type` and `content-type-collection`. Use `Magento_PageBuilder/js/content-type` for static content types that do not have children. Use `Magento_PageBuilder/js/content-type-collection` for content types that can contain children, otherwise known as container content types. |
57
+
| preview_component | JavaScript file that provides preview-specific rendering logic within the Admin UI. |
58
+
| master_component | JavaScript file that provides master format rendering logic generic for all appearances of your content type when rendered on the storefront. |
59
+
| form | UI component form that provides the editor for your content type. |
60
+
| icon | Optional. PNG or SVG image displayed in the Page Builder panel alongside the label. |
61
+
| is_hideable | Optional. Default `true`. Include it only when you want to set it to `false` to prevent the end-user from hiding your content type on demand, using a button (eye icon) in the options menu. A setting of false will remove the hide button from the options menu. |
62
+
| translate | Identifies the attribute you want Magento to translate. Here, the `label` value is set for translation. |
62
63
63
-
If you try to view Page Builder at this point, Page Builder will throw an error noting that the `preview_template` and `render_template` from the `<appearance` element are missing. These templates are required before we can add our content type to Page Builder. Let's do that in [Step 2: Add templates](step-2-add-templates.md).
64
+
## The `appearance` node
65
+
66
+
The purpose of the `<appearance>` node in a configuration is to define the appearance of your content type as a preview in the Admin (using the`preview.html` template) and in the storefront for customers (using the `master.html` template).
67
+
68
+
The `<appearance>` attributes are described as follows:
| name | Name of the appearance for extending as needed. |
73
+
| default | Content types must specify one of the appearances as the default appearance. That means if you only have one appearance, it must be set as the default. |
74
+
| preview_template |`preview.html` - the HTML template for rendering the preview appearance of a content type within the Admin. |
75
+
| render_template |`master.html` - the HTML template for rendering the storefront appearance of a content type for customers. |
76
+
| reader | Reads data for the content type from the master format |
77
+
78
+
All content types must have at least one `<appearance>` defined within the `<appearances>` collection.
79
+
80
+
## The `element` node
81
+
82
+
**[Dave, I know the following sentence is incorrect. Please rewrite to correct it and add more information as needed. :) ]**
83
+
84
+
The purpose of the `<element>` nodes in a configuration is to map the data from the content type from the given source back to the master format so that the content type can be updated and rendered correctly within both the Admin preview and the storefront.
85
+
86
+
**[Add table to describe element attributes and nodes]**
87
+
88
+
## Next
89
+
90
+
At this point, if you try to view Page Builder you get an error noting that the `preview_template` and `render_template` from the `<appearance>` element are missing. These templates are referenced in the example config file, but we have not yet created them. Let's do that next in [Step 2: Add templates](step-2-add-templates.md).
0 commit comments