Elements

Another way Webiny Page Builder ensures that visual styles follow your design system is by having certain style presets for some of the elements, like the Button element.

Webiny - Theme Layout

elements is the section that defines certain attributes for Page Builder elements that you can insert into your page content.

{
"elements": {
"button": {
"types": [
{ "className": "", "label": "Default" },
{ "className": "primary", "label": "Primary" },
{ "className": "secondary", "label": "Secondary" }
]
}
}
}

By default, the only element that supports this is the Button element. But the point is that if you create a custom component for Page Builder, you can reference the same mechanism and add this functionality to your own element.

The definition takes two keys:

  • className: Name of the CSS class that will be appended to that element.
  • label: This is what's shown in the dropdown when a user is selecting a style.

Button element

In case of the button element, the types attribute contains available button types. Each type references a specific class name that will be added to the button component when that type is selected.

Note: By default Webiny uses BEM naming. The default button class is webiny-cms-element-button, so when the user selects the "primary" button type, it will add a modifier of "primary" to the base class, meaning the resulting class name will be "webiny-cms-element-button--primary".

Last updated on 2019-11-28 by sven