Editor View

The Editor View tab is used to build your block’s HTML structure and add components that will make your block editable.

Elements

Elements refer to HTML elements (or tags). Your block must contain at least one root-level element.

Elements are added by clicking an element or dragging it to your block’s structure.

For convenience, several common elements are available but you’re not limited to only those elements. Any element can be changed to a different element by clicking the element to select it and changing the HTML tag. For example, to add a numbered list you could click the Custom element to add it to your block and then change the HTML tag to “ol”.

You can organize your block’s structure by dragging and dropping elements. Grab the element by the move icon (the six dots) that appear next to each element to move it. Elements can be nested the same way you’d nest tags within an HTML file.

The editor displays the opening tag of each element. Any elements that are indented underneath will be rendered within the tag.

Element Settings

Click on an element in your block’s structure to view its settings.

HTML Tag

This is the name of the HTML tag that you’d like the element to be. This can be any valid HTML tag. Enter the tag name only without the brackets.

Content

The Content field can be used to output text content within the element. Use the insert token button that appears in the field to insert dynamic content such as a value from an attribute.

Note: an element’s content is output after any nested elements.

Classes

Use the Classes panel to add CSS classes to your element.

Note: to delete a class, click the settings icon (i.e. the gear/cog icon) that appears next to the class name in the Classes panel and then click delete class.

Styles

Use the Styles panel to add inline styles to your element. Enter a valid CSS property in the Property field. Use the insert token button in the Value field to insert dynamic content such as the value of a block attribute.

Attributes

Use the Attributes panel to add HTML attributes to your element. In the Attribute field, enter a valid HTML attribute. Use the Value field to specify the attribute’s value. Use the insert token button in the Value field to insert dynamic content such as the value of a block attribute.

Conditions

Use conditions to control whether or not an element is rendered when the block is displayed.

Note: conditions are only available in the pro version of Wicked Block Builder.

Note: the block.isSelected condition is always false in the front-end view. Meaning if you add a condition to an element or component that only outputs the item if block.isSelected equals true, the item will not be output on the front-end.

Components

Components are used to make your block editable. For example, you can add a RichText component to let people type into your block.

Click or drag a component to add it to your block. To view a component’s settings, click the component in your block’s structure.

Component Settings

Every component has settings specific to the component. For information about each component’s individual settings, see our Component Reference.

Generally, every component requires an attribute to store it’s value. Some components require specific attribute types. For example, the repeater component requires an array-type attribute.

Note: the Attribute dropdown only displays attributes that are compatible with the component.