Block controls

Reference for all 11 block control types and how to use their values in TWIG templates

Block controls are custom inputs that appear in the block inspector sidebar when an editor selects the block in Gutenberg. Each control's current value is passed to the TWIG callback as a variable.

Naming rule: Control names are lowercased and spaces/dashes are converted to underscores. A control named Badge Label → {{ badge_label }} in TWIG.

---

Control types overview

Type	TWIG variable type	Best for
Text	string	Short labels, titles, URLs
Textarea	string	Multi-line content, custom copy
Number	integer	Counts, IDs, font sizes
Range	integer	Sliders (columns, opacity, speed)
Email	string	Contact email addresses
Phone	string	Phone numbers
Checkbox	boolean	Binary on/off options
Toggle	boolean	Binary on/off options (visual switch)
Radio	string	Mutually exclusive choices
Select	string	Dropdown with predefined options
SelectMulti	array	Multiple selectable options

---

Text

A single-line text input. Use it for short custom strings like labels, titles, or CTA text.

TWIG type: string

Example — customisable CTA button:

<a class="btn" href="{{ get_permalink() }}">
    {{ cta_label|default('Read more') }}
</a>

---

Textarea

A multi-line text area. Use it for longer custom content like descriptions or notes.

TWIG type: string

Textarea values are plain text. Use |nl2br|raw to respect line breaks.

Example:

<p class="card__note">
    {{ editor_note|nl2br|raw }}
</p>

Settings available:

Setting	Description
rows	Number of visible rows in the editor sidebar

---

Number

A numeric input. The value arrives in TWIG as an integer.

TWIG type: integer

Example — control number of gallery columns:

<ul class="gallery gallery--cols-{{ columns|default(3) }}">
    {% for img in acpt_product_info_gallery %}
        <li><img src="{{ img }}" /></li>
    {% endfor %}
</ul>

Settings available:

Setting	Description
min	Minimum allowed value
max	Maximum allowed value
step	Increment step

---

Range

A slider control. Identical to Number but rendered as a slider in the editor sidebar.

TWIG type: integer

Example — opacity control:

<div class="overlay" style="opacity: {{ opacity|default(80) / 100 }}">
    {{ acpt_hero_content_text|raw }}
</div>

Settings available: same as Number (min, max, step).

---

Email

A text input validated as an email address.

TWIG type: string

Example:

{% if contact_email %}
    <a href="mailto:{{ contact_email }}">{{ contact_email }}</a>
{% endif %}

---

Phone

A text input validated as a phone number (type="tel").

TWIG type: string

Example:

{% if contact_phone %}
    <a href="tel:{{ contact_phone }}">{{ contact_phone }}</a>
{% endif %}

---

Checkbox

A checkbox that returns true when checked, false (or null) when unchecked.

TWIG type: boolean

Example:

{% if show_author %}
    <p class="byline">By {{ get_the_title() }}</p>
{% endif %}

---

Toggle

A toggle switch — functionally identical to Checkbox but rendered as a visual on/off switch in the editor sidebar. Prefer Toggle when the meaning is clearly binary (show/hide, enabled/disabled).

TWIG type: boolean

Example:

<div class="card {% if highlight %}card--highlighted{% endif %}">
    <h2>{{ get_the_title()|raw }}</h2>
</div>

---

Radio

A set of radio buttons. Only one option can be selected at a time. The value in TWIG is the value of the selected option (not the label).

TWIG type: string

Example — layout switcher:

Define options in the wizard: { value: 'grid', label: 'Grid' }, { value: 'list', label: 'List' }.

<div class="posts posts--{{ layout|default('grid') }}">
    {% for item in get_posts({'post_type': 'post', 'posts_per_page': 6}) %}
        <div class="posts__item">
            <a href="{{ get_permalink(item.ID) }}">{{ get_the_title(item.ID) }}</a>
        </div>
    {% endfor %}
</div>

---

Select

A dropdown that lets the editor pick one option. The value in TWIG is the value of the selected option.

TWIG type: string

Example — theme colour:

Define options: { value: 'blue', label: 'Blue' }, { value: 'green', label: 'Green' }, { value: 'red', label: 'Red' }.

<div class="banner banner--{{ accent_color|default('blue') }}">
    {{ acpt_banner_content_text|raw }}
</div>

---

SelectMulti

A multi-select dropdown. The editor can pick several options. The value in TWIG is an array of the selected option values.

TWIG type: array

Example — display selected tags:

{% if selected_features|length > 0 %}
    <ul class="features">
        {% for feature in selected_features %}
            <li>{{ feature }}</li>
        {% endfor %}
    </ul>
{% endif %}

Example — apply multiple CSS classes:

<div class="card {{ selected_modifiers|join(' ') }}">
    ...
</div>