Formazione sul theming per drupal 8: partendo da una breve panoramica di che cos'è cambiato rispetto alla versione precedente, vedremo quali sono le novità introdotte con la nuova versione ma soprattutto faremo alcuni esempi pratici utili per chi vuole iniziare a creare un tema per drupal 8 e… vivere sereno!
4. Who are you?
I’m Enrico Sato.
I work in
as frontend developer.
… and I am a Drupal 8 survivor!
5. And… what do you want?
○ What’s new in Drupal 8 themes;
○ Where is…?
○ How to…?
○ Let’s try!
○ Twig: the new template engine;
○ Playing with Twig
6. What’s new in Drupal 8 for
themers
D7
○ PHPTemplate
○ Theme functions +
template files
○ Structured markup in core
and ‘hardcoded’ classes
○ HTML
D8
○ Twig
○ Template files
○ Minimal markup and
classes in core
○ HTML5 in core
7. Theme folder structure
The directory structure
of Drupal 8 has
changed!
https://www.drupal.org/node/2349803
“sites/all/themes…”
MISSING!!
10. Most common theme files
*.info.yml
*.libraries.yml
*.breakpoints.yml
*.theme
Theme folder structure: https://www.drupal.org/node/2349803
11. *.info.yml (ex *.info)
○ A theme must contain an .info.yml file to define the theme.
○ Among other things the .info.yml file defines general
informations, style sheets, and block regions.
○ This is the only required file in the theme.
12. *.libraries.yml
○ The .libraries.yml file is used to define JavaScript and CSS
libraries that can be loaded or not by the theme.
○ Used also to override CSS or JS.
○ A library as a collection of CSS and JS.
https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drup
al-8-theme
https://ffwagency.com/digital-strategies-blog/managing-css-and-javascript-files-drupal-8-libraries
14. *.libraries.yml: drink responsibly!
Be careful:
“global-styling” or “global-js” is
not the only way to add assets!
It’s possible to create different libraries (with CSS and JS) and
use them separately!
https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme
https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module
To see some parameters for single asset: http://www.bradwade.com/drupal8/D8-3-Libraries/
15. *.breakpoints.yml
○ Breakpoints define where a responsive design needs to
change in order to respond to different devices.
○ Breakpoints are defined in a .breakpoints.yml file
HEY! Responsive image module in core!
16. *.theme (ex template.php)
○ The .theme file is a PHP file that contains all the conditional
logic and data (pre)processing of the output.
17. Bye bye theming functions!
ALL GONE: All of the theme() functions have been
converted to Twig templates.
19. The preprocess layer
○ The preprocess layer still exists, but it's used for a different purpose.
○ In Drupal 8, the preprocess layer should not be used to add css classes.
20. The preprocess layer #2
○ This should be
done in the
template files.
https://www.drupal.org/node/2325067
23. Drupal 8 core themes
○ bartik
○ seven
○ stark
○ classy
○ stable
Backwards compatibility
throughout the Drupal 8 cycle
Default admin theme
Default theme
Drupal core markup test theme
24. Drupal 8 core themes: bartik
A flexible,
recolorable
theme with
many regions
and a
responsive,
mobile-first
layout.
The default
theme in
Drupal 8.
25. Drupal 8 core themes: seven
The default
administration
theme for Drupal
8.
Now fully
responsive.
26. Drupal 8 core themes: stark
An intentionally plain
theme with almost
no styling to
demonstrate default
Drupal’s HTML and
CSS.
Stark only outputs
html and css from
modules.
○ Add no CSS
○ Add no templates
27. Drupal 8 core themes: stable
The Stable theme will function as a backwards
compatibility layer for Drupal 8's core markup, CSS and JS.
A theme will always use Stable as the base theme unless
you use another base theme or set
in your theme .info.yml file.
28. Drupal 8 core themes: classy
The classes from core have been moved into the classy
base theme.
Now all template files in core are “classless”.
Is the base theme that Seven and Bartik will extend from.
30. New CSS architecture
SMACSS
Scalable and Modular Architecture for CSS
• Base
• Layout
• Component
• State
• Theme
BEM
Block Element Modifier naming convention
.block__element--modifier
32. Development tools
Before start with theme development (Drupal
development) let’s get some tools:
Drush: http://www.drush.org
Drupal Console: http://drupalconsole.com
Devel module (& Kint): http://drupal.org/project/devel
34. Most useful drush commands:
○ Clear cache
drush cr
○ Download / enable a module
drush en module_name
○ Uninstall a module
drush pm-uninstall module_name
○ HELP ME!
drush help
35. Most useful console
commands:
○ Generate a theme:
drupal generate:theme
○ Generate a module:
drupal generate:module
○ Generate a block:
drupal generate:plugin:block
○ List drupal routes:
drupal router:debug
https://hechoendrupal.gitbooks.io/drupal-console/content/en/index.html
36. Enable debugging:
the manual way
○ Locate services.yml file (sites/default/services.yml)
○ If services.yml does not yet exist copy
default.services.yml and rename it to services.yml
○ Edit the services.yml file and enable one or more of the
debugging options
○ Rebuild cache
37. Enable debugging:
the manual way (continue)
parameters:
twig.config:
# Twig debugging:
debug: true
# Twig auto-reload:
auto_reload: true
# Twig cache:
cache: false
services.ym
l
40. Disable render cache
Drupal caches any rendering it performs for
blocks and entities, to speed up subsequent
page loads.
This means that changes to Twig templates for
these will not take effect immediately.
41. Disable render cache
○ add the following lines at the bottom of settings.php
if (file_exists($app_root . '/' . $site_path . /settings.local.php')) {
include $app_root . '/' . $site_path . /settings.local.php';
}
○ copy sites/example.settings.local.php to
sites/default/settings.local.php
○ clear the Drupal caches.
42. Disable render cache
In settings.local.php:
○ disable the render cache (this includes the page cache).
$settings['cache']['bins']['render'] = 'cache.backend.null';
○ disable Dynamic Page Cache.
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';
43. Devel and Kint
drush dl devel
Kint, the new Krumo
http://raveren.github.io/kint/
44. Let’s try!
○ Create new theme with drupal console;
○ Theme debug on;
○ Add CSS with libraries file;
○ Disable classy libraries;
46. Twig: what & why
What?
○ A template engine for PHP
Why?
○ Twig was created by people behind
Symfony2
○ Drupal 8 uses some components of
Symfony2
47. Twig was chosen because it was the best choice after
comparing various templating languages.
"… We don't have Twig because we have Symfony. It's
more that, we have Twig because it's AWESOME"
- Scott Reeves, @Cottser
“Twig…because it's AWESOME”
52. #2. D8: less complexity
D8 is boring!
https://sqndr.github.io/d8-theming-guide/new-theming-layer/index.html
53. #3. D7: redundancy
There's a lot of duplicated code in themes, we often have multiple files
with the same lines of code.
54. #3. D8: less redundancy
No need to repeat code between templates, we can extend
templates with Twig.
55. #4. Security
D7
In a PHPTemplate file you can print all sort of unsanitized data,
even delete a table from your DB.
D8
In Twig this is not possible, Twig's autoescape feature is enabled by
default.
62. Twig: |Functions (filters custom)
Twig can be extended in many ways; you can add extra
tags, filters, tests, operators, global variables, and
functions.
http://twig.sensiolabs.org/doc/2.x/advanced.html
http://symfony.com/doc/current/templating/twig_extension.html
http://web4pro.net/blog-news/custom-twig-filter/
http://leopathu.com/content/create-custom-twig-filter-drupal-8
65. Twig coding standard (T.c.s.)
○ Generic Twig coding standards:
http://twig.sensiolabs.org/doc/coding_standards.html
○ Twig in Drupal coding standards:
http://drupal.org/node/1823416
66. T.c.s. - HTML attributes
In Drupal core, we will print only the class
attribute specially, all the others will be printed
as part of {{ attributes }}.
The reason for this is that it needs to be very
easy for front end developers to be able to
add a class, anywhere
block.html.twig
67. T.c.s. - Whitespaces
Use the spaceless tag to remove whitespace between HTML tags, not
whitespace within HTML tags or whitespace in plain text.
69. Say me more...
https://www.drupal.org/project/twig_field_value
Filters:
- field_label : Returns the field label value.
- field_value : Returns the render array of the field value(s) without the
field wrappers.
- field_raw: Returns raw field properties value(s).
- field_target_entity: Returns the referenced entity object(s) of an
entity reference field.
71. And so, Twig advantages:
○ a clear separation between the logic and the
view
○ no more PHP code inside your template files
○ it's not only used in Drupal core, so it's not a
Drupaly-thing
72. Let’s try twig so!
○ Override a template;
○ Extend a template;
○ hook_suggestions_hook_alter;
○ Work in a exemple template file.
73. Resources
○ Twig official: http://twig.sensiolabs.org/
○ Theming Drupal 8: https://drupal.org/theme-guide/8
○ The Drupal 8 Theming guide: http://d8.sqndr.com/
More articles
○ Drupal 8 Theming Fundamentals, Part 1
○ Drupal 8 Theming Fundamentals, Part 2
○ A Tale of Two Base Themes in Drupal 8 core