Make resulting HTML more readable

[jean-gui]

This PR is a proposal to improve the generated markup with better nesting and indentation. It consists in three things:

• when using a control block (for or if for example), put them at the same level as their enclosing HTML element
• use the ~ modifier on the left part of those blocks
• use {# -#} after HTML markup to remove white spaces and new lines we may want for readability of the template, but that are not necessary in the HTML

Some downsides:

• this is not how PHPStorm indents Twig by default (I don't know if that can be changed)
• templates are a little bit less readable because of the lack of indentation between a control block and its parent HTML element
• {# -#} blocks clutter templates a bit

[deniak]

Based on a symfony blog post, there's another option using the spaceless filter instead of using the {# -#} which I'm not a big fan of:

<ul class="clean-list" role="list">
{%~ for link in links %}
    <li>
    {%- apply spaceless %}
        <a href="{{ link.url }}" hreflang="{{ 'footer.links.hreflang'|trans({}, 'w3c_website_templates_bundle') }}">
            {{ link.copy|raw }}
        </a>
    {% endapply -%}
    </li>
{%~ endfor %}
</ul>

That said, I'm not sure if making the HTML more readable is worth the hassle and the inspector already indents the code properly.

[jean-gui]

Based on a symfony blog post, there's another option using the spaceless filter instead of using the {# -#} which I'm not a big fan of:

The problem is that the spaceless filter is also deprecated and will be removed in Twig 4, see https://twig.symfony.com/doc/3.x/filters/spaceless.html

That said, I'm not sure if making the HTML more readable is worth the hassle and the inspector already indents the code properly.