Submitted by chrishu on Mon, 02/01/2016 - 12:55


Twig Blocks and the extend functionality can be used to stop needless repetition.

I have posted before about Twig Blocks and Drupal and experimented a little with a theme on Github used as the base theme for this site, I also raised an issue for consideration of Twig blocks to be added to Core templates as I felt that without them D8 theming had slightly missed a trick (admittedly far too close to the release).

Fortunately the late addition of the Stable theme to D8 makes it much easier to experiment with alternative approaches to theming plus allows Core mark-up to evolve much faster than the Drupal release cycle (without arbitrarily breaking existing themes).

Copy of Stable with Twig blocks

Stable is/was a copy of the Drupal core templates that will not change, it is the default base theme for every theme that does not define a specific base theme unless base theme: false is set in the info file (which would leave you vulnerable to any changes in core templates, CSS and JS over the D8 life-cycle).

I have made a copy of Stable called Blocky and marked up some of the templates with Twig Blocks, which doesn't change the functionality of the theme at all but does allow more selective override of templates directly, after inspecting what blocks are available. For a simple example an alternative node template can just override the mark-up of the title leaving the rest of the parent template mark-up alone (no need to slavishly copy all the bits you don't want to change).

{% extends "@blocky/content/node.html.twig" %}

{% block node_title %}
      {{ title_prefix }}
      {% if not page %}
        <h3{{ title_attributes }}>
          <a href="{{ url }}" rel="bookmark">{{ label }}</a>
      {% endif %}
      {{ title_suffix }}
{% endblock node_title %}

Of course Blocky could always just be used as the basis of another copy, providing a more customised theme with the ability to use Twig extends (do read the official documentation for extends if you haven't used it before). You may have many variations of node templates, any change to boilerplate mark-up that is not generally overridden in child templates only has to be modified once in the parent template that all the others are extending.

Extends is not just for Twig Blocks

Extends allows for adding variables via the child that are then available in the parent template. A child template can affect the parent template or provide new variables to the parent opening up new possibilities for Drupal 8 theming strategies even without using Twig Blocks.

Classy already does this in one or two places now, for example the meat of the Classy field--field-text.htm.twig is as follows:

{% extends "field.html.twig" %}

{% set attributes = attributes.addClass('clearfix', 'text-formatted') %}

In this case a more specific template is adding a class to it's general parent template without having to repeat mark-up. Is your brain starting to whir? Potential new approaches to theming? Excited?

Taking it further

Unfortunately I have not found a client project that is suitable for Drupal 8 yet so experimentation is in free-time. I am hoping to move another blog to Sculpin and then work on a better theme for that and this site that share as much as possible.

Even with Twig Blocks Drupal still has a fairly linear approach to building the front-end, so approaches sometimes used by other frameworks with Twig or Twig like template syntax will need a bit more head-scratching. For example a common approach used elsewhere would use parent layout templates that are never directly rendered, just extended. These layout templates may well have empty Twig Blocks (the main events) that are filled in further down the chain. A Drupally equivalent might be an html.html.twig template that has an empty 'page' block rather than kicking off the rendering of the page by outputting $page. This template could then be extended by multiple variations of page. Note: this approach will not currently work in Drupal but 'should' be possible digging around in pre-processing etc. (well it feels like it should).

Twig has some other tricks like embed and the simpler include and these along with extends can utilise conditionals and variables.... OMG the potential approaches to theming Drupal have increased exponentially!!! :).


Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.