Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Update release branch with master changes #27

Merged
merged 4 commits into from
Feb 10, 2021
Merged

Update release branch with master changes #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
724dfff
Merge branch '1.6.0-release'
bdenham Feb 9, 2021
108a3d8
Fixed all md linting errors.
bdenham Feb 9, 2021
98cf9e5
Removed auto TOC.
bdenham Feb 9, 2021
82a1bcd
Removed auto TOC.
bdenham Feb 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/create-custom-content-type/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Page Builder comes with several content types (controls) you can use to build yo

## Quote preview

The following screenshot shows three instances of the Quote control you will build in this tutorial:
The following screenshot shows three instances of the Quote control you will build in this tutorial:

![QuoteTypeDisplay](../images/AdminTestimonials.png)

Expand All @@ -30,16 +30,16 @@ The steps for creating the Quote content type are illustrated and described belo

![Creating Custom Content Types](../images/content-type-overview.svg)

1. **Add configuration**: Create an XML file to define your content type and reference the other files that control the appearance and behavior of your content type.
1. **Add configuration**: Create an XML file to define your content type and reference the other files that control the appearance and behavior of your content type.
2. **Add templates**: Create HTML templates that define the appearance of your content types on the Admin stage (`preview.html`) and the storefront (`master.html`).
3. **Add component**: Create a JavaScript file that defines the behavior of your content type on the Admin stage (`preview.js`) and the storefront (`master.js`).
4. **Add form**: Create a UI component form and a layout so Admin users can edit your content type within the Page Builder editor.
5. **Add styles**: Create LESS files to style your content types when rendered in the Admin UI and on the storefront.
5. **Add styles**: Create LESS files to style your content types when rendered in the Admin UI and on the storefront.
6. **Add an icon**: Create an SVG icon to visually identify your content type within the Page Builder panel.

## Quote file structure

Before we get started, take a look at what you will be building. The directory structure on the left shows the basic `PageBuilderQuote` module you will start with (as previously described). The directory structure on the right shows all the files you will add to the `PageBuilderQuote` module throughout this tutorial, labeled by the steps in the process.
Before we get started, take a look at what you will be building. The directory structure on the left shows the basic `PageBuilderQuote` module you will start with (as previously described). The directory structure on the right shows all the files you will add to the `PageBuilderQuote` module throughout this tutorial, labeled by the steps in the process.

![Before and after content type](../images/content-type-files.png)

Expand Down
23 changes: 11 additions & 12 deletions docs/create-custom-content-type/step-1-add-configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,18 +57,18 @@ The following configuration is from the Quote content type. An overview of these

The `type` element defines the key properties of your content type. The attributes from the previous code example are described here:

