Examples

Three complete dynamic block examples with controls, TWIG templates, and CSS

These examples demonstrate real-world dynamic blocks. Each one includes the controls to configure, the TWIG callback template, and a CSS block for the Step 5 Style tab.

---

Example 1 — Event Card

A card that displays an event's key details, with an optional featured badge controlled by the editor.

Meta box setup

Assumes a meta box named event_details with the following fields on the event post type:

Field name	Type	TWIG variable
date	Date	acpt_event_details_date
time	Time	acpt_event_details_time
location	Text	acpt_event_details_location
description	Editor	acpt_event_details_description
ticket_url	URL	acpt_event_details_ticket_url

Block controls

Control name	Type	Default
show_badge	Toggle	off
badge_label	Text	Featured

Callback (TWIG)

<article class="event-card">

    {% if show_badge %}
        <span class="event-card__badge">
            {{ badge_label|default('Featured') }}
        </span>
    {% endif %}

    <div class="event-card__body">
        <h2 class="event-card__title">
            <a href="{{ get_permalink() }}">{{ get_the_title()|raw }}</a>
        </h2>

        {% if acpt_event_details_date %}
            <p class="event-card__meta">
                📅 {{ acpt_event_details_date }}
                {% if acpt_event_details_time %}
                    at {{ acpt_event_details_time }}
                {% endif %}
            </p>
        {% endif %}

        {% if acpt_event_details_location %}
            <p class="event-card__meta">
                📍 {{ acpt_event_details_location }}
            </p>
        {% endif %}

        {% if acpt_event_details_description %}
            <div class="event-card__description">
                {{ acpt_event_details_description|raw }}
            </div>
        {% endif %}

        {% if acpt_event_details_ticket_url %}
            <a class="event-card__cta" href="{{ acpt_event_details_ticket_url }}">
                Get tickets →
            </a>
        {% else %}
            <a class="event-card__cta event-card__cta--secondary" href="{{ get_permalink() }}">
                Learn more →
            </a>
        {% endif %}
    </div>

</article>

Style (CSS)

.event-card {
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    padding: 24px;
    font-family: inherit;
}

.event-card__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f97316;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
}

.event-card__title {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.3;
}

.event-card__title a {
    color: inherit;
    text-decoration: none;
}

.event-card__title a:hover {
    text-decoration: underline;
}

.event-card__meta {
    margin: 4px 0;
    font-size: 14px;
    color: #6b7280;
}

.event-card__description {
    margin: 12px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #374151;
}

.event-card__cta {
    display: inline-block;
    margin-top: 16px;
    padding: 8px 20px;
    background: #2563eb;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.event-card__cta--secondary {
    background: transparent;
    color: #2563eb;
    border: 1px solid #2563eb;
}

---

Example 2 — Property Listing Card

A card for a real estate listing. Displays the property's gallery, price, address, and key specs — all driven by ACPT meta fields, with no custom controls needed.

Meta box setup

Assumes a meta box named property on post type listing:

Field name	Type	TWIG variable
gallery	Gallery	acpt_property_gallery (array of image URLs)
price	Number	acpt_property_price
currency	Select	acpt_property_currency
address	Address	acpt_property_address (object)
bedrooms	Number	acpt_property_bedrooms
bathrooms	Number	acpt_property_bathrooms
area_sqm	Number	acpt_property_area_sqm

Block controls

None — this block is fully data-driven.

Callback (TWIG)

<div class="property-card">

    {# Gallery — show first image as cover #}
    {% if acpt_property_gallery|length > 0 %}
        <div class="property-card__image">
            <img src="{{ acpt_property_gallery[0] }}" alt="{{ get_the_title() }}" />
            {% if acpt_property_gallery|length > 1 %}
                <span class="property-card__image-count">
                    +{{ acpt_property_gallery|length - 1 }} photos
                </span>
            {% endif %}
        </div>
    {% endif %}

    <div class="property-card__body">

        {# Price #}
        {% if acpt_property_price %}
            <p class="property-card__price">
                {{ acpt_property_currency|default('$') }}{{ acpt_property_price|number_format(0, '.', ',') }}
            </p>
        {% endif %}

        {# Title & address #}
        <h2 class="property-card__title">
            <a href="{{ get_permalink() }}">{{ get_the_title()|raw }}</a>
        </h2>

        {% if acpt_property_address %}
            {% set addr = acpt_property_address %}
            <p class="property-card__address">
                {{ addr.street }}, {{ addr.city }}{% if addr.state %}, {{ addr.state }}{% endif %}
            </p>
        {% endif %}

        {# Specs #}
        <ul class="property-card__specs">
            {% if acpt_property_bedrooms %}
                <li>🛏 {{ acpt_property_bedrooms }} bed</li>
            {% endif %}
            {% if acpt_property_bathrooms %}
                <li>🚿 {{ acpt_property_bathrooms }} bath</li>
            {% endif %}
            {% if acpt_property_area_sqm %}
                <li>📐 {{ acpt_property_area_sqm }} m²</li>
            {% endif %}
        </ul>

    </div>
</div>

Style (CSS)

.property-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
    background: #fff;
    font-family: inherit;
}

.property-card__image {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.property-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.property-card__image-count {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
}

.property-card__body {
    padding: 20px;
}

.property-card__price {
    font-size: 22px;
    font-weight: 700;
    color: #1d4ed8;
    margin: 0 0 4px;
}

.property-card__title {
    font-size: 17px;
    margin: 0 0 4px;
}

.property-card__title a {
    color: inherit;
    text-decoration: none;
}

.property-card__address {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 12px;
}

.property-card__specs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #374151;
}

---

Example 3 — Configurable Text Banner

A flexible banner block where the editor can set the message text, pick an accent colour, and toggle a call-to-action button — all from the block sidebar.

Meta box setup

No ACPT meta fields needed. This block is entirely control-driven.

Block controls

Control name	Type	Options / Default
message	Textarea	—
accent_color	Select	blue / green / orange / dark
show_cta	Toggle	off
cta_label	Text	Learn more
cta_url	Text	—

Callback (TWIG)

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

    <div class="text-banner__content">

        {% if message %}
            <p class="text-banner__message">
                {{ message|nl2br|raw }}
            </p>
        {% endif %}

        {% if show_cta %}
            <a class="text-banner__cta"
               href="{{ cta_url|default(site_url) }}">
                {{ cta_label|default('Learn more') }}
            </a>
        {% endif %}

    </div>

</div>

Style (CSS)

.text-banner {
    padding: 32px;
    border-radius: 10px;
    font-family: inherit;
    text-align: center;
}

/* Colour themes */
.text-banner--blue  { background: #dbeafe; color: #1e3a8a; }
.text-banner--green { background: #dcfce7; color: #14532d; }
.text-banner--orange { background: #ffedd5; color: #7c2d12; }
.text-banner--dark  { background: #1f2937; color: #f9fafb; }

.text-banner__message {
    font-size: 18px;
    line-height: 1.6;
    margin: 0 0 20px;
}

.text-banner__cta {
    display: inline-block;
    padding: 10px 28px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    background: currentColor;
    font-size: 14px;
}

.text-banner--blue  .text-banner__cta { color: #fff; background: #1d4ed8; }
.text-banner--green .text-banner__cta { color: #fff; background: #16a34a; }
.text-banner--orange .text-banner__cta { color: #fff; background: #ea580c; }
.text-banner--dark  .text-banner__cta { color: #1f2937; background: #f9fafb; }

---

Going further

• TWIG reference — complete variable and function documentation

• Block controls — all 11 control types explained

• save_acpt_block — create blocks programmatically via PHP