Skip to content

Commit 9070839

Browse files
bdenhambdenham
committed
MC-5769: Complete content type tutorial
Adding some in-progress disclaimers
1 parent dff7f7b commit 9070839

File tree

4 files changed

+12
-50
lines changed

4 files changed

+12
-50
lines changed

‎docs/create-basic-content-type/step-2-add-templates.md

Lines changed: 1 addition & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -50,43 +50,4 @@ In your configuration file, you need to reference your templates within the `<ap
5050

5151

5252

53-
# **STOP Reviewing Here**
54-
55-
56-
57-
## Create the `preview.html` template
58-
59-
60-
61-
1. Create the `preview.html` file (as noted above) using the example content that follows.
62-
63-
```html
64-
<!--preview.html-->
65-
<div attr="data.main.attributes" ko-style="data.main.style" class="pagebuilder-content-type" css="data.main.css" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
66-
<render args="getOptions().template" />
67-
<blockquote attr="data.quote.attributes" ko-style="data.quote.style" css="data.quote.css" data-bind="liveEdit: { field: 'quote_text', placeholder: $t('Enter Quote') }"></blockquote>
68-
<div class="quote-author" attr="data.author.attributes" ko-style="data.author.style" css="data.author.css" data-bind="liveEdit: { field: 'quote_author', placeholder: $t('Enter Author') }"></div>
69-
<div class="quote-title" attr="data.author_title.attributes" ko-style="data.author_title.style" css="data.author_title.css" data-bind="liveEdit: { field: 'quote_author_desc', placeholder: $t('Enter Description') }"></div>
70-
</div>
71-
```
72-
73-
2. Flush your config cache `bin/magento cache:flush config` and view Page Builder from the Home Page editor (as a convenience for storefront viewing later). The Page Builder panel menu should show your content type at the top of the layout group:
74-
75-
![Page Builder Panel Config](../images/create-config-file-1.png)
76-
77-
3. Drag your new content type onto the stage and **Save**. You should see something similar to this:
78-
79-
![Admin preview.html template](../images/drag-content-type-to-stage.png)
80-
81-
Notice that you also have an options menu when you hover over your content type. This is provided by including the `<render args="getOptions().template" />` within your `preview.html` template. See [Option menu configurations](../configurations/option-menu-configurations.md) for more details.
82-
83-
## Create the `master_template`
84-
85-
```html
86-
<!--master.html-->
87-
<h2 attr="data.main.attributes"
88-
ko-style="data.main.style"
89-
css="data.main.css"
90-
html="data.main.html">
91-
</h2>
92-
```
53+
The remainder of this topic is in progress.

‎docs/create-basic-content-type/step-3-add-components.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,11 @@ In your configuration file, reference your JavaScript component (`preview.js`) a
2222
...
2323
```
2424

25-
| Attribute | Description |
26-
| ----------------- | ------------------------------------------------------------ |
27-
| 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 (as shown in the example). Use `Magento_PageBuilder/js/content-type-collection` for content types that can contain children, called container content types. |
28-
| preview_component | `preview.js` - Optional JavaScript file that provides preview-specific rendering logic within the Admin UI. If your content type does not require any specific user-interactivity or other behavior in the Admin, you can simply omit this attribute from the the `<type>`. Page Builder will use `Magento_PageBuilder/js/content-type/preview` by default. |
29-
| master_component | `master.js` - Optional JavaScript file that provides master format rendering logic generic for all appearances of your content type when rendered on the storefront. Same as with the `preview_component`, if your content type does not require any specific user-interactivity or other behavior when it's displayed in the storefront, you can simply omit this attribute from the the `<type>`. Page Builder will use `Magento_PageBuilder/js/content-type/master` by default (as shown in the example). |
25+
| Attribute | Description |
26+
| ------------------- | ------------------------------------------------------------ |
27+
| `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 (as shown in the example). Use `Magento_PageBuilder/js/content-type-collection` for content types that can contain children, called container content types. |
28+
| `preview_component` | `preview.js` - Optional JavaScript file that provides preview-specific rendering logic within the Admin UI. If your content type does not require any specific user-interactivity or other behavior in the Admin, you can simply omit this attribute from the the `<type>`. Page Builder will use `Magento_PageBuilder/js/content-type/preview` by default. |
29+
| `master_component` | `master.js` - Optional JavaScript file that provides master format rendering logic generic for all appearances of your content type when rendered on the storefront. Same as with the `preview_component`, if your content type does not require any specific user-interactivity or other behavior when it's displayed in the storefront, you can simply omit this attribute from the the `<type>`. Page Builder will use `Magento_PageBuilder/js/content-type/master` by default (as shown in the example). |
3030

3131
{:style="table-layout:auto"}
3232

@@ -37,3 +37,5 @@ Add them to your module here (`view/adminhtml/web/js/content-type/<content-type-
3737
![Create config file](../images/step3-add-component.png)
3838

3939
## Create preview component
40+
41+
The remainder of this topic is in progress.

‎docs/create-basic-content-type/step-4-add-form.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,4 +181,6 @@ In this example, let's create a form that extends `pagebuilder_base_form` to pro
181181
182182
[Insert descriptions]
183183
184-
## Create layout
184+
## Create layout
185+
186+
The remainder of this topic is in progress.

‎docs/create-basic-content-type/workflow-tips.md

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
# Workflow tips
22

3-
When you are working on a page and changing the master.html template, you need to Save the page in the Admin UI and
4-
make some kind of change to the preview template on the Admin UI. Otherwise, you will not see your changes in the
5-
browser. This is due to how Page Builder updates changes: it will not update the master template until changes have
6-
been made to the page.
3+
When you are working on a page and changing the master.html template, you need to Save the page in the Admin UI and make some kind of change to the preview template on the Admin UI. Otherwise, you will not see your changes in the browser. This is due to how Page Builder updates changes: it will not update the master template until changes have been made to the page.
74

0 commit comments

Comments
 (0)