Plan to implement {{block.super}}

[maogongzi]

Hello, thanks for your hard works! currently I'm using nunjucks in our frontend project(mock server with express), but I have a plan to migrate to liquidjs instead, because our Backend is also using liquid, some of their syntax differencies bother me a lot because each time I have to manually adjust nunjucks templates to standard liquid syntax before sending them to backend developers, I have searched a lot and finally found liquidjs, really amazing, but I really miss the {{block.super}} syntax, since we have already supported "block", I would like to know do we have some plan to implement it as well? It would be a huge benefit and I think some others might also have the same question as me :)

[harttle]

One of the primary goals of liquidjs is to keep compatible with the ruby version. It will be a great feature, but could you answer the following questions before we introduce this feature to the core:

1. Is this feature listed in the Shopify Liquid documentation?
2. Has the ruby version implemented it?

[maogongzi]

hi @harttle , thanks for pointing out that I should dig into Liquid docs first, I looked through their official Github repo, wiki and also websites and didn't find any sign indicating they will implement it now or later, yet I did find this long period issue which is still not fully resolved since it opened years ago, in which there is a discussion whether to implement the Django-style compatible inheritance system, but since there isn't any further progress been made, there isn't any other place I could find more information about it for now, so the answers are:

1. no, it's not listed in Liquid's official milestone/docs
2. no, yet an issue can be taken as a reference, but seems it' wouldn't work since conflicts haven't been resolved.

and back to the issue itself, I think since we've already got 'layout' and 'block' tags, it would be nice to have block.super implemented as well :)

[harttle]

If I understand correctly, block.super is used to refer to the parent template's scope (i.e. the template indicated by{%layout xxx.html%}). In the current implementation of liquidjs, the scope inheritance is based on the Tag (eg. layout/include/for,...) call stack, which means:

1. A template included by include(or retrieved by layout) tag will automatically inherit the current template's scope.
2. Variables within the child scope will hide the corresponding variable with the same name in parent's scope.

Is this inheritance direction (child -> parent via the layout tag) is what you expected? If it's true, what we need to do is just exposing the parent scope via block.super. Else maybe you need implement a separate layout tag. Or is there any good ideas?

[harttle]

Closing since not documented by shopify liquid, and not clear how it works. If there's a specific document or a clear requirement to this feature, I'll reopen this issue.

[rdmurphy]

Hello @harttle! 👋 I was hunting around to see if this feature had already been mentioned and ended up here.

I do wonder if this is something that may be reconsidered (AFAICT it still does not exist in Ruby Liquid). However, I do think the value of having something like {{ block.super }} may have been a little muddled back in 2017.

As it exists in Django, {{ block.super }} is a way to tap into the contents of a block as it exists in a parent layout without overriding it, but it does not attempt to mix the parent or child scopes. As explained here in Django docs (emphasis mine):

If you need to get the content of the block from the parent template, the {{ block.super }} variable will do the trick. This is useful if you want to add to the contents of a parent block instead of completely overriding it. Data inserted using {{ block.super }} will not be automatically escaped (see the next section), since it was already escaped, if necessary, in the parent template.

(This also exists in the Jinja2-inspired Nunjucks as the {{ super() }} function.)

What I've commonly used this to do is append or prepend markup that has been defined in a parent layout's block without overriding it. A good example of this with CSS linking:

Parent layout: base.html

{% block css %}
<link href="base.css" rel="stylesheet">
{% endblock css %}

Child page: index.html

{% layout "base.html" %}

{% block css %}
{{ block.super }}
<link href="extra.css" rel="stylesheet">
{% endblock css %}

Output

<link href="base.css" rel="stylesheet">
<link href="extra.css" rel="stylesheet">

What's nice about this is you can define some defaults or base values in a block that the inheriting template can choose to overwrite or add to as needed. As provided in the two scenarios I am familiar with (Django and Nunjucks) there is never the intention that the parent and child pages' scopes combine or interact in any way — either the as-rendered contents of the parent page's block is rendered as-is where {{ block.super }} was called, or it's overwritten by the contents of the child page's contents of the block.

I believe this is can be very helpful for defining blocks in a parent layout with smart defaults that a child page can augment instead of completely overwrite (or as it often happens, content that appeared in the parent's block gets copy-pasted to the child page's block because it needed the exact same content + an extra line on the end).

[harttle]

Now supported on @9.20.0, thank you guys.