Inherited theme : make it possible to customize specific blocks from base.html.twig

[olivierdalang]

Hi !

When building a theme that inherits Antimatter, I think there's no clean way to customise a specific block of the base template.

You can only create a partials/base.html.twig file in the subtheme to overwrite the base layout, but then you overwrite the whole file (which means you have to copy all the content of the base theme, which is bad in terms of updatability).

A much cleaner way would be to be able to override a specifc block only. This would be very easy to achieve with a small modification to Antimatter. It would need to move the content of partials/base.html.twig to a new partials/abstract_base.html.twig, and to set the content of partials/base.html.twig to {% extends 'partials/abstract_base.html.twig' %}.

Then, child themes could override some blocks, by providing their own partials/base.html.twig, containing for example :

{% extends 'partials/abstract_base.html.twig' %}

{% block footer %}
<footer id="footer">
    MY FOOTER
</footer>
{% endblock %} 

This way, if the antimatter theme is updated, all the rest of the base layout is kept.

I'm not completely sure, but I think this would be perfectly retro-compatible. What do you think ? If you like it, I can issue a PR.

Bests,

Olivier

[rhukster]

I'm not really seeing the advantage of this, your just moving the bulk of the logic from partials/base.html.twig to partials/abstract_base.html.twig. Your still extending the base file and overriding a block. You do that anyway when you extend the partials/base.html.twig` of the base theme.

[olivierdalang]

Note : I'm talking about theme inheritance capability here. The proposed change has no effect on antimatter itself.

From what I understood, when creating a themes that inherits antimatter, you can override partials/base.html.twig to change things like the footer. But to do so, you need to copy the whole file, and can't just override specific twig blocks.

From what I understood, it's not possible to do something like (in mytheme/templates/partials/base.html.twg, if mytheme extends antimatter) :

{% extends '../../antimatter/templates/partials/base.html.twg' %}

{% block footer %}
my nice and new footer
{% endblock %}

because grav theme's inheritance happens before twig processing.

[guategeek]

I agree that this should be changed, as the current behaviour doesn't really fulfill theme inheritance. I for example want to only change one line out of base.html.twig but with the current setup I have to have a duplicate file with all 67 lines in my inherited theme.

The ability to extend or replace a block on a file in my inherited theme would make the functionality much more like cascading in CSS.

[lcharette]

From what I understood, it's not possible to do something like (in mytheme/templates/partials/base.html.twg, if mytheme extends antimatter) :

{% extends '../../antimatter/templates/partials/base.html.twg' %}

{% block footer %}
my nice and new footer
{% endblock %}

Note Twig support namespaced path for this exact purpose, but it would probably needs some changes to Grav template logic loading : https://symfony.com/doc/current/templating/namespaced_paths.html

[lcharette]

From what I understood, it's not possible to do something like (in mytheme/templates/partials/base.html.twg, if mytheme extends antimatter) :

{% extends '../../antimatter/templates/partials/base.html.twg' %}

{% block footer %}
my nice and new footer
{% endblock %}

Note Twig support namespaced path for this exact purpose, but it would probably needs some changes to Grav template logic loading : https://symfony.com/doc/current/templating/namespaced_paths.html

For anyone ending up here from Google, a solution using Twig namespaces path is now available in Grav Twig Cookbook: https://learn.getgrav.org/16/cookbook/twig-recipes#extend-base-template-of-inherited-theme

See getgrav/grav-learn#888 & getgrav/grav-theme-quark#95 (comment)

(Thanks @luuuke & @Karmalakas btw!)