Skip to content

Commit e706a4b

Browse files
bdenhambdenham
committed
MAGEDOC-3448: Add docs for content type styles
Added several images and content to complete step 5 of the tutorial.
1 parent 5ead7c9 commit e706a4b

16 files changed

+377
-408
lines changed

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Step 4: Add form
22

3-
In this step, we will create a UI component form. This form will give users another way to enter text for the quote and style its appearance.
3+
In this step, we will create a UI component form. This form will give users another way to enter text for the Quote and style its appearance.
44

55
## About forms
66

@@ -70,7 +70,7 @@ The purpose of each field is described as follows:
7070
| Quote | A textarea for writing or pasting in the quote's text. |
7171
| Author | A text input field for the author's name. |
7272
| Description | A text input field to describe the author's title or origin of the quote. |
73-
| CSS for Quote | A text input field for end-users to add css class names for styling the text in the Quote field. |
73+
| CSS for Quote | A text input field for end-users to add css class names for styling the text in the Quote field. This option is detailed in [Step 5: Add styles](step-5-add-styles.md). |
7474

7575
The Quote form is shown in full here for you to copy into your `pagebuilder_example_form.xml` file, followed by descriptions of the key parts.
7676

@@ -303,7 +303,7 @@ The `<css>` element sets the binding for the CSS Classes form field (`css_classe
303303
| --------- | ------------------------------------------------ |
304304
| `name` | Specifies the name of the form field to bind to. |
305305

306-
For example, in our Quote configuration, we define an `<element>` named `quote` with a `<css>` element bound to an input field in our form named `quote_css`, as shown here:
306+
For example, in our Quote configuration, we define an `<element>` named `quote` with a `<css>` element bound to an input field in our form named `quote_css`, as shown here:
307307

308308
```xml
309309
<!-- from example_quote.xml -->
@@ -338,6 +338,8 @@ And the `css` binding is applied in the `preview.html` template, as shown here:
338338
<blockquote css="data.quote.css" ...></blockquote>
339339
```
340340

341+
In [Step 5: Add styles](step-5-add-styles.md), we will revisit the `css` attribute in detail to show how it is used to allow users to style templates with additional CSS classes.
342+
341343
#### html
342344

343345
The `<html>` element binds the HTML content entered in a form field. When the `<html>` element names a field for binding, content entered into the field is applied to the template elements that use them.

‎docs/create-basic-content-type/step-5-add-styles.md

Lines changed: 360 additions & 21 deletions
Large diffs are not rendered by default.

‎docs/create-basic-content-type/step-6-add-icon.md

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ As mentioned, you can create a PNG or an SVG icon, but we recommend creating SVG
2020

2121
![Create config file](../images/step6-icon-properties.png)
2222

23-
As the illustration shows, the artboard represents the actual width and height of your icon when it is exported from your graphics application (16 x 16px). The artwork represents the content of your icon. Following these dimensions ensures your icons will match the size and positioning of the existing Page Builder icons within the panel.
23+
As the illustration shows, the *artboard* represents the actual width and height of your icon when it is exported from your graphics application (16 x 16px). The *artwork* represents the content of your icon. Following these dimensions ensures your icons will match the size and positioning of the existing Page Builder icons within the panel.
2424

2525
When finished, add your icon to your `images` directory as follows:
2626

@@ -36,7 +36,7 @@ The CSS for integrating SVG and PNG images with the font icons used by Page Buil
3636

3737
```css
3838
.icon-pagebuilder-quote {
39-
content: url(../Example_PageBuilderQuote/css/images/content-type/example-quote/appearance/icon-pagebuilder-quote.svg);
39+
content: url('@{baseDir}Example_PageBuilderQuote/css/images/content-type/example-quote/appearance/icon-pagebuilder-quote.svg');
4040
width: 18px;
4141
height: 18px;
4242
margin-bottom: -1px;
@@ -46,28 +46,15 @@ The CSS for integrating SVG and PNG images with the font icons used by Page Buil
4646
| Attribute | Description |
4747
| --------------- | ------------------------------------------------------------ |
4848
| `class name` | To match the class names of Page Builder's native icons, we recommend prefixing your icon names with `icon-pagebuilder` as we have done with our Quote icon. |
49-
| `content` | The relative path to your SVG or PNG icon when rendered from `pub/static`. More details follow below. |
49+
| `content` | The relative path to your SVG or PNG icon when rendered from `pub/static`. Referencing your image from your CSS icon class ensures that the link to your image will be created in the static output and the icon will resolve in the browser. Using the `@{baseDir}` variable also ensures that the static path to your image file will resolve correctly. |
5050
| `width` | Sets the width of the content area that most closely matches the widths of Page Builder icon fonts. |
5151
| `height` | Sets the height of the content area that most closely matches the widths of Page Builder icon fonts. |
5252
| `margin-bottom` | Pulls the SVG or PNG image down within the panel container to more closely match the positioning of Page Builder's font icon. |
5353

54-
### Content path to icon image
55-
56-
When you add the relative content path to your SVG or PNG image, you must start from the consolidated `styles.css` within `pub/static` as shown below.
54+
When deployed, your icon images are linked from `pub/static` as shown here:
5755

5856
![Create config file](../images/step6-icon-link-static.png)
5957

60-
In the case of our Quote icon, the relative path must be set as:
61-
62-
```css
63-
.icon-pagebuilder-quote {
64-
content: url(../Example_PageBuilderQuote/css/images/content-type/example-quote/appearance/icon-pagebuilder-quote.svg);
65-
...
66-
}
67-
```
68-
69-
This referencing your image from your CSS icon class ensures that the link to your image will be created in the static output and the icon will resolve in the browser.
70-
7158
## Add icon class to config file
7259

7360
The last step is to add our icon's class name to our config file. Previous to this step, we used an existing icon class: `icon-pagebuilder-heading`. Now we can replace this class with our new class: `icon-pagebuilder-quote`, as shown here:
@@ -89,6 +76,8 @@ The last step is to add our icon's class name to our config file. Previous to th
8976

9077
That's it. Now you can regenerate your static assets, empty your browser cache, and do a hard reload of your Admin page to see your new icon in the panel.
9178

79+
## Next
9280

81+
Congratulations! You just finished the last step in this tutorial. To wrap things up, find out [What's next](whats-next.md).
9382

9483

‎docs/create-basic-content-type/whats-next.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# What's next
2+
3+
Now that you've walked through the details and understand the basics of creating a simple content type, you are ready to tackle a more complex content type that uses containers.
4+
5+
See [How to develop a container content type](../how-to/how-to-develop-container-content-type.md) to get started.

‎docs/getting-started/introduction.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@ See [Install Page Builder](install-pagebuilder.md)
4848

4949
### How tos
5050

51-
* [How to develop a new content type](../how-to/how-to-develop-new-content-type.md)
5251
* [How to develop a container content type](../how-to/how-to-develop-container-content-type.md)
5352
* [How to use the Image Uploader](../how-to/how-to-use-image-uploader.md)
5453
* [How to use the Image Uploader](../how-to/how-to-use-image-uploader.md)

‎docs/how-to/how-to-develop-container-content-type.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1027,7 +1027,6 @@ Use the configuration form in the container group's edit panel to switch between
10271027

10281028
![Custom Containers Form](../images/custom-containers-form.png)
10291029

1030-
[How to develop a new content type]: how-to-develop-new-content-type.md
10311030
[Register your component]: https://devdocs.magento.com/guides/v2.2/extension-dev-guide/build/component-registration.html
10321031
[custom container]: #custom-container
10331032
[custom container group]: #custom-container-group

0 commit comments

Comments
 (0)