Melhor Controle de Espaços em Branco nos Templates do Twig

O controle de espaços em branco nos templates Twig permite controlar a indentação e o espaçamento do conteúdo gerado (geralmente código HTML). O controle de espaços em branco é muito importante ao usar o Twig para gerar conteúdos como YAML, e-mails de texto, ou qualquer outro formato em que os espaços em branco sejam significativos.

Em contraste, ao gerar conteúdo HTML, na maioria das vezes você deve ignorar esse recurso, porque o conteúdo HTML é minificado e compactado antes de ser enviado aos usuários, portanto, tentar gerar um código HTML perfeitamente alinhado é apenas uma perda de tempo.

No entanto, existem alguns casos específicos em que o espaço em branco pode alterar a forma como as coisas são exibidas. Por exemplo, quando um elemento <a> contém espaços em branco após o texto do link e o link exibe um sublinhado, o espaço em branco é visível. É por isso que o Twig fornece várias maneiras de controlar espaços em branco. Nas versões recentes do Twig, esses recursos foram melhorados.

Novas Opções para Remover Espaços em Branco

Considere o seguinte snippet do Twig:

<ul>
    <li>
        {% if some_expression %}
            {{ some_variable }}
        {% endif %}
    </li>
</ul>

Se o valor de some_variable é 'Lorem Ipsum', o HTML gerado quando a expressão if corresponder, seria o seguinte:

<ul>
    <li>
            Lorem Ipsum
        </li>
</ul>

O Twig, por padrão, remove apenas o primeiro caractere \n após cada tag do Twig (o \n após as tags if e endif no exemplo anterior). Se você deseja gerar código HTML com melhor indentação, é possível usar o caractere -, que remove todos os espaços em branco (incluindo novas linhas) da esquerda ou da direita da tag:

<ul>
    <li>
        {%- if some_expression %}
            {{- some_variable -}}
        {% endif -%}
    </li>
</ul>

A saída agora é:

<ul>
    <li>Lorem Ipsum</li>
</ul>

A partir do Twig 1.39 e 2.8.0, você tem outra opção para controlar os espaços em branco: o caractere ~ (que pode ser aplicado a {{, {% e {#). É semelhante ao -, com a única diferença que ~ não remove novas linhas:

<ul>
    <li>
        {%~ if some_expression %}
            {{ some_variable -}}
        {% endif ~%}
    </li>
</ul>

A saída agora contém as novas linhas antes e após as tags <li>, portanto, o HTML gerado é mais parecido com o código Twig original que você escreveu:

<ul>
    <li>
        Lorem Ipsum
    </li>
</ul>

Adicionado o Filtro spaceless

Nas versões anteriores do Twig, havia uma tag chamada {% spaceless %}, que transformava o conteúdo da string especificada para remover os espaços em branco entre as tags HTML. No entanto, no Twig, transformar alguns conteúdos antes de exibi-los é algo feito por filtros.

É por isso que, a partir do Twig 1.38 e 2.7.3, a tag spaceless foi substituída pelo filtro spaceless, que funciona exatamente da mesma forma:

{{ some_variable_with_HTML_content|spaceless }}

No entanto, isso é comumente usado com a maneira alternativa de aplicar algum filtro a conteúdo HTML:

-{% spaceless %}
+{% apply spaceless %}
    {# some HTML content here #}
-{% endspaceless %}
+{% endapply %}

A tag apply foi adicionada recentemente para substituir a tag anterior filter.

Em qualquer caso, mesmo após essas alterações, ainda é recomendável não usar muito o filtro spaceless. A remoção de espaços em branco com esse filtro acontece em tempo de execução, então, chamá-lo repetidamente pode afetar o desempenho.

Escape Refinado em Expressões Ternárias

Esse novo recurso introduzido no Twig 1.39 e 2.8, e não está relacionado ao controle de espaço em branco, mas é um novo recurso importante a ser considerado em seus templates. Considere o seguinte exemplo e os resultados apresentados nas versões do Twig anteriores a 1.39 e 2.8:

{% set foo = '<strong>foo</strong>' %}
{% set bar = '<strong>bar</strong>' %}

{{ false ? '<strong>bar</strong>' : foo|raw }}
{# renders as '<strong>foo</strong>' #}

{{ false ? bar : foo|raw }}
{# renders as '&lt;strong&gt;foo&lt;/strong&gt;' #}

{{ (false ? bar : foo)|raw }}
{# renders as '<strong>foo</strong>' #}

A razão pela qual esse exemplo funcionou dessa forma nas versões anteriores do Twig é que, na primeira instrução ternária, foo é marcado como seguro e o Twig não faz escape de valores estáticos. Na segunda instrução ternária, mesmo se foo estiver marcado como seguro, bar permanecerá não seguro e a expressão inteira também. A terceira instrução ternária é marcada como segura e o resultado não é escapado.

Esse comportamento foi confuso para muitos designers e desenvolvedores. É por isso que, a partir do Twig 1.39 e 2.8, o resultado desse exemplo foi alterado da seguinte forma:

{% set foo = '<strong>foo</strong>' %}
{% set bar = '<strong>bar</strong>' %}

{{ false ? '<strong>bar</strong>' : foo|raw }}
{{ false ? bar : foo|raw }}
{{ (false ? bar : foo)|raw }}
{# renders as '<strong>foo</strong>' in all cases #}

Antes, a estratégia de escape era a mesma para os dois lados do operador ternário. Agora, no Twig 1.39 e 2.8, é aplicado um caminho de código especial para o operador ternário que possibilita ter diferentes estratégias de escape para os dois lados.

Tradução de: Better White Space Control in Twig Templates