Block Fields - TemplateX Documentation

Add Fields#

Put fields: in block front matter:

phpresources/views/blocks/hero.php

title: Herocategory: Sectionsfields:  heading: text  intro: textarea  image: image---<section>  <h2>{{ heading }}</h2>  <p>{{ intro }}</p>  <img src="{{ image.url }}" alt="{{ image.alt }}"></section>

Use the field name in the template body, like {{ heading }}.

Field Types#

Type	Use For
`text`	Short plain text.
`textarea`	Longer plain text.
`richtext`	Formatted text.
`code`	Plain-text code snippets.
`number`	Numeric values.
`toggle` / `switch`	On/off values.
`url`	Links.
`image` / `media`	One image.
`gallery` / `images`	Multiple images.
`select`	One choice from a dropdown.
`radio`	One choice from visible options.
`repeater`	Repeatable rows.
`tab` / `tabs`	Sidebar groups for other fields.

Add Field Settings#

Field settings live under the field:

php

fields:  style: select    label: Style    description: Choose the visual style.    options: quiet, loud    default: quiet

Common settings are label, description, placeholder, default, options, fields, and show_if.

Use Repeaters#

Repeaters contain nested fields:

php

fields:  cards: repeater    fields:      heading: text      link: url---{{ cards }}  <article>    <h3>{{ heading }}</h3>    <a href="{{ link }}">Read more</a>  </article>{{ /cards }}

Inside the repeater loop, values belong to the current row.

You can name the current row when that makes the template clearer:

php

{{ cards as card }}  <article>    <h3>{{ card.heading }}</h3>    <a href="{{ card.link }}">Read more</a>  </article>{{ /cards }}

Add count for a one-based row number, or index for a zero-based row number:

php

{{ cards as card, count }}  <h3>{{ count }}. {{ card.heading }}</h3>{{ /cards }}{{ cards as card, index }}  <h3>{{ index }}: {{ card.heading }}</h3>{{ /cards }}

Repeaters can contain nested repeaters:

php

fields:  items: repeater    fields:      name: text      children: repeater        fields:          name: text---{{ items }}  <button>{{ name }}</button>  {{ children }}    <span>{{ index }}: {{ name }}</span>  {{ /children }}{{ /items }}

Inside the nested loop, index, key, and value belong to the child collection. Direct field names such as {{ name }} read from the current child row.

For browser-side interactive repeater UI, render the first markup with block fields and add the interactive behavior from theme JavaScript.

Show Fields Conditionally#

Use show_if when a field should only appear after another choice is made:

php

fields:  has_cta: toggle  cta_label: text    show_if: has_cta  cta_url: url    show_if: has_cta

show_if only controls the editor sidebar. Use normal TemplateX conditions when frontend markup should appear or disappear.

You can stack conditions with && and ||:

php

fields:  has_media: toggle  media_type: radio    options: image, video, embed  image: image    show_if: has_media && media_type.image  video_url: url    show_if: has_media && (media_type.video || media_type.embed)