<p>Unfortunately, there's no way around having the <code>{% block %}</code> tag <em>somewhere in the template that's being extended</em>. In other words, your main layout template it's going to have <code>{% block %}</code> tags.</p>

<p>However, you <em>can</em> use the <code>{% embed %}</code> tag to "wrap" a block in a third template (e.g. "components/main-wrapper.html"):</p>

<pre><code>{# base.html #}
&lt;body&gt;
    {% block main %}{% endblock %}
&lt;/body&gt;

{# components/main-wrapper.html #}
&lt;main id="main-wrapper" role="main"&gt;
    &lt;div class="container"&gt;
        {% block content %}{% endblock %}
    &lt;/div&gt;
&lt;/main&gt;

{# news/entry.html #}
{% extends 'base.html' %}

{% block main %}
    {% embed 'components/main-wrapper' %}
        {% block content %}This is my awesome main content{% endblock %}
    {% endembed %}
{% endblock %}
</code></pre>

<p>The result will look like this:</p>

<pre><code>&lt;body&gt;
    &lt;main id="main-wrapper" role="main"&gt;
        &lt;div class="container"&gt;This is my awesome main content&lt;/div&gt;
    &lt;/main&gt;
&lt;/body&gt;
</code></pre>

CC BY-SA 3.0
2016-03-10T18:46:45.873Z
Quite similar method to what I figured out just by fiddling around!

Instead of embedding, I managed to use a {% block wrappedContent %} in the layout, where the {% block content %} is swallowed inside the main-wrapper.twig :)
Ole
CC BY-SA 3.0
2016-03-10T17:25:48.880Z
2016-03-10T17:25:48.880Z
Mats Mikkel Rummelhoff
<p>It seems to be what you need is Twigs <a href="http://twig.sensiolabs.org/doc/tags/extends.html" rel="nofollow">extend</a> functionality. What you have here is a very common template structure so there is nothing out of the ordinary!</p>

<p>Firstly, going from your code I'd recommend your main layout template file looks something like this. The idea here being that these elements will not change for each page, but the content or information displayed inside them will. This template file is where you would also load in your CSS, Javascript etc.</p>

<pre><code>&lt;body&gt;
    {% include 'components/header' %}

    &lt;main class="main"&gt;
        {% block content %}{% endblock %}
    &lt;/main&gt;

    {% include 'components/footer' %}
&lt;/body&gt;
</code></pre>

<p>Say you have a page that will sit on <code>www.yoursite.co.uk/about</code>. You could create a template file in your templates folder called <code>about.twig</code>, and to use your base template file it would look something like this:</p>

<pre><code>{% extends "path/to/main/layout" %}

{% block content %}

    &lt;p&gt;The content for your about page&lt;/p&gt;

{% endblock %}
</code></pre>

<p>Hope that clears it up for you!</p>

CC BY-SA 3.0
2016-03-10T10:50:57.340Z
Afraid you either missed my point, or that my point is unclear to being with...

In your first code block, where the <body> tag is in, I'm trying to avoid having a {% block content %} inside it.

I want the {% block content %} to be inside an included component, you see? :)
Ole
CC BY-SA 3.0
2016-03-10T11:01:46.887Z
I can't say I'm following why you would like to have `{% content %}` inside a component file like this. Site content is a global thing so I personally would have the content block in your main layout template, so you can then define the content for each page from the main layout. I'll leave my answer on and I'll see what other people come back with!
Jamie Wade
CC BY-SA 3.0
2016-03-10T10:44:03.340Z
2016-03-10T10:44:03.340Z
Jamie Wade
<p>I'm fiddling around with Twig and CraftCMS, trying to create a component-based structure... of sorts.</p>

<p>All good so far, except this one thing I got stuck on.</p>

<p><br/>
Here's an excerpt from my main layout:</p>

<pre><code>&lt;body&gt;
    {% include 'components/header.twig' %}

    {% block content %}
        woops...
    {% endblock %}

    {% include 'components/footer.twig' %}
&lt;/body&gt;
</code></pre>

<p>Which currently works.</p>

<p>But, I'd like to do something like this...</p>

<pre><code>&lt;body&gt;
    {% include 'components/header.twig' %}
    {% include 'components/main-wrapper.twig' %}
    {% include 'components/footer.twig' %}
&lt;/body&gt;
</code></pre>

<p>Where the main-wrapper.twig is like this, for example:</p>

<pre><code>&lt;main class="main"&gt;
    {% block content %}
        woops... 
    {% endblock %}
&lt;/main&gt;
</code></pre>

<p>But it does not work. "woops..." from main-wrapper.twig is displayed.</p>

<p><br/><br/></p>

<p>I've tried a different route without success as well: </p>

<pre><code>&lt;body&gt;
    {% include 'components/header.twig' %}

    {% embed 'components/main-wrapper.twig' %}
        {% block children %}
            {# I want to have the block content here... #}
        {% endblock %}
    {% endembed %}

    {% include 'components/footer.twig' %}
&lt;/body&gt;
</code></pre>

<p>Where the main-wrapper.twig has a block named children instead... but no dice.</p>

<p><br/><br/></p>

<p>It does appear that what I'm trying to do is not possible, which is why I'm asking here as a last resort :)</p>

<p><br/><br/><br/>
<strong>EDIT:</strong></p>

<p>For those interested, here's what I ended up with, stripped for clarity:</p>

<pre><code>{# default.twig - default layout #}

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
       ...
    &lt;/head&gt;
    &lt;body&gt;
        {% include 'components/header.twig' %}
        {% block wrappedContent %}{% endblock %}
        {% include 'components/footer.twig' %}
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><br/></p>

<pre><code>{# regular.twig - base page referred in the admin panel #}

{% extends "components/main.twig" %}

{% block content %}
    --- stuff for a page ---
{% endblock %}
</code></pre>

<p><br/></p>

<pre><code>{# main.twig - wrapper component! :D #}

{% extends "layouts/default.twig" %}

{% block wrappedContent %}
    &lt;main class="main"&gt;
        &lt;div class="main__wrapper"&gt;
            {% block content %}
                wooops...
            {% endblock %}
        &lt;/div&gt;
    &lt;/main&gt;
{% endblock %}
</code></pre>

<templating><block-types><blocks><extends><layout>
Send a block... into a block?
# Send a block... into a block?

(Asked by: username_0 on 2016-03-10)

I'm fiddling around with Twig and CraftCMS, trying to create a component-based structure... of sorts.
All good so far, except this one thing I got stuck on.

Here's an excerpt from my main layout:

    {% include 'components/header.twig' %}

    {% block content %}
        woops...
    {% endblock %}

    {% include 'components/footer.twig' %}


Which currently works.
But, I'd like to do something like this...

    {% include 'components/header.twig' %}
    {% include 'components/main-wrapper.twig' %}
    {% include 'components/footer.twig' %}


Where the main-wrapper.twig is like this, for example:

    {% block content %}
        woops... 
    {% endblock %}


But it does not work. "woops..." from main-wrapper.twig is displayed.

I've tried a different route without success as well: 

    {% include 'components/header.twig' %}

    {% embed 'components/main-wrapper.twig' %}
        {% block children %}
            {# I want to have the block content here... #}
        {% endblock %}
    {% endembed %}

    {% include 'components/footer.twig' %}


Where the main-wrapper.twig has a block named children instead... but no dice.

It does appear that what I'm trying to do is not possible, which is why I'm asking here as a last resort :)

EDIT:
For those interested, here's what I ended up with, stripped for clarity:
{# default.twig - default layout #}



    
       ...
    
    
        {% include 'components/header.twig' %}
        {% block wrappedContent %}{% endblock %}
        {% include 'components/footer.twig' %}
    



{# regular.twig - base page referred in the admin panel #}

{% extends "components/main.twig" %}

{% block content %}
    --- stuff for a page ---
{% endblock %}


{# main.twig - wrapper component! :D #}

{% extends "layouts/default.twig" %}

{% block wrappedContent %}
    
        
            {% block content %}
                wooops...
            {% endblock %}
        
    
{% endblock %}

**Tags:** templating, block-types, blocks, extends, layout

---

## 2 answers

### Answer by username_1 on 2016-03-10. Score: 3 | Accepted answer

Unfortunately, there's no way around having the {% block %} tag somewhere in the template that's being extended. In other words, your main layout template it's going to have {% block %} tags.
However, you can use the {% embed %} tag to "wrap" a block in a third template (e.g. "components/main-wrapper.html"):
{# base.html #}

    {% block main %}{% endblock %}


{# components/main-wrapper.html #}

    
        {% block content %}{% endblock %}
    


{# news/entry.html #}
{% extends 'base.html' %}

{% block main %}
    {% embed 'components/main-wrapper' %}
        {% block content %}This is my awesome main content{% endblock %}
    {% endembed %}
{% endblock %}

The result will look like this:

    
        This is my awesome main content

> **Comments:**
> **username_0**: Quite similar method to what I figured out just by fiddling around!  Instead of embedding, I managed to use a {% block wrappedContent %} in the layout, where the {% block content %} is swallowed inside the main-wrapper.twig :)  

---

### Answer by username_2 on 2016-03-10. Score: 4

It seems to be what you need is Twigs extend functionality. What you have here is a very common template structure so there is nothing out of the ordinary!
Firstly, going from your code I'd recommend your main layout template file looks something like this. The idea here being that these elements will not change for each page, but the content or information displayed inside them will. This template file is where you would also load in your CSS, Javascript etc.

    {% include 'components/header' %}

    
        {% block content %}{% endblock %}
    

    {% include 'components/footer' %}


Say you have a page that will sit on www.yoursite.co.uk/about. You could create a template file in your templates folder called about.twig, and to use your base template file it would look something like this:
{% extends "path/to/main/layout" %}

{% block content %}

    The content for your about page

{% endblock %}

Hope that clears it up for you!

> **Comments:**
> **username_0**: Afraid you either missed my point, or that my point is unclear to being with...  In your first code block, where the <body> tag is in, I'm trying to avoid having a {% block content %} inside it.  I want the {% block content %} to be inside an included component, you see? :)  
> **username_2**: I can't say I'm following why you would like to have `{% content %}` inside a component file like this. Site content is a global thing so I personally would have the content block in your main layout template, so you can then define the content for each page from the main layout. I'll leave my answer on and I'll see what other people come back with!  

---

