Block controls

Learn the syntax and accepted attributes for block controls in Tangible Blocks

The Editor add-on for Tangible Blocks adds a "Controls" tab to the template editor to enable building universal blocks using the L&L templating language. A block created in the Tangible Blocks Editor plugin automatically becomes a Gutenberg block, Elementor widget, and Beaver Builder module.

Controls

Tangible Blocks Editor adds a Control tag that enables building a variety of control types to the page builder.

Control types

Here are the available control types.

Attributes

All controls have the following common attributes.

  • type - Control type
  • name - Name of control field: This corresponds to the placeholder name
  • label - Control label
  • default - Default value

The first three are required.

Control attributes can be defined like this.

<Control type="text" name="control-name" label="label" default="default" />

Or it can also be defined using the Key tag.

<Control>
  <Key type>text</Key>
  <Key name>control-name</Key>
</Control>

This can be useful for passing dynamic values or long text.

Displaying a control value

The control values that the user enters (or selects) can be referenced as placeholders in the HTML, Sass, or JavaScript.

Each placeholder is the control name surrounded by {{ and }}.

The HTML template may look like this.

<h1>{{ text }}</h1>

For Sass, the control value will also be defined as a variable starting with $.

h1 {
  color: $text-color;
}

Note that Sass styles are automatically wrapped in a unique class name (not shown in the code) to target the block only.

It's possible to get this unique class name in templates, scripts and styles by using the {{ wrapper-class }} value.

Control features

Here are a few features of block controls in the Tangible Blocks Editor.