Block Editor

The Block Editor plugin provides a way to build "universal blocks" using Loops & Logic templates.

A "universal block" automatically becomes a Gutenberg block, Elementor widget, and Beaver Builder module.

How it works

To create a block, go to the admin menu Tangible -> Blocks, and click "Add New".

A block has the same editors as regular templates:

In addition, there is an editor for Controls, which defines what block setting fields are available in the page builder.

See the Controls page for description of all supported control types.

Here is an example of a block for "header".

In the "Controls" tab, we define the block settings to use.

First, a control named text for the header text.

<Control type="text" name="text" label="Text" default="Header text" />

And another control named text-color for the text color.

<Control type="color" name="text-color" label="Text color" default="#000000" />

When the user inserts the block, the page builder will show these as setting fields.

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.