eleventy: What is the best way to pass a block from a layout to a parent layout?

Default support for blocks would be super nice.

In the mean time, I’ve set up these tags to recreate similar functionality, maybe it’s of help to someone else.

module.exports = function (eleventyConfig) {

    const layoutblocks = [];

    eleventyConfig.addShortcode('renderlayoutblock', function(name) {
        return (this.page.layoutblock || {})[name];
    });

    eleventyConfig.addPairedShortcode('layoutblock', (content, name) {
        if (!this.page.layoutblock) this.page.layoutblock = {};
        this.page.layoutblock[name] = content;
    });

}

Define a layoutblock block with name foo like this in the layout template:

{% renderlayoutblock 'foo' %}

Set the contents of layoutblock with name foo in a document like this:

{% layoutblock 'foo' %}
Hello World
{% endlayoutblock %}

Oh, looks like @zachleat already answered this is “by design”: https://github.com/11ty/eleventy/issues/834#issuecomment-569474008

That’s not why I understood when reading the Addendum about existing Templating features, maybe we could rephrase it.

@rikschennink @gluecksmensch as we showed before in the thread, you can use Nunjucks’ {% extend … %} directly, without additional shortcode, but you can’t use Eleventy’s layout Front Matter with it.

I do this here for example: https://github.com/nhoizey/precious-prana.com/blob/master/src/_includes/layouts/evenement.njk#L2

And here’s the base.njk layout definig blocks: https://github.com/nhoizey/precious-prana.com/blob/master/src/_includes/layouts/base.njk

Default support for blocks would be super nice.

In the mean time, I’ve set up these tags to recreate similar functionality, maybe it’s of help to someone else. […snip]

(Edit: sorry, @gluecksmensch, it didn’t work for me without the .page. Not sure why…) Thanks so much @rikschennink This works for me also 👍 Though for me it was also outputting undefined where I was using the blocks (or had no content in the block) so I modified it slightly. Hopefully it helps someone:

module.exports = function (eleventyConfig) {

  eleventyConfig.addShortcode('renderlayoutblock', function(name) {
    return (this.page.layoutblock || {})[name] || '';
  });

  eleventyConfig.addPairedShortcode('layoutblock', function(content, name) {
      if (!this.page.layoutblock) this.page.layoutblock = {};
      this.page.layoutblock[name] = content;
      return '';
  });
}

Usage reminder (thanks again, @rikschennink): Define a layoutblock block with name foo like this in the layout template:

{% renderlayoutblock 'foo' %}

Set the contents of layoutblock with name foo in a document like this:

{% layoutblock 'foo' %}
Hello World
{% endlayoutblock %}

This is not well documented. Some starter projects examples use the {% extends ... %} approach and some use the YML frontmatter approach. Specially when it comes to choosing between mardown index vs template-engine index. It’s realy weird that you can have frontmatter and Pug (e.g) in the same file, but Pug blocks won't be assimilated as they should. This is basically changing the engines’ default functionality and introducing unexpected behaviour without mentioning it.

@gluecksmensch good one.

Previous iteration I stored data in const layoutblocks = [] but that didn’t work ( obviously 😄 ) forgot to remove.

I guess with my templates page is defined, didn’t realise this wasn’t always the case, nice improvement 👍

@rikschennink Thanks for the suggestion! this.page.layoutblock doesn’t work because this.page is undefined. And the variable const layoutblocks = [] is obsolete as it’s not used. But this worked for me:

module.exports = function (eleventyConfig) {

    eleventyConfig.addShortcode('renderlayoutblock', function(name) {
        return (this.layoutblock || {})[name];
    });

    eleventyConfig.addPairedShortcode('layoutblock', (content, name) {
        if (!this.layoutblock) this.layoutblock = {};
        this.layoutblock[name] = content;
    });
}

If I recall correctly, in Eleventy, Nunjucks happily passes content through to the specified layout without using extends if you are just populating the content. When you have multiple blocks that you wish to pass through to a layout, then you need to use extends.

At least, this seems to work for me™

I’m struggling to find the documentation I thought had lead me to that conclusion.