In theory, I understand the purpose of adding deferred
on the twig blocks. I’ve read the release and also the documentation under Asset Manager.
In practice, though, I’m not seeing any difference and I think I have to be missing something. I will use the Quark theme as an example.
In base.html.twig
, there’s this block:
{% block assets deferred %}
{{ assets.css()|raw }}
{{ assets.js()|raw }}
{% endblock %}
From reading the documentation, it sounds like this means I can add assets in templates that extend
base.html.twig
, such as {% do assets.addCss('theme://css/my-custom.css') %}
, and it will be included in the rendering in the assets
block because its rendering is “deferred”.
However, I’m finding that it doesn’t matter if that block has deferred
. In blog.html.twig
, there’s a block:
{% block stylesheets %}
{% do assets.addCss('theme://css/bricklayer.css') %}
{{ parent() }}
{% endblock %}
But the output is the same whether I include deferred
on base
's assets
block. I believe this is because it’s extending base
's stylesheets
block. It adds bricklayer.css
then includes base
's content via parent()
.
I’m also finding it unnecessary to wrap the do
call inside of the stylesheets
block. By remove that block in blog.html.twig
and replacing it with just a simple
{% do assets.addCss('theme://css/bricklayer.css') %}
… and it still renders all the css correctly. This doesn’t surprise me because I would expect the {% block assets deferred %}
to render at the end of the cycle. But I can remove deferred
and again, everything works totally as expected.
Where I do see it working as I would expect is in partials/hero.html.twig
. This partials is included via the include
twig function. If assets
is deferred, adding {% do assets.addCss('theme://css/my-custom.css') %}
works. However, it won’t be included when I remove deferred
. This is expected and is how I understand its purpose. But only in the include
d file, blog.html.twig
still renders assets with/without deferred
.
Then, when creating a modular hero
page (which uses the same partial as above), the assets are not included. I’ve encountered this before in previous Grav versions, but it sounds like the magic of deferred
should fix the problem of being able to add assets inside of a modular page.
In summary, my first [simple] question/verification is, is it necessary to include/extend the entire stylesheets
block in blog.html.twig
? Couldn’t that be replaced with a simple single do
call and include the priority
if I wanted?
The second part being, does the deferred
flag only resolve problems of files include
d in templates that extend a template that includes a deferred
block? Can someone give me another example of where deferred
is necessary for things to render correctly?
If you read all of this, thank you!!