Porting contrib themes to Drupal 8: Getting Twig themes

In my spare time over the past few months, I was very busy porting my Drupal theme, Gratis ( link given by me ), to Drupal 8. The process is going well, and most of the things are already working as they are in Drupal 7, but this process led to radical reworking of the theme architecture for two main reasons:

1. Twig is now the basis of the theme for Drupal 8, the PHP Template template handler being one of the main themes for Druapl for many years, is gone.
2. As with most recent major versions of Drupal, the API for Drupal 8 has changed again and this directly affects how you do something in the context of the theme.

Theme and Twig

What does all of this mean? First, you can no longer use PHP code in themeization, this is all Twig. Twig makes temization easier and easier to understand. In Drupal 8, the old template.php file now becomes your theme's .theme file containing special PHP code that is rendered from Twig variables in a twig template. Twig syntax is easy to understand.
For example, in page.tpl.php Drupal 7 we have the base code that displays the block in the region:

<?php if (!empty($page['preface_first'])): ?> <?php print render($page['preface_first']); ?> <?php endif; ?> 

With Twig and Drupal 8, in our page.html.twig template, we can do it like this:

 {% if page.preface_first %} {{ page.preface_first }} {% endif %} 

So, as you can see, Twig is no longer “tipple fips” ( .tpl.php files). The name .html.twig is now permanently for all theme templates. In general, Twig greatly simplifies the way variables are handled. So now where you used

 print render($page['some_var']) 

or

 print render($content['some_var']) 

now just use

 {{ page.some_var }} 

or simply

 {{ some_var }} 

depending on use and location.
Here are the key file naming conventions that were changed in Drupal 8:
Drupal 7> Drupal 8

• MYTHEME.info> MYTHEME.info.yml
• template.php> MYTHEME.theme
• template_name.tpl.php> template_name.html.twig

I was surprised that theme-settings.php was not renamed and how it works hand-in-hand with what template.php used to be. Also, not much has changed in theme-settings.php , it usually works from Drupal 7 without changes, although I could not find a page with a description of the API function system_theme_settings for Drupal 8.
')
Another big change in patterns is that attribute and class arrays were combined together in an attribute object. Before rendering global classes and attributes for body, nodes and comments like:

 class="<?php print $classes; ?>"<?php print $attributes; ?> 

... if you convert word to word for Twig, you get:

 class="{{ classes }}"{{ attributes }} 

However, this is not a fully working version, in fact, in a new way it is announced as follows:

 class="{{ attributes.class }}" {{ attributes }} 

For short, you can just do this:

 {{ attributes }} 

... without outputting specific classes, this one variable does everything. I prefer the first method, as this allows the tag to set its own theme classes, if you want, such as clearfix or whatever.

info theme file

Another important change related to the theme in Drupal 8 is the design of the info file. Now it is formatted in YAML style and analyzed by the symfony YAML component. Converting the info file for Drupal 7 was pretty trivial. I looked at the Bartik implementation and used it as a guide to learn enough to transform Gratis. For example, what was before:

 ; Stylesheets stylesheets[all][] = css/style.css 

will now look like this:

 stylesheets: all: - css/style.css 

Another problem I encountered when porting Gratis is that it seemed there were many conflicting class matches between the new Drupal 8 admin panel and Gratis. It seems that the admin panel uses some very general classes for themeization , such as ul.menu . In the end, I simply pointed out more specific classes in my topic to avoid conflicts.
In general, I did not find full-fledged documentation on the theme in Drupal 8, I had to delve into the files of the main themes of Drupal 8 in order to understand how it all works.

API changes

Converting theme templates to Twig is pretty trivial, updating the user code template.php to MYTHEME.theme is not very. The basis for the transformation of these functions is that some of them are not recommended, they still work, but in the end they will get rid of it. Other functions simply will not work and will throw out errors, how the API has changed for them - completely or there are new functions that need to be replaced. PhpStorm has a nice visual indicator of 8 functions obsolete in Drupal, it is really very convenient.

For example, drupal_add_js and drupal_add_css are obsolete, so you will need to use the #attached method to add any custom JS for your theme. Drupal 8 is now very thin, which means that by default it does not load a lot of Javascript for anonymous users, so now you will need to use hook_library_info to create dependencies to load things like jQuery.once or even drupal.js.

PS
This is my free translation of the article Danny Englander - Porting a Contrib Theme to Drupal 8: Get Twig-gy With It