TWIG - How to override block inside Embed, but in child template?

Question

So, I have 3 templates: 1. Embed Widget with some params, 2. Global layout for every pages, 3. Single page.

I want to make block in Layout which would be overrided by Page, but when I want to put this block inside Embed widget, then it does not work.

file: Widget/awesome.html.twig (Embed widget)

<div id="{{id|default('awesomeWidget')}}">
    {% block widget_body %}
    {% endblock %}
</div>

file: Layout/layout.html.twig

{% block layout_body %}
    {% embed 'AcmeFoobarBundle:Widget:awesome.html.twig' with 
            {'id':'myAwesomeWidget'} only %}
        {% block widget_body %}
            {% block I_WANT_TO_OVERRIDE_THIS %}
            {% endblock %}
        {% endblock %}
    {% endembed %}
{% endblock %}

file: Portal/page.html.twig

{% extends 'AcmeFoobarBundle:Layout:layout.html.twig' %}

{% block I_WANT_TO_OVERRIDE_THIS %}
    Hello World
{% endblock %}

Is this possible to do this idea somehow?

Answer 1

You can't do like this. Embed works like include and extends, so that block I_WANT_TO_OVERRIDE_THIS is actually in your 'extended 'awesome.html.twig'. Page is extending layout.html.twig not the awesome, so there is no I_WANT_TO_OVERRIDE_THIS block for page.html

You should consider changing this to have a placeholder for your widget and embed them on page.html.twig level.

If you really need this way, you can eventually do it like this: In layout.html.twig:

{% set overrideWidgetPart %}
   {% block I_WANT_TO_OVERRIDE_THIS %}{% endblock %}
{% endset %}

{% block layout_body %}
    {% embed 'AcmeFoobarBundle:Widget:awesome.html.twig' with 
            {'id':'myAwesomeWidget', overrideWidgetPart: overrideWidgetPart } only %}
        {% block widget_body %}
            {{ overrideWidgetPart  }}
        {% endblock %}
    {% endembed %}
{% endblock %}

Answer 2

The accepted answer helped me figure out a similar case where I'm using an embed inside of an embed and I wanted to be able to inject html in the child embed block.

If you look in users.html you'll see I use {% set footer %}{% endset %} which allows me to pass the html into the child embed {% block footer %} block.

users.html

{% embed 'user_widget.twig'
    with { user: user } only %}        
    {% set footer %}
        <div class='footer'>content here</div>
    {% endset %}
{% endembed %}

user_widget.twig

{% embed 'user_widget.tpl' with {
    open: true,
    id: user.uid
}%}
    <div class='user_header'>{{ user.name }}</div>    
    {% block content %}
        {% embed "user_info.twig" with {
            id: user.id,
            photo: user.picture,
            footer_html: footer} only %}
                {% block footer %}{{ footer_html }}{% endblock %}
        {% endembed %}
    {% endblock %}
{% endembed %}

user_info.twig

<div class='user_info' id='{{ id }}'>
    <img class='user_photo' src='{{ photo }}'>    
    {% block footer %}{% endblock %}
</div>