You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
|`optionsData`| Grouping array for all the appearance options of a content type. |
53
-
|`item array`| Grouping array of properties that define an appearance option. The `name="4"` signifies the index order for displaying the option. The Banner's existing options stop with an index of 3 (`name="3"`), ensuring that our new appearance option is positioned after the last Banner option. |
54
-
|`value`|Assigns the unique key used in the component dataSource. |
53
+
|`item array`| Grouping array of properties that define an appearance option. We recommend you match the `name` of the item array to the option's `value` string. In our example, the `item` array's name is `simple-poster`, which matches the option's value string `simple-poster`. |
54
+
|`value`|The `value` string should match the appearance name defined in the content type's configuration file. Page Builder uses this value to link the option to the appearance.|
55
55
|`title`| Display name for the appearance option. Banner example: Poster. |
56
-
|`icon`| Path to the `.svg` icon for the appearance: `view/adminthtml/web/css/images/content-type/[content-type-name]/appearance/*.svg`. See Creating an icon for your appearance |
56
+
|`icon`| Path to the `.svg` icon for the appearance: `view/adminthtml/web/css/images/content-type/[content-type-name]/appearance/*.svg`. See [Creating an icon for your appearance](#create-an-appearance-icon)|
57
57
|`noticeMessage`| (Not shown in example.) The `noticeMessage` displays a message below the appearance options when the appearance is selected. For example, two of the Row appearances (`full-width` and `full-bleed`) define `noticeMessage` strings that display when selected. |
58
58
{:style="table-layout:auto"}
59
59
60
-
To add more appearance options, simply create more `item` arrays, as shown here:
60
+
To add more appearance options, simply create more `item` arrays with names that match the `value`, as shown here:
61
61
62
62
```xml
63
63
<itemname="tall"xsi:type="array">
@@ -81,7 +81,7 @@ Appearance icons are `.svg` files that graphically depict the layout of an appea
81
81
82
82
_Add appearance icons for Banner content type_
83
83
84
-
Use the following SVG template as a starting place for creating your own appearance icon:
84
+
You can use any design tool to create your SVG. But if you want to match your appearance icons to Page Builder's icons _perfectly_, use the SVG structure and dimensions shown here:
@@ -96,7 +96,7 @@ Use the following SVG template as a starting place for creating your own appeara
96
96
```
97
97
_SVG appearance template_
98
98
99
-
You can use whatever tool you want to create your SVG. Just make sure you follow these specific dimensions to ensure your icon fits in with the existing appearance icons:
99
+
These specific dimensions ensure that your icon fits seamlessly with the existing appearance icons:
0 commit comments