Skip to content

Commit 1cf1891

Browse files
committed
PB-73: Create Appearances example and documentation
Updated after review
1 parent f1b4040 commit 1cf1891

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

docs/how-to/how-to-add-appearance.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -50,14 +50,14 @@ The following table describes the configuration arguments for each appearance op
5050
| Arguments | Description |
5151
| --------------- | ------------------------------------------------------------ |
5252
| `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.|
5555
| `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) |
5757
| `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. |
5858
{:style="table-layout:auto"}
5959

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:
6161

6262
```xml
6363
<item name="tall" xsi:type="array">
@@ -81,7 +81,7 @@ Appearance icons are `.svg` files that graphically depict the layout of an appea
8181

8282
_Add appearance icons for Banner content type_
8383

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:
8585

8686
```xml
8787
<svg xmlns="http://www.w3.org/2000/svg" width="218" height="110" viewBox="0 0 218 110">
@@ -96,7 +96,7 @@ Use the following SVG template as a starting place for creating your own appeara
9696
```
9797
_SVG appearance template_
9898

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:
100100

101101
| Property | Value |
102102
| ------------------------------ | ----------- |

0 commit comments

Comments
 (0)