Twig Templates

WPBits Block Studio supports Twig templates for dynamic block rendering. Twig is a PHP template engine that offers security features, caching, and an easy-to-read syntax.

Why Twig?

Twig provides several advantages over plain PHP templates:

• Security — Automatic escaping prevents XSS attacks
• Readability — Clean, simple syntax
• Caching — Compiled templates are cached for performance
• Extensibility — Filters and functions for common tasks

Basic Twig Template

A simple block template in Twig:

{# block-title.twig #}
<div class="feature-block">
    <h2>{{ attributes.title }}</h2>
    <p>{{ attributes.description }}</p>
</div>

Output Escaping

Twig automatically escapes output to prevent XSS:

{# This is safe - content is escaped #}
{{ attributes.title }}

{# For raw HTML (use carefully) #}
{{ attributes.content | raw }}

Template Syntax

Variables

Access block attributes with dot notation:

{{ attributes.title }}
{{ attributes.image.url }}
{{ attributes.settings.size }}

Conditionals

{% if attributes.show_icon %}
    <span class="icon">{{ attributes.icon }}</span>
{% endif %}

Loops

{% for item in attributes.items %}
    <li>{{ item.name }}</li>
{% endfor %}

Filters

Transform output with filters:

{# Uppercase #}
{{ attributes.title | upper }}

{# Date formatting #}
{{ attributes.date | date('F j, Y') }}

{# Truncate #}
{{ attributes.text | truncate(100) }}

WPBits Block Studio Twig Features

WPBits Block Studio’s Twig implementation includes:

Security Hardening

• All output is escaped by default
• Sandboxed environment
• Restricted functions

Built-in Filters

Filter	Description	Example
upper	Uppercase	{{ text | upper }}
lower	Lowercase	{{ text | lower }}
trim	Remove whitespace	{{ text | trim }}
date	Format date	{{ date | date('Y-m-d') }}
esc_html	Escape HTML	{{ html | esc_html }}
esc_attr	Escape attribute	{{ attr | esc_attr }}

Built-in Functions

Function	Description
asset()	Get asset URL
theme()	Get theme URL

Template Files

WPBits Block Studio generates these template files:

block-title.twig (Primary)

Twig template for primary rendering:

<div class="my-block">
    <h2>{{ attributes.title }}</h2>
</div>

preview.twig (Optional)

Template for editor preview (if different from frontend):

<div class="my-block preview">
    <h2>{{ attributes.title }}</h2>
</div>

Creating Custom Templates

Step 1: Enable Twig Rendering

1. In block editor, go to Template tab
2. Select Twig as render mode
3. Choose template type

Step 2: Write Template

Create your template using Twig syntax:

<div class="testimonial-block">
    {% if attributes.quote %}
        <blockquote>{{ attributes.quote }}</blockquote>
    {% endif %}

    {% if attributes.author %}
        <cite>{{ attributes.author }}</cite>
    {% endif %}

    {% if attributes.rating %}
        <div class="rating">
            {% for i in 1..attributes.rating %}
                ★
            {% endfor %}
        </div>
    {% endif %}
</div>

Step 3: Preview

WPBits Block Studio shows a live preview as you edit the template.

Troubleshooting

Template Not Rendering

1. Check file permissions
2. Verify Twig files are in correct location
3. Enable WP Debug to see errors

Escaping Issues

Use | raw only when absolutely necessary, and never with user input:

{# Safe - user input is escaped #}
{{ attributes.user_content }}

{# Dangerous - only use with trusted content #}
{{ trusted_html_content | raw }}

Next Steps

• Custom Render PHP — Advanced rendering with PHP
• Export Templates — Deploy templates with your blocks