| Attribute | Description |
| ------------------- | ------------------------------------------------------------ |
| `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. |
| `label` | Label displayed in the Page Builder panel, option menu, and on the Admin stage. |
| `menu_section` | Menu section or category in the panel menu where your content type is displayed. The default menu sections are Layout, Elements, Media, and Add Content. See [Panel configurations](../how-to/how-to-customize-panel.md) for more details. |
| `component` | View model responsible for rendering the preview and master format. The component does not need to specify the `.js` extension. 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. |
| `preview_component` | JavaScript file (`preview.js` or `preview-collection.js`) that provides rendering logic within the Admin UI. The preview component does not need to specify the `.js` extension. <br/><br/>For _collection_ content types, you need to either reference your own `preview-collection` component or reference Page Builder's `preview-collection` (`preview_component="Magento_PageBuilder/js/content-type/preview-collection"`). If you don't specify the `preview_component`, Page Builder uses the base `Preview` component shown in the code: `Magento_PageBuilder/js/content-type/preview`. |
| Attribute | Description |
|---------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `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. |
| `label` | Label displayed in the Page Builder panel, option menu, and on the Admin stage. |
| `menu_section` | Menu section or category in the panel menu where your content type is displayed. The default menu sections are Layout, Elements, Media, and Add Content. See [Panel configurations](../how-to/how-to-customize-panel.md) for more details. |
| `component` | View model responsible for rendering the preview and master format. The component does not need to specify the `.js` extension. 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. |
| `preview_component` | JavaScript file (`preview.js` or `preview-collection.js`) that provides rendering logic within the Admin UI. The preview component does not need to specify the `.js` extension. <br/><br/>For _collection_ content types, you need to either reference your own `preview-collection` component or reference Page Builder's `preview-collection` (`preview_component="Magento_PageBuilder/js/content-type/preview-collection"`). If you don't specify the `preview_component`, Page Builder uses the base `Preview` component shown in the code: `Magento_PageBuilder/js/content-type/preview`. |
| `master_component` | JavaScript file (`master.js` or `master-collection.js`) that provides rendering logic generic for all appearances of your content type when rendered on the storefront. The master component does not need to specify the `.js` extension. <br/><br/>For _collection_ content types, you need to either reference your own `master-collection` component or reference Page Builder's `master-collection` (`master_component="Magento_PageBuilder/js/content-type/master-collection"`). If you don't specify the `master_component`, Page Builder uses the base `Master` component shown in the code: `Magento_PageBuilder/js/content-type/master`. |
| `form` | UI component form that provides the form controls for editing your content type. |
| `icon` | Optional. Class name for your PNG or SVG image (or font icon) displayed in the Page Builder panel alongside the label. If you don't provide an icon value, the Page Builder panel displays the content type name without an icon. |
| `sortOrder` | Optional. The listed order within the menu section. For example, `sortOrder=21` puts the content type third in the `Elements` menu section, after the content types with `sortOrder` values of 10 and 20. |
| `translate` | Identifies the attribute you want Magento to translate. Here, the `label` value is set for translation. |
| `form` | UI component form that provides the form controls for editing your content type. |
| `icon` | Optional. Class name for your PNG or SVG image (or font icon) displayed in the Page Builder panel alongside the label. If you don't provide an icon value, the Page Builder panel displays the content type name without an icon. |
| `sortOrder` | Optional. The listed order within the menu section. For example, `sortOrder=21` puts the content type third in the `Elements` menu section, after the content types with `sortOrder` values of 10 and 20. |
| `translate` | Identifies the attribute you want Magento to translate. Here, the `label` value is set for translation. |


## The `children` element
Expand Down Expand Up @@ -119,4 +119,3 @@ The `<elements>` element as defined within an `appearance` is to map the data fr
## Next

[Step 2: Add templates](step-2-add-templates.md)

17 changes: 8 additions & 9 deletions docs/create-custom-content-type/step-2-add-templates.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ Content type templates are the HTML files (HTML fragments) that define how your

Conventions for adding content type templates are as follows.

- Page Builder requires you to name your templates `preview.html` for the Admin preview template and `master.html` for the master format storefront template.
- Page Builder requires you to name your templates `preview.html` for the Admin preview template and `master.html` for the master format storefront template.

- Page Builder requires the name of an `appearance` to match the name of the directory containing the appearance templates. If they don't match, your content type appearances will not render.
- Page Builder requires the name of an `appearance` to match the name of the directory containing the appearance templates. If they don't match, your content type appearances will not render.

For example, if you navigate to the Banner's appearance templates (`PageBuilder/view/adminhtml/web/template/content-type/banner`) you can see that the names of the template directories match the names of the four appearances defined in the `banner.xml` configuration file as shown here:

Expand Down Expand Up @@ -55,13 +55,13 @@ These files can be blank initially; they just need to exist in their proper loca

The following table describes each `appearance` attribute in our example.

| Attribute | Description |
| ------------------ | ------------------------------------------------------------ |
| `name` | As noted by convention, the name of the appearance and the name of the directory for the appearance templates *must* match. |
| `default` | Every content type must have a default appearance. If you only define one appearance for your content type, you must set the default to `true`. |
| `preview_template` | References the `preview.html` (the Admin preview template) for rendering the preview appearance of your content type on the stage within the Admin UI. |
| Attribute | Description |
|--------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `name` | As noted by convention, the name of the appearance and the name of the directory for the appearance templates *must* match. |
| `default` | Every content type must have a default appearance. If you only define one appearance for your content type, you must set the default to `true`. |
| `preview_template` | References the `preview.html` (the Admin preview template) for rendering the preview appearance of your content type on the stage within the Admin UI. |
| `master_template` | References the `master.html` (the master format storefront template) for rendering the appearance of your content type on the storefront for customers to see. |
| `reader` | Reads content type data from the master format. |
| `reader` | Reads content type data from the master format. |

## Quote `preview_template`

Expand Down Expand Up @@ -225,4 +225,3 @@ The `html` value is derived from the configuration `element` name (`quote`) and
## Next

[Step 3: Add components](step-3-add-components.md)

Loading