Twig for Drupal 8

‣ Introduction‣ A bit of history‣ Why change?‣ Pros and cons

‣ Some examples

‣ Twig syntax

‣ Debugging twig

2

3

About Wizzlern

Wizzlern

‣ 100% Drupal

‣ Drupal training and consultancy‣ Front-, backend-development ‣ Drupal introduction and editors ‣ System management

‣ Since 2009

‣ Involved with the Drupal community

4

Twig for Drupal 8The overhaul of Drupal’s theme layer

5

A bit of history

‣ Dec. 2011: Frustrations over D7 theme system boiled up (again)

‣ Feb./March 2012: Alternatives discussed

‣ April 2012: Code sprints

‣ June 2012: Twig engine landed in core

6

Why change?

‣ Inconsistent data structure(Render Array, Markup, Wrappers)

‣ Many levels of processing ((pre)process, (pre)render, theme-function or template)

‣ It’s so hard to make changes.

‣ Problem summary: http://jacine.net/post/19652705220/theme-system

7

And the winner is...

‣ Twig is a modern template engine for PHP

‣ Fast, secure, flexible

8

Twig

Why Twig?

‣ Pros‣ Mature, well-tested, used in other major

platforms too (Zend Framework, CodeIgniter, CakePHP)

‣ Improved security‣ Easy syntax

‣ Cons‣ New language to lean, extra learning curve‣ Migration required by module maintainers and

site builders

9

More improvements

‣ Cleaner templates

‣ Consistent method to override output

‣ Debugging built-in

‣ IDE support

‣ A bit quicker theme development (my prediction)

10

And more...

‣ Performance: Minimal changes expected.

‣ Learning curve: The easy got easier (overrides) butthe hard is still hard (Render Array).

‣ Object oriented

11

A few examples

12

Old: block.tpl.php

13

New: block.html.twig

14

Old: theme_breadcrumb()

15

New: breadcrumb.html.twig

16

17

Twig syntax

Syntax

‣ {{ ... }} Prints something‣ Prints a variabele or the result of an

expression‣ Prints text, but also Render Array content.

‣ {% ... %} Controls something‣ Controls the execution of a template, e.g.

conditions and loops‣ {# ... #} Does nothing

‣ Descriptions and comments

18

Functions

{{ example(...) }}

Twig functions:

‣ cycle()

‣ dump()

‣ join()

‣ ...

Drupal functions:

‣ hide()

‣ show()

19

‣ http://twig.sensiolabs.org/doc/functions/index.html

Filters

{{ ... | example }}

{{ ... | example(...) }}

Twig filters:

‣ first, last,

‣ lower, upper,

‣ raw, escape, ...

Drupal filters:

‣ t

20

‣ http://twig.sensiolabs.org/doc/filters/index.html

aggregator-feed-source.html.twig

21

node.html.twig

22

aggregator-item.html.twig

23

t filter

24

{{ 'Add new comment'|t }}

{{ 'Last checked: @time ago'|t({'@time': time}) }}

Control structuresif-else, for

25

if-else condition

26

{% if new is defined %} <mark class="new">{{ new }}</mark>{% endif %}

‣ {% if ... %}

‣ {% else %}

‣ {% endif %}

for loop

27

{% for item in breadcrumb %} {% if loop.first %} <li>{{ item }}</li> {% elseif loop.last %} <li>{{ item }}</li> {% else %} <li>{{ item }} » </li> {% endif %}{% endfor %}

‣ {% for ... in ... %}

‣ {% endfor %}

Debugging Twig

28

Debugging Twig

{{ dump(...) }}

‣ Twig options in settings.php:‣ $settings['twig_debug']‣ $settings['twig_auto_reload']‣ $settings['twig_cache']

‣ About debugging variables in Twig templates:http://drupal.org/node/1906780

29

settings.php

$settings['twig_debug'] = TRUE;

Output in DOM:<!-- THEME DEBUG --><!-- CALL: theme('region') --><!-- FILE NAME SUGGESTIONS: * region--content.html.twig x region.html.twig -->

‣ Only for templates used in your theme.

30

settings.php

$settings['twig_auto_reload'] = TRUE;

‣ Templates will be recompiled when called.

$settings['twig_cache'] = FALSE;

‣ Templates will not be cached. Usually twig_auto_reload = TRUE is sufficient.

31

Template cache

32

Note: By default no read access to files/php.

Demo

33

Twig demo

‣ Debug options in settings.php

‣ Debug output in DOM

‣ Template override

‣ Modify node output

34

Some more theming goodies

35

Theme layer changes

‣ Your preprocess functions now go into: THEMENAME.theme file (#1967614)

‣ Options to override or delete CSS files added by modules or base themes (#1876600).

‣ More theme functions accept render elements. e.g. theme_item_list(), l() (#891112, #1987114)

36

D8 Mobile Initiative

‣ Responsive design

‣ Visual breakpoint editor

‣ Responsive tables

‣ <picture> element added

‣ jQuery 1.9 included

‣ IE8 no longer supported

‣ Improved CSS standards, incl. SMACCS

37

That’s all folks

‣ Twig documentation: http://twig.sensiolabs.org/doc/templates.html

‣ Contribute to Drupal 8 twig development: http://lb.cm/twig

‣ These slides:http://wizzlern.nl/drupaljam2013-twig

38

This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/.

39

http://wizzlern.nlTwitter: @wizzlern