El nuevo sistema de plantillas de Drupal 8

¿Quién soy?

Max Méndez / @MaxMendezWeb

El problema actual

Drupal 7 es mucho más complejo, robusto y sofisticado que sus antecesores, pero con todas sus mejoras y cambios de paradigma, se creó un desorden en la capa del tema. Parte del problema es heredado y otra parte nació en respuesta a viejos problemas.

¿Que tan compleja es la capa de tema?

En un futuro cercano

Drupal 8 y un nuevo sistema de tema basado en Twig.

¿Qué es Twig?

Twig es un motor y lenguaje de plantillas rápido, extendible y flexible.

¿Por qué Twig?

  • Permite escribir plantillas concisas y fáciles de leer.
  • Cuenta con una forma estándar para imprimir las variables.
  • No es necesario ser un programador de PHP para crear plantillas complejas.

¿Qué problemas resuelve Twig?

  • Separación entre la lógica del negocio y el despliegue de datos.
  • Elimina la necesidad de la función render( ).
  • Facilidad y control sobre las variables.
  • Variables sanitizadas automáticamente.
  • Facilita la creación de plantillas a personas no familiarizadas con Drupal.

¿Qué cambios implican para Drupal?

  • Desaparecen las funciones de tema.
  • Desaparecen las funciones de procesamiento.
  • Desaparece el hook_page_alter().
  • Simplifica pila de despliegue conocida en las versiones anteriores.

Twig

Etiquetas de Twig

Comentarios

{# #}



{#
  @file
  Bartik's theme implementation to display a single page.
 #}

Imprimir valores

{{ }}



            {{ site_name }}

Lógica

{% %}



{% if title %}

{% endif %}

¿Qué sucede cuando imprimimos un valor?


{{ user.name }}
o
{{ user['name'] }}


  1. $user['name']
  2. $user->name
  3. $user->name()
  4. $user->getName()
  5. $user->isName()
  6. null

Aplicando filtros al imprimir un valor


{{ variable | filter_name }}

Aplicando filtros en cascada

Para imprimir la variable name y asegurarnos que la primera letra se encontrará en mayúscula podemos hacer lo siguiente


{{ name | lower | capitalize }}

Algunos filtros comunes

  • raw
  • date
  • capitalize
  • trim
  • join
  • length


http://sht.pw/5Ph5iC

Formas de eliminar los espacios antes y después


  • {{ node.description }}

  • {{- node.description }} = ltrim($node.description)

  • {{ node.description -}} = rtrim($node.description)

  • {{- node.description -}} = trim($node.description)

Estructura de control For



{% for user in users %}		
  ...
{% endfor %}



{% for i in 1..10 %}
...
{% endfor %}

For Else



{% for user in users %}
	...
{% else %}
	No hay usuarios
{% endfor %}

Estructura de control If



{% if title %}
	
{{title}}

{%  else %}
	
{{site_name}}

{% endif %}




{{ title ? title : site_name }}

Estructura de un tema para Drupal 8

Cambios en el archivo .info

Pasa a llamarse theme_name.info.yml

Cambios en el archivo .info

Cambios en el archivo template.php

Pasa a llamarse theme_name.theme

Cambios en los archivos de templates

Pasan a llamarse template_name.html.twig

Convirtiendo las funciones de tema a templates Twig

Pasamos de tener una función llamada theme_link a un archivo llamado link.html.twig

Convirtiendo las funciones de tema a templates Twig

Convirtiendo las funciones de tema a templates Twig

Nombre del archivo: link.html.twig

Preguntas

Gracias


Enlaces cortos: Cut It All

Hospedaje de las imagenes: ImageBot.net

Framework de la presentación: Reveal.js

Fuentes


Twig

Twig coding standards

A new theme layer for Drupal 8

Drupal Twig conversion instructions (tpl.php to html.twig)

Theming in Drupal 8 - Conversion of themes to Twig