Skip to content

Commit dff7f7b

Browse files
bdenhambdenham
committed
MC-5769: Complete content type tutorial
Added configuration graphic and updated content for configuration topic
1 parent 8f260f1 commit dff7f7b

File tree

3 files changed

+10
-34
lines changed

3 files changed

+10
-34
lines changed

‎docs/create-basic-content-type/step-1-add-configuration.md

Lines changed: 10 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,13 @@ The development of this tutorial is currently **IN PROGRESS**.
55

66
***
77

8-
The configuration file defines the basic settings and files that compose your content type.
8+
The configuration file defines the settings and references to your content type files. You will return to this file often to update references and change settings during the development process.
99

10-
## Convention
10+
Files referenced from the configuration include the HTML templates, the JavaScript components, the icon displayed for your content type in the Page Builder panel, and the UI component form for your content type editor within the Admin.
11+
12+
![configuration-hub](../images/configuration-hub.png)
13+
14+
## Conventions
1115

1216
By convention, Page Builder requires the configuration for a content type to be in the `adminhtml` area within a directory named `pagebuilder` and a subdirectory named `content_type` or `content-type`.
1317

@@ -16,15 +20,14 @@ The name of your configuration file should also reflect the name of your content
1620
![Create config file](../images/step1-add-config-file.png)
1721

1822
{: .bs-callout .bs-callout-info }
19-
If your content type name uses multiple words, use underscores to separate the words in the name.
23+
If your content type name uses multiple words, use underscores to separate the words in the name.
2024

2125
## Example configuration
2226

23-
{: .bs-callout .bs-callout-info }
2427
In this example, only a subset of configuration elements are described (enough to understand the configuration file's basic role). For more details, refer to [Content type configurations](../configurations/content-type-configuration.md) and [Additional configurations](../configurations/additional-configurations.md).
2528

2629

27-
The following configuration shows the complete configuration file for our Quote content type. An overview of these elements and attributes are described in the tables that follow.
30+
The following configuration is from the Quote content type. An overview of these elements and attributes are described in the tables that follow.
2831

2932
```xml
3033
<?xml version="1.0"?>
@@ -49,34 +52,7 @@ The following configuration shows the complete configuration file for our Quote
4952
preview_template="Vendor_Module/content-type/quote/default/preview"
5053
render_template="Vendor_Module/content-type/quote/default/master"
5154
reader="Magento_PageBuilder/js/master-format/read/configurable">
52-
<elements>
53-
<element name="main">
54-
<style name="text_align" source="text_align"/>
55-
<style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
56-
<style name="border_color" source="border_color"/>
57-
<style name="background_color" source="background_color"/>
58-
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/border-width"/>
59-
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
60-
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
61-
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
62-
<style name="display" source="display" converter="Magento_PageBuilder/js/converter/style/display" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
63-
<attribute name="name" source="data-role"/>
64-
<attribute name="appearance" source="data-appearance"/>
65-
<css name="css_classes"/>
66-
</element>
67-
<element name="quote">
68-
<html name="quote_text" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
69-
<css name="quote_css"/>
70-
</element>
71-
<element name="author">
72-
<style name="text_align" source="text_align"/>
73-
<html name="quote_author" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
74-
</element>
75-
<element name="author_title">
76-
<style name="text_align" source="text_align"/>
77-
<html name="quote_author_desc" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
78-
</element>
79-
</elements>
55+
<elements...>
8056
</appearance>
8157
</appearances>
8258
</type>
@@ -168,7 +144,7 @@ The `<appearance>` attributes are described as follows:
168144

169145
## The `elements` element
170146

171-
The purpose of `<elements>` as defined within an appearance is to map the data from the content type's edit form to the content type's master format so that the values entered in the form can be stored and rendered correctly on the Admin stage and storefront. These elements will be explained more fully in [Step 4: Add form](step-4-add-form.md)
147+
The purpose of `<elements>` as defined within an appearance is to map the data from the content type's edit form to the content type's master format so that the values entered in the form can be stored and rendered correctly on the Admin stage and storefront. We will describe the `elements` in [Step 4: Add form](step-4-add-form.md)
172148

173149
## Next
174150

‎docs/images/BannerBlockTemplates.sketch

-111 KB
Binary file not shown.

‎docs/images/configuration-hub.png

15.2 KB
Loading

0 commit comments

Comments
 (0)