Learn how to retrieve the content of a parent block in twig to render it again in a inherited view.

If you're trying to add some content in a block that already exists in the parent view with twig and you notice that the content only is replaced and the original content dissappears, and you may have ask yourself how to include the original content too ? When a template uses inheritance, it's possible to render the contents of the parent block when overriding a block by using the parent function in twig. But what the **** does that means ? let's explain it with code :

Parent block

For this example we will have a toolbar, this toolbar will be a simple div that haves the following content (located in the base.html.twig file) :

<!DOCTYPE>
<html>
  <head>
    <!-- CSS files and other things here -->
  </head>
  <body>
    {%block content -%}
    {% endblock %}

    {%block toolbar -%}
       <a href="path_to_something">
          User Normal Action 1
       </a>
        <a href="path_to_something">
          User Normal Action 2
       </a>
    {%endblock%}
  </body>
</html>

In this case, our parent block will be toolbar , because we will extend this block in the views without remove its content.

Inherited view

If your inherited view doesn't use a block with an existing name (for example doesn't use toolbar block againg), you'll notice that the block toolbar will be rendered completely as appears in the base.html.twig file :

{% extends '::base.html.twig' %}

{% block content -%}
I'll only change the content of the template but not the toolbar block !
{% endblock content%}

But if you decide to include the toolbar tab in the inherited view, the content of this view will replace the content of the base.html.twig file :

{% extends '::base.html.twig' %}

{% block content -%}
I'll change the content
{% endblock content%}

{% block toolbar -%}
 The actions links will be removed and this will appear instead ! :(
{% endblock toolbar %}

And what i want to have both (the content of base.html.twig toolbar block and the new content ), without write everything in every view that we need, we will use the parent function to include the content of the original block without replace everything.

parent()

This twig function will get the content of the existing block so we can print it again in our inherited view. So , we will have the action links and we will add 2 new buttons without remove the links :

{% extends '::base.html.twig' %}

{% block content -%}
I'll change the content
{% endblock content%}

{% block toolbar -%}
{{parent()}} {# The content of the base.html.twig will be retrieved and printed in this inherited view too#}
 <button type="button">User normal action 3 only in this view</button>
 <button type="button">User normal action 4 only in this view</button>
{% endblock toolbar %}

Note that the parent function needs to be executed in the inherited view (not in the parent).


Senior Software Engineer at Software Medico. Interested in programming since he was 14 years old, Carlos is a self-taught programmer and founder and author of most of the articles at Our Code World.

Sponsors