Twig & the New Drupal 8 Theme Layer

advertisement
Twig & the New
Drupal 8 Theme Layer
Mary J. Winters-Meyer
What we’ll cover
 Why use Twig?
 New Twig syntax
 Differences between Twig and
PHPTemplate
 Themes that have already been
adapted for Twig & Drupal 8
 Where can you learn more?
Why the change?
Syntax
Inconsistency
Complexity
Redundancy
Security
Syntax
Drupal 7 / PHPTemplate:
 Theme .info file
 File: <filename>.tpl.php
 Function: theme_node_links()
Drupal 8 / Twig:
 Theme .info.yml
 File: <filename>.html.twig
 File: node_links.html.twig
Syntax
PHPTemplate docblock:
Twig docblock:
Syntax
Two delimiters in Twig:
 {% … %}
-- executes statements
 {{ … }}
-- prints the result of an
expression
Syntax
Syntax
 Mixed data types in Drupal 7
 String? Object? Array?
Syntax
 Consistent variable access in Drupal 8
 Don’t bother us with types, just print it!
Syntax
 Similarly, multiple ways to print in D7
 Should you use print or print render()?
Syntax
 In D8, just one way to print variables
 Just {{ print.it }}
Syntax
 Printing a variable:
D7: <div class="content"><?php print $content; ?></div>
D8: <div class="content">{{ content }}</div>
 Printing a hash key item
D7: <?php print $item['#item']['alt']; ?>
D8: {{ item['#item'].alt }}
 Assigning a variable:
D7: <?php $custom_var = $content->comments; ?>
D8: {% set custom_var = content.comments %}
 Assigning an array:
D7: <?php $args = array('!author'=>$author, '!date'=>$created);
?>
D8: {% set args = {'!author': author, '!date': created} %}
Syntax
 Do something if there is a comment
D7: <?php if ($content->comments): endif; ?>
D8: {% if content.comments %} {% endif %}
 Do something if comments aren’t empty
D7: <?php if (!empty($content->comments)): endif; ?>
D7: {% if content.comments is not empty %} {% endif %}
 Do something if the comments variable is defined
D7: <?php if (isset($content->comments)): endif; ?>
D8: {% if content.comments is defined %} {% endif %}
 Do something if the count is greater than zero
PHPTemplate: <?php if ($count > 0): endif; ?>
Twig: {% if count > 0 %} {% endif %}
Inconsistency
In Drupal 7:
 Sometimes template files are provided
 Sometimes theme functions are provided
In Drupal 8:
 Only template files are provided
Inconsistency
In Drupal 7, too many places to
override markup!
TEMPLATE FILES
THEME FUNCTIONS
Inconsistency
In Drupal 8, there will be fewer templates
Inconsistency
In Drupal 7
 Sometimes render arrays are used
 Sometimes theme functions are used
In Drupal 8, it’s always render arrays
Complexity
In Drupal 7, there is an incomprehensible
mix of subsystems
Complexity
In Drupal 8, the subsystems have been
organized into a sensible flow
Redundancy
Drupal 7:
Redundancy
Drupal 8, with proper template inheritance:
Redundancy
Many similar templates & functions in D7
Redundancy
Consolidated templates with proper
suggestions in D8
Security
It is possible to print unsanitized data
in Drupal 7!!
Security
Twig can sanitize the variables
automatically in Drupal 8
Security
Database queries can be run directly
from templates in Drupal 7!!
Security
Only “allowed” functions (and filters)
will work in Drupal 8
Major API Changes
New template engine
New theme hooks
Now *Everything* renderable
Markup Utility Functions
Theme component library (maybe?)
Other Wins
 Awesome template inspection
 Awesome variable inspection
 Same templates: front- and back-end*
 In-browser template editing*
 Two-way communication between
code and UI*
Contributors
Want to help out?
 Regular Thursday meetings 6PM CT
 Join online in #drupal-twig on IRC
 Start on a theme in Drupal 8
Resources
 http://www.jenlampton.com/files/twig-iowa-2014-07.pdf
 http://twig.sensiolabs.org/documentation
 https://www.ostraining.com/blog/drupal/twig/
 http://www.undpaul.de/en/blog/2013/02/18/themingdrupal-8-twig-part-1
 https://www.drupal.org/theme-guide/8
 https://www.drupal.org/node/2023177
More Resources
 https://github.com/sqndr/d8-theming-guide
 https://www.acquia.com/blog/ultimate-guide-drupal-8episode-5-front-end-developer-improvements
 Scott Reeves on G+ (Cottser) – posts video of Twig
developer meetings to his wall that you can review
https://github.com/brandonkelly/TwigForDesigners
Acknowledgements
I couldn’t have created this presentation without the help
of all the developers working on implementing Twig in
Drupal 8. Cottser, Joel Pittet, Marc Carver and Morten
DK have always been patient and friendly while
answering my questions.
Jen Lampton deserves a special callout. With her
permission, her slide deck from presenting this
content at other conference helped tremendously in
building mine.
Contact
Mary J. Winters-Meyer
 mjwmeyer@gmail.com
Facebook: http://facebook.com/mjwmeyer
Twitter: @tangitude
Download