Michael Michael - 3 months ago 27
Twig Question

Twig: {% block %} and extend

I am trying to override a {% block %} in a file (index.html.twig) that extends the file where the block is used (base.html.twig). But the extending file is including another twig file (feature.twig) where the block that overrides the content in index.html.twig is placed.
Is that possible in any way? Maybe with something else than the include statement?

{# index.html.twig #}
{% extends 'base.html.twig' %}
{{ include('feature.html.twig') }}

{# base.html.twig #}
{% block extraJs %}{% endblock %}

{# feature.html.twig #}
{% block extraJs %}<script>$('...');</script>{% endblock %}

Answer

The include-function (or tag) only ever embeds the rendered result. It is not possible to manipulate blocks in the including file.

But in your case this is not necessary. Because index.html.twig extends base.html.twig, you can overwrite the block extraJs like so:

{# index.html.twig #}
{% extends 'base.html.twig' %}

{% block extraJs %}
    {{ include('feature.html.twig') }}
{% endblock }

If needed you can extend the original block by using the parent-function. E.g.:

{# index.html.twig #}
{% extends 'base.html.twig' %}

{% block extraJs %}
    {{ parent() }} {# `extraJs`-block content from `base.html.twig` #}
    {{ include('feature.html.twig') }}
{% endblock }