El documento aborda la evolución de los temas en Drupal 8, destacando la importancia de Twig para los themers y su capacidad para simplificar la personalización de plantillas. Se explica cómo la organización de archivos CSS y las mejoras en la API de Drupal 8 reducen la complejidad y redundancia en comparación con Drupal 7. Al final, se concluye que con Drupal 8, los themers pueden trabajar con mayor satisfacción y eficiencia.

1. Twig y otros «themas» en Drupal 8:
quiénes somos, de dónde venimos...

2. Quienes somos
Cristina
Chumillas
@chumillas
cristina.chumillas @ymbra.com
Pako Garcia
@pakmanlh
pako.garcia@ymbra.com
We are Drupal dreamers!

3. DISCLAIMER
●
No somos expertos D8
●
NO es una sesión de TWIG (solamente)
●
NADA está 100% cerrado
●
SÍ aprenderemos algo (o eso esperamos)

4. THEMERS ARE WELLCOME
●
Somos Drupaleros
●
Somos diseñadores
●
Somos themers
●
No somos desarrolladores
●
No somos sysadmins

5. Themers don't care about...
●
Caching
●
OOP
●
PHP
●
MySQL, MongoDB
●
SOLID

6. Themers love...
●
Marcado semántico
●
HTML5, SMACSS
●
SASS, compass, CSS3
●
Modernizr, JQueryUI
●
RWD
●
Ponys

7. Themers hate...
●
DIVITIS
●
Acumulación de classes (estilos)
●
...
●
Drupal ?¿

8. Themers hate...
●
DIVITIS
●
Acumulación de classes (estilos)
●
...
●
Drupal ?¿
●
WE ARE DRUPAL DREAMERS

9. Drupal 8 loves themers!!
●
Configuración Archivo .yaml
●
CSS (Arquitectura, nomenclatura, etc)
●
Inspector de plantillas / variables
incorporado.
●
Mismas plantillas front y back
●
...

10. Archivo de configuración
D7
my_theme.info
name = Bartik
description = A flexible,
Recolorable ...
package = Core
version = VERSION
core = 7.x
stylesheets[all][] = css/layout.css
stylesheets[all][] = css/style.css
regions[header] = Header
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[highlighted] = Highlighted
...
settings[shortcut_module_link] = 0
D8
my_theme.info.yaml
name: Bartik
type: theme
description: 'A flexible, recol...
package: Core
version: VERSION
core: 8.x
stylesheets:
all:
- css/layout.css
print:
- css/print.css
ckeditor_stylesheets:
- css/ckeditor-iframe.css
regions:
header: Header
help: Help
settings:
shortcut_module_link: '0'

11. Archivo de configuración
D7
my_theme.info
; Add a new CSS file:
stylesheets[all][] = layout.css
; Override a CSS file:
; WARNING: The file is moved from its original position to the
;
end of the CSS files stack! Use the PHP override code below.
stylesheets[all][] = system.theme.css
; Remove a module CSS file by *adding* it but without supplying
; the actual file in the filesystem:
stylesheets[all][] = node.css

12. Archivo de configuración
D7
template.php
<?php
/**
* Implements hook_css_alter().
*/
function mytheme_css_alter(&$css) {
// Override.
if (isset($css['core/misc/vertical-tabs.css'])) {
$css['core/misc/vertical-tabs.css']['data'] =
drupal_get_path('theme', 'mytheme') . '/vertical-tabs.css';
// Remove.
unset($css[drupal_get_path('module','system').'/system.theme.css']);
}
}
?>

13. Archivo de configuración
D8
mytheme.info.yml
# Add a new CSS file:
stylesheets:
all:
- layout.css
# Override a CSS file:
stylesheets-override:
- system.theme.css
# Remove a CSS file:
stylesheets-remove:
- node.css
http://dgo.to/1876600

14. Organización archivos CSS
Drupal 8 sigue la guía de estilo SMACSS
para categorizar sus reglas CSS:
●
●
●
●
●
Base — CSS reset.
Layout — estructura general, grid
systems.
Component — elementos UI reusables.
State — estilos que alteran los
elementos según la interacción.
Theme — estilos visuales (“look-andfeel”) de los componentes.

