title: What is correct way of inserting wagtail streamfield block dependencies into the template?
body: <p>I rely on template inheritance system to insert <code>extra_css</code> and/or <code>extra_js</code> into my pages:</p>
  
  <p><strong><em>base.html</em></strong>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;!-- Core CSS --&gt;
  
          {% block extra_css %}
              {# Override this in templates to add extra stylesheets #}
          {% endblock %}
  
      &lt;/head&gt;
      &lt;body&gt;
  
          {% block content %}{% endblock content %}
  
          &lt;!-- Core JS --&gt;
  
          {% block extra_js %}
              {# Override this in templates to add extra javascript #}
          {% endblock extra_js %}
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong><em>page.html</em></strong>:</p>
  
  <pre><code>{% extends "base.html" %}
  
  {% block extra_css %}
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /&gt;
  {% endblock %}
  
  {% load wagtailcore_tags wagtailimages_tags %}
  
  {% block content %}
  &lt;div class="blog-post"&gt;
  
    &lt;!-- Custom HTML --&gt;
  
    {% block content %}
    {% include_block page.body %}
    {% endblock %}
  
  &lt;/div&gt;&lt;!-- /.blog-post --&gt;
  {% endblock %}
  
  {% block extra_js %}
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  // Custom JavaScript
  
  &lt;/script&gt;
  {% endblock extra_js %}
  </code></pre>
  
  <p>This works great, thus extra css/js is indeed inserted where it belongs.</p>
  
  <p>The problem arise if I need to use <code>streamfield</code> where one of its block templates need custom css/js. In this case custom resources are inserted along with the block, but not in the specified locations in the <em>base.html</em>.</p>
  
  <p>For instance if <code>extra_js</code> from the <em>page.html</em> in the example above has been added to the block template instead, then <code>select2</code> would complain about <code>jquery</code> not being present and it would be totally right, because it's inserted with the block, but not as intended after the <em>Core JS</em> libraries.</p>
  
  <p>Loading <code>jquery</code> twice leads to other issues: <a href="https://stackoverflow.com/a/25782679/2146346">https://stackoverflow.com/a/25782679/2146346</a></p>
  
  <p>Other option is to load all block dependencies into the page, but it would fill pages with redundant resources as not every block from the <code>streamfield</code> might be used on the page.</p>
  
  <p>Are there other options?</p>