Drupal 8 Theming Experience

Here’s a round-up of all that I learnt:

Set Classes in Twig templates

{%

  set classes = [

    'node',

    'node--type-' ~ node.bundle|clean_class,

    node.isPromoted() ? 'node--promoted',

    node.isSticky() ? 'node--sticky',

    not node.isPublished() ? 'node--unpublished',

    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,

    'clearfix',

  ]

%}

<article{{ attributes.addClass(classes) }}>

This is a feature introduced in Drupal 8 where we can set classes in the Twig template files. We can add different custom classes based on the conditions and call them to template file. 

Print what you want, when you want, with the ‘without’ filter

In Drupal 7, in order to hide the link or comments we used the “hide” keyword.

{% hide(content.comments) %}

{% hide(content.links) %}

{{ content }}

{{ content.links }}

{% show(content.links) %}




But in Drupal 8, the “without” keyword is used to hide content. Here's an example:




{# Content with links but without comments #}




{{ content|without('comments', 'links') }}

{{ content.links }}

{{ content|without('comments') }}

Twig Blocks

<div{{ attributes }}>

{{ title_prefix }}

{% if label %}

<h2{{ title_attributes }}>{{ label }}</h2>

{% endif %}

{{ title_suffix }}

{% block content %}

{{ content }}

{% endblock %}

</div>

Drupal 8 also has an “extends” feature. This extends the properties of template by calling in your template file.

 {% extends "@stable/block/block.html.twig" %}

{% block content %}

<div class="block-content-wrapper">

{{ parent() }}

</div>

{% endblock %}

You can also take a look at the ‘extend’ documentation, in case you want to explore this feature in detail. 

Libraries

In drupal 8, there is the “libraries” feature where we can add new libraries, remove existing ones and override it. 

# Replace an entire library

  core/drupal.collapse: mytheme/collapsed

  # Replace one particular library asset with another.

  subtheme/library/css/theme/css/layout.css: css/layout.css

  # Remove one particular asset.

  drupal/dialog/css/theme/dialog.theme.css: false

You can also take a look at Scott's presentation, to have a greater understanding of the new theming experience with Drupal 8.