15. Organización archivos CSS
Base
●
Uso de normalize.css
http://necolas.github.io/normalize.css/
●
Y seguimiento de Boilerplate
http://html5boilerplate.com/

16. Organización archivos CSS
Layout – Component - State
●
*.module.css
●
*.admin.module.css
●
Borrar referencias a tags (li.first)
●
Sustituir # por .
●
Archivos -rtl.css. separados
●
Uso de selectores descriptivos
●
Reducir «supuestos»

17. Organización archivos CSS
●
Example Layout – Component - State:
<div class="progress">
<label class="label">Installing Node Module</label>
<div class="progress__track">
<div class="progress__bar js-progress-percent"
style="width: 63%"></div>
</div>
<div class="progress__description">
<div class="l-pull">Installed 15 of 24 modules</div>
<strong class="l-push">63%</strong>
</div>
<button class="progress__cancel" href="#"
title="cancel">cancel</button>
</div>

18. Organización archivos CSS
●
Example Layout – Component - State:
/**
* Progress Bar component
*/
.progress {}
.progress__track {}
.progress__bar {}
.progress__description {}
.progress__cancel {}
.progress__cancel:focus,
.progress__cancel:hover {}

19. Organización archivos CSS
●
Example Layout – Component - State:
<div class="progress progress--small">
<label class="label label--small">Uploading syndey-operahouse-sunset.jpg</label>
<div class="progress__track">
<div class="progress__bar" style="width: 29%"></div>
</div>
<div class="progress__description">
<div class="l-pull">Uploaded 221 of 762KB</div>
<strong class="l-push">29%</strong>
</div>
<a class="progress__cancel" href="#" title="cancel"><span
class="visually-hidden">cancel</span></a>
</div>

20. Organización archivos CSS
●
Example Layout – Component - State:
/**
* Progress Bar small variant
*/
.progress--small .progress__track {}
.progress--small .progress__bar {}
.progress--small .progress__cancel {}

21. Inspección de plantillas
●
Gracias a Twig tenemos un DEBUG de código:
●
Editando settings.php
$settings['twig_debug'] = TRUE;
●
Obteniendo automáticamente:
<!-- THEME DEBUG -->
<!-- CALL: theme('node') -->
<!-- FILE NAME SUGGESTIONS:
* node--article.html.twig
* node--2.html.twig
x node.html.twig
-->
<!-- BEGIN OUTPUT from
'core/modules/node/templates/node.html.twig' -->
...
<!-- END OUTPUT from
'core/modules/node/templates/node.html.twig' -->

22. Inspección de variables
●
Gracias a Twig tenemos un DEBUG de código:
●
Editando settings.php
$settings['twig_debug'] = TRUE;
●
Podemos usar:
{{ dump(title) }}
Obteniendo un resultado como krumo
●
BYE BYE DEVEL_THEMER module!

23. Beneficios inherentes de TWIG
AL NO SER PHP:
●
Podemos usar las mismas plantillas desde el
BACK (PHP) como desde el FRONT (backbone,
underscore, ...).
https://github.com/schmittjoh/twig.js
●
Las plantillas son interpretables (y editables)
desde los navegadores. ¿ Contemplate ?

24. Puntos flojos de Drupal 7
●
Sintaxis
●
Inconsistencia
●
Complejidad
●
Redundancia
●
Seguridad

25. Puntos flojos de D7: Sintaxis
<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>
clearfix"<?php print $attributes; ?>>
<?php print render($title_prefix); ?>
<?php if (!$page): ?>
<h2<?php print $title_attributes; ?>>
<a href="<?php print $node_url; ?>"><?php print $title; ?></a>
</h2>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($display_submitted): ?>
<div class="meta submitted">
<?php print $user_picture; ?>
<?php print $submitted; ?>
</div>
<?php endif; ?>
<div class="content clearfix"<?php print $content_attributes; ?>>
<?php
// We hide the comments and links now so that we can render them later
hide($content['comments']);
...
D7
node.tpl.php

26. Puntos flojos de D7: Sintaxis

27. Puntos flojos de D7: Sintaxis
<article id="node-{{ node.id }}" class="{{ attributes.class}}
clearfix"{{ attributes }} role="article">
<header>
{{ title_prefix }}
{% if not page %}
<h2{{ title_attributes }}>
<a href="{{ node_url }}">{{ label }}</a>
</h2>
{% endif %}
{{ title_suffix }}
{% if display_submitted %}
<div class="meta submitted">
{{ user_picture }}
{{ submitted }}
</div>
{% endif %}
</header>
...
D7
node.tpl.php

28. Puntos flojos de D7: Sintaxis
Una única manera, mucho más fácil y reducida!
●
Mostrar variables: {{ title }}
●
Procesar: {% if not page %}
●
Comentar: {# That's just comment #}

29. Puntos flojos de D7: Inconsistencia
Si queremos modificar el marcado en Drupal
7 tenemos dos opciones:
●
Mediante TPL
●
Mediante funciones theme()

30. Puntos flojos de D7: Inconsistencia
D7
node.tpl.php
<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>
clearfix"<?php print $attributes; ?>>
<?php print render($title_prefix); ?>
<?php if (!$page): ?>
<h2<?php print $title_attributes; ?>>
<a href="<?php print $node_url; ?>"><?php print $title; ?></a>
</h2>
<?php endif; ?>
<?php print render($title_suffix); ?>
<?php if ($display_submitted): ?>
<div class="meta submitted">
<?php print $user_picture; ?>
<?php print $submitted; ?>
</div>
<?php endif; ?>
<div class="content clearfix"<?php print $content_attributes; ?>>
<?php
// We hide the comments and links now so that we can render them later.
hide($content['comments']);
...

31. Puntos flojos de D7: Inconsistencia
D7
node.pages.inc
función theme_node_preview()

32. Puntos flojos de D7: Inconsistencia
Si no sabemos PHP ...

33. Puntos flojos de D7: Inconsistencia
En Drupal 8 *solamente se usarán plantillas!
* A día de hoy se está trabajando en ello

34. Puntos flojos de D7: Inconsistencia
Render arrays VS theme functions

35. Puntos flojos de D7: Inconsistencia
En Drupal 8 *solamente se usarán
render_arrays
* A día de hoy se está trabajando en ello

36. Puntos flojos de D7: Complejidad

37. Puntos flojos de D7: Complejidad

38. Puntos flojos de D7: Complejidad
x
x
x x
x
x
x

39. Puntos flojos de D7: Complejidad
En Drupal 8 se trata de reducir esta
complejidad:
–
–
–
Pensando en casos de uso
Pensando en lo que el usuario (themer)
necesita.
Meta Issue: http://dgo.to/2004872

40. Puntos flojos de D7: Complejidad
¿De qué manera?
–
1: Build the theme registry
–
2: Callback suggestions alter
–
3: Prepare variables
–
4: Alter variables
–
5: Render output
–
Meta Issue: http://dgo.to/2004872

41. Puntos flojos de D7: Redundancia
Cuando generamos varios TPL repetimos líneas
de código:
●
node--type.tpl.php
●
node--article.tpl.php
●
node--book.tpl.php
●
node--whatever.tpl.php
●
...

42. Puntos flojos de D7: Redundancia
Twig permite extender una plantilla,
heredando sus líneas y modificando
solamente las diferencias.

43. Puntos flojos de D7: Redundancia
Ejemplo comment-wrapper.html.twig
<section id="comments" class="{{ attributes.class }}"{{ attributes }}>
{% if comments %}
{% codeblock title %}
{{ title.prefix }}
<h2 class="title">{{ 'Comments' | t }}</h2>
{{ title.suffix }}
{% endcodeblock %}
{{ comments }}
{% endif %}
{% if form %}
<h2 class="title comment-form">{{ 'Add new comment' | t }}</h2>
{{ form }}
{% endif %}
</section>

44. Puntos flojos de D7: Redundancia
Ejemplo de otra plantilla
(comment-wrapper-forum.html.twig)
extendiendo la anterior.
{% extends "comment-wrapper.html.twig" %}
{% codeblock title %}
{# code block here is empty to prevent title from showing on forums #}
{% endcodeblock %}

45. Puntos flojos de D7: Redundancia
Existe un problema «parecido »con las
funciones actuales de theme:

46. Puntos flojos de D7: Redundancia
Solución D8: Render arrays con herencia
de sugerencias de templates.

47. Puntos flojos de D7: Seguridad
Posibilidad de usar PHP en las plantillas para:
●
Imprimir cualquier tipo de valor...
<?php print $node->field_whatever['und'][0]['value']; ?>
●
Realizar llamadas MySQL...
<?php db_query(“DROP TABLE {node}”); ?>
...

48. Puntos flojos de D7: Seguridad
Solución D8: usar Twig para tratar la
información en la presentación y sanear
previamente las variables para restringir los
posibles datos a mostrar:
<h3>{{ node.field_whatever.0 }}</h3>

49. Mejoras en la API de D8

50. Nuevos theme hooks
hook
theme
hook
hook
theme
suggestions
theme
suggestions
alter
hook
prepare
default
template
hook
prepare
alter
(preprocess)
drupal
render
template
override
hook
theme
registry
theme
registry
alter
* Todavía en progreso http://dgo.to/2004872

51. Nuevos theme hooks
NUEVO! hook_theme_suggestions()
hook
theme
hook
hook
theme
suggestions
theme
suggestions
alter
hook
prepare
default
template
hook
prepare
alter
(preprocess)
drupal
render
template
override
hook
theme
registry
theme
registry
alter
* Todavía en progreso http://dgo.to/2004872

52. Nuevos theme hooks
NUEVO! hook_theme_suggestions_alter()
hook
theme
hook
hook
theme
suggestions
theme
suggestions
alter
hook
prepare
default
template
hook
prepare
alter
(preprocess)
drupal
render
template
override
hook
theme
registry
theme
registry
alter
* Todavía en progreso http://dgo.to/2004872

53. Nuevos theme hooks
NUEVO! hook_theme_suggestions_alter()
●
Antes:
<?php
/**
* Implements hook_preprocess_HOOK() for node templates.
*/
function MYTHEME_preprocess_node($variables) {
$variables['theme_hook_suggestion'] = 'node__' . 'my_suggestion';
}
?>
●
Después:
<?php
/**
* Implements hook_theme_suggestions_HOOK_alter().
*/
function MYTHEME_theme_suggestions_node_alter(array &$suggestions, array
$variables) {
$suggestions[] = 'node__' . 'my_suggestion';
}
?>

54. Nuevos theme hooks
NUEVO! hook_prepare() o
hook_theme_prepare_TEMPLATE_SUGGESTION()
hook
theme
hook
hook
theme
suggestions
theme
suggestions
alter
hook
prepare
hook
prepare
alter
(preprocess)
default
template
drupal
render
template
override
hook
theme
registry
theme
registry
alter
* Todavía en progreso http://dgo.to/2004872

55. Nuevos theme hooks
NUEVO! hook_prepare_alter() o
hook_theme_prepare_TEMPLATE_SUGGESTION_alter()
hook
theme
hook
hook
theme
suggestions
theme
suggestions
alter
hook
prepare
default
template
hook
prepare
alter
(preprocess)
drupal
render
template
override
hook
theme
registry
theme
registry
alter
Parecido a
hook_form_alter and hook_form_FORM_ID_alter
●
*Todavía en progreso

56. En D8 todo es «renderizable»
●
●
●
Todo es una Array hasta el final.
Se evita tener que bucear (regexp) en variables
de tipo string para alterar el marcado.
El marcado está en las plantillas SOLAMENTE

57. Traducción de cadenas en plantillas
●
●
http://dgo.to/2047135
Implementación de t() y format_plural() con
contexto incluido:
{% set count = comments|length %}
{% trans %}
{{ count }} comment was deleted successfully.
{% plural count %}
{{ count }} comments were deleted successfully.
{% endtrans %}
{% trans with {'context': 'Long month name', 'langcode': 'fr'} %}
January
{% endtrans %}

58. «Theme Component Library»
●
●
Crear un set «standard» de plantillas base para
todos los elementos comunes.
Ahora mismo es una lista de deseos
http://dgo.to/1804488

59. Conclusiones
●
Con D8 los themers seremos felices (¡al
fin!)
●
...
●
We need Drupal Heros!
●
http://dgo.to/1921610
●
http://dgo.to/1757550
●
Ask to @rteijeiro

60. ¡Gracias!
¿Preguntas?
Cristina
Chumillas
@chumillas
cristina.chumillas @ymbra.com
Pako Garcia
@pakmanlh
pako.garcia@ymbra.com