A few thoughts while creating a Drupal 8 theme

It has been almost half a year since I last played with Drupal 8 and Twig. Now, I wanted to approach this subject again and see, where Drupal 8 is, and what it would take me to create a theme for it.

Saying outfront, it is quite easy with Drupal 8. Theming part of FED (Front End Development) is one of the easiest, as far as the learning curve is concerned. (Read my note of encouragement to Drupal 8 Front End Devs).

So, a few observations…

Theme structure is much more logical in Drupal 8

When I say “theme structure” I not only mean theme folder. The separation between configuration, code, and markup has been taken to an entirely new level in Drupal 8. The config is stored in YAML files. Some of it in what used to be the info file, and some in a config folder. YAML from the config folder gets copied to the unified config folder in files/config. More on YAML in Drupal 8 theming.

Markup templates using Twig

Twig won’t let you call php functions and access database from inside templates. It is a very orderly and elegant way of templating, that fits the MVC paradigm handsomely. More on Twig in Drupal.

Preprocess functions

In Drupal 7, it is considered a good practice to not have business logic or formatting in template files. If you have been following that practice all along, then it’s easy with Drupal 8 as well in this aspect. You add variables and change their values through preprocess in Drupal 8, and there is no way around it.

Instead of template.php file, the preprocess functions will now be handled in the *.theme file.

Typed Data API

One of the biggest changes for a Front End Developer, is the change in the Drupal 8 data API, which was moved to Typed Data API https://drupal.org/node/1794140. For Drupal 7, you can drill through your node or comment object like this:

<?php
    $variables
[‘created’] = $variables[‘node’]->created;
?>

The pattern has changed quite drastically for Drupal 8, that has undergone a rework into OOP. A node in Drupal 8 is a fully functional object, that preserves it’s data model, and has scope restrictions. So, to get the created date, I need to do something like this:

<?php
$variables
[‘created’] = $variables['node']->getCreatedTime();   
?>

or

<?php
$variables
[‘created’] =  $variables['node']->created->value;   
?>

As of now, there is very little documentation that covers this significant change. For one helpful instance, see the article at Drupal.org.

Compiled code breaks things more than once in Drupal 8

In Drupal 7, you can allow yourself to do such things as wiping the temp files or even delete the contrib modules folder without problems. But in Drupal 8, you can no longer do that.

In Drupal 8, the core is compiled into php code, and that php code is stored in the files folder in a way, that looks quite like the temporary files, with non-descriptive names like af8c3be7a6...php. Except if you delete them, you will have your system broken badly.


Compiled files added by Drupal 8.

So what get compiled into the files folder? Config, Twig templates, and the service container.

This also means that in some cases, it will no longer be enough to just ‘clear all caches’. There are certain settings available (that go into settings.php) that will help debug Twig.


Additional data added by Twig debugger

I have also had my Drupal 8 dev environment broken more than once, when I tried to pull the fresh code from Drupal repo or update some contrib modules that I have been using. Hopefully, we will see no no such behavior in the final product.

The actual Drupal 8 theme in my Drupal sandbox. http://drupal.org/sandbox/alexrayu/2136071