Blocks

Block Variants

Variants are editor choices for block states, such as layout, mood, color, or spacing.

Add Variants#

Put variants: in block front matter:

phpresources/views/blocks/hero.php
title: Herocategory: Sectionsvariants:  mood: calm, loud---<section variant_class="mood">  <h1>Hero title</h1>  <p variant="mood.loud">Shown for the loud mood.</p></section>

The editor shows a Mood control. variant_class="mood" adds the selected mood class to the element. variant="mood.loud" renders that element only when loud is selected.

TemplateX removes variant and variant_class from compiled HTML.

Choose Control Types#

Use radio, select, or tabs:

php
variants:  layout: tabs    text    media    featured  tone: select    quiet    bold

If no control type is set, TemplateX uses radio.

Add Classes#

Variant options can include CSS classes:

php
variants:  tone: radio    quiet: bg-white text-black    bold: bg-black text-white---<section variant_class="tone">  <h1>Hero title</h1></section>

TemplateX also adds a generated class like variant-tone-bold.

Show Variant Controls Conditionally#

Use show_if when one variant control depends on another value:

php
variants:  layout: tabs    text    media  image_position: radio    left    right    show_if: layout.media

show_if hides or shows the editor control. It does not hide frontend markup by itself.

You can stack conditions with && and ||:

php
variants:  layout: tabs    text    media  tone: radio    quiet    bold    show_if: layout.media || layout.featured  image_position: radio    left    right    show_if: layout.media && tone.bold