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

1.6.0 release #28

Merged
merged 24 commits into from
Feb 10, 2021
Merged

1.6.0 release #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
5c9298c
Overriding Page Builder styles using themese
bdenham Dec 16, 2020
b9c8fbc
Added image files
bdenham Dec 16, 2020
07bc929
Fixed internal link
bdenham Dec 16, 2020
676e9f2
PB-558: Updates from review
bdenham Dec 16, 2020
9e53585
Apply suggestions from code review
bdenham Dec 16, 2020
2236462
Merge pull request #16 from magento/theme-styling
bdenham Dec 16, 2020
fcf58e3
PB-558: Updates from review
bdenham Dec 16, 2020
0abf349
Merge pull request #19 from magento/theme-styling
bdenham Dec 16, 2020
5487bfa
Overriding Page Builder styles using themese
bdenham Dec 16, 2020
9fcfbe6
Merge branch '1.6.0-release' into theme-styling
bdenham Dec 16, 2020
1349026
Merge pull request #20 from magento/theme-styling
bdenham Dec 16, 2020
bb72ac6
PB-558: Page Builder styling overviews (#17)
bdenham Dec 18, 2020
4e4b153
PB-558: Overriding Page Builder styles using Modules and HTML Code (#18)
bdenham Dec 18, 2020
4fee5d2
Updating styles overviews with images to match later topics (#21)
bdenham Dec 18, 2020
0da74f2
Renaming style topics
bdenham Dec 18, 2020
ddbc809
Fixed old link
bdenham Dec 18, 2020
53401f4
Tweaking titles
bdenham Dec 18, 2020
00029a7
Updated images
bdenham Dec 18, 2020
7d14a03
Release notes for 1.6.0 and older releases (#24)
bdenham Jan 11, 2021
d42567c
Prelease of release notes and Docs for PB styling changes.
bdenham Jan 14, 2021
6c642b2
Minor cleanup
bdenham Jan 14, 2021
86eed5d
Removed link from release notes for now.
bdenham Feb 9, 2021
2369bc5
Update release branch with master changes (#27)
bdenham Feb 10, 2021
61cf232
Merged changes from viewports branch
bdenham Feb 10, 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](../customize/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