Twig y otros «themas» en Drupal 8:
quiénes somos, de dónde venimos...
Quienes somos
Cristina
Chumillas
@chumillas
cristina.chumillas @ymbra.com

Pako Garcia
@pakmanlh

pako.garcia@ymbra.com

W...
DISCLAIMER
●

No somos expertos D8

●

NO es una sesión de TWIG (solamente)

●

NADA está 100% cerrado

●

SÍ aprenderemos...
THEMERS ARE WELLCOME
●

Somos Drupaleros

●

Somos diseñadores

●

Somos themers

●

No somos desarrolladores

●

No somos...
Themers don't care about...
●

Caching

●

OOP

●

PHP

●

MySQL, MongoDB

●

SOLID
Themers love...
●

Marcado semántico

●

HTML5, SMACSS

●

SASS, compass, CSS3

●

Modernizr, JQueryUI

●

RWD

●

Ponys
Themers hate...
●

DIVITIS

●

Acumulación de classes (estilos)

●

...

●

Drupal ?¿
Themers hate...
●

DIVITIS

●

Acumulación de classes (estilos)

●

...

●

Drupal ?¿

●

WE ARE DRUPAL DREAMERS
Drupal 8 loves themers!!
●

Configuración Archivo .yaml

●

CSS (Arquitectura, nomenclatura, etc)

●

Inspector de plantil...
Archivo de configuración
D7

my_theme.info

name = Bartik
description = A flexible,
Recolorable ...
package = Core
version...
Archivo de configuración
D7

my_theme.info

; Add a new CSS file:
stylesheets[all][] = layout.css
; Override a CSS file:
;...
Archivo de configuración
D7

template.php
<?php
/**
* Implements hook_css_alter().
*/
function mytheme_css_alter(&$css) {
...
Archivo de configuración
D8

mytheme.info.yml
# Add a new CSS file:
stylesheets:
all:
- layout.css
# Override a CSS file:
...
Organización archivos CSS
Drupal 8 sigue la guía de estilo SMACSS
para categorizar sus reglas CSS:
●

●

●

●

●

Base — C...
Organización archivos CSS
Base
●

Uso de normalize.css
http://necolas.github.io/normalize.css/

●

Y seguimiento de Boiler...
Organización archivos CSS
Layout – Component - State
●

*.module.css

●

*.admin.module.css

●

Borrar referencias a tags ...
Organización archivos CSS
●

Example Layout – Component - State:

<div class="progress">
<label class="label">Installing N...
Organización archivos CSS
●

Example Layout – Component - State:
/**
* Progress Bar component
*/
.progress {}
.progress__t...
Organización archivos CSS
●

Example Layout – Component - State:

<div class="progress progress--small">
<label class="lab...
Organización archivos CSS
●

Example Layout – Component - State:
/**
* Progress Bar small variant
*/
.progress--small .pro...
Inspección de plantillas
●

Gracias a Twig tenemos un DEBUG de código:

●

Editando settings.php
$settings['twig_debug'] =...
Inspección de variables
●

Gracias a Twig tenemos un DEBUG de código:

●

Editando settings.php
$settings['twig_debug'] = ...
Beneficios inherentes de TWIG

AL NO SER PHP:
●

Podemos usar las mismas plantillas desde el
BACK (PHP) como desde el FRON...
Puntos flojos de Drupal 7
●

Sintaxis

●

Inconsistencia

●

Complejidad

●

Redundancia

●

Seguridad
Puntos flojos de D7: Sintaxis
<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>
clearfix"<?php pri...
Puntos flojos de D7: Sintaxis
Puntos flojos de D7: Sintaxis
<article id="node-{{ node.id }}" class="{{ attributes.class}}
clearfix"{{ attributes }} role...
Puntos flojos de D7: Sintaxis

Una única manera, mucho más fácil y reducida!
●

Mostrar variables: {{ title }}

●

Procesa...
Puntos flojos de D7: Inconsistencia
Si queremos modificar el marcado en Drupal
7 tenemos dos opciones:
●

Mediante TPL

●
...
Puntos flojos de D7: Inconsistencia
D7

node.tpl.php

<div id="node-<?php print $node->nid; ?>" class="<?php print $classe...
Puntos flojos de D7: Inconsistencia
D7

node.pages.inc

función theme_node_preview()
Puntos flojos de D7: Inconsistencia

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

En Drupal 8 *solamente se usarán plantillas!

* A día de hoy se está trabajando en el...
Puntos flojos de D7: Inconsistencia
Render arrays VS theme functions
Puntos flojos de D7: Inconsistencia
En Drupal 8 *solamente se usarán
render_arrays

* A día de hoy se está trabajando en e...
Puntos flojos de D7: Complejidad
Puntos flojos de D7: Complejidad
Puntos flojos de D7: Complejidad

x
x
x x
x

x

x
Puntos flojos de D7: Complejidad

En Drupal 8 se trata de reducir esta
complejidad:
–
–

–

Pensando en casos de uso
Pensa...
Puntos flojos de D7: Complejidad
¿De qué manera?
–

1: Build the theme registry

–

2: Callback suggestions alter

–

3: P...
Puntos flojos de D7: Redundancia
Cuando generamos varios TPL repetimos líneas
de código:
●

node--type.tpl.php

●

node--a...
Puntos flojos de D7: Redundancia
Twig permite extender una plantilla,
heredando sus líneas y modificando
solamente las dif...
Puntos flojos de D7: Redundancia

Ejemplo comment-wrapper.html.twig
<section id="comments" class="{{ attributes.class }}"{...
Puntos flojos de D7: Redundancia
Ejemplo de otra plantilla
(comment-wrapper-forum.html.twig)
extendiendo la anterior.
{% e...
Puntos flojos de D7: Redundancia
Existe un problema «parecido »con las
funciones actuales de theme:
Puntos flojos de D7: Redundancia
Solución D8: Render arrays con herencia
de sugerencias de templates.
Puntos flojos de D7: Seguridad

Posibilidad de usar PHP en las plantillas para:
●

Imprimir cualquier tipo de valor...
<?p...
Puntos flojos de D7: Seguridad

Solución D8: usar Twig para tratar la
información en la presentación y sanear
previamente ...
Mejoras en la API de D8
Nuevos theme hooks

hook
theme

hook

hook

theme
suggestions

theme
suggestions
alter

hook
prepare

default
template

ho...
Nuevos theme hooks
NUEVO! hook_theme_suggestions()
hook
theme

hook

hook

theme
suggestions

theme
suggestions
alter

hoo...
Nuevos theme hooks
NUEVO! hook_theme_suggestions_alter()
hook
theme

hook

hook

theme
suggestions

theme
suggestions
alte...
Nuevos theme hooks
NUEVO! hook_theme_suggestions_alter()
●

Antes:

<?php
/**
* Implements hook_preprocess_HOOK() for node...
Nuevos theme hooks
NUEVO! hook_prepare() o
hook_theme_prepare_TEMPLATE_SUGGESTION()
hook
theme

hook

hook

theme
suggesti...
Nuevos theme hooks
NUEVO! hook_prepare_alter() o
hook_theme_prepare_TEMPLATE_SUGGESTION_alter()
hook
theme

hook

hook

th...
En D8 todo es «renderizable»
●

●

●

Todo es una Array hasta el final.
Se evita tener que bucear (regexp) en variables
de...
Traducción de cadenas en plantillas
●

●

http://dgo.to/2047135
Implementación de t() y format_plural() con
contexto inclu...
«Theme Component Library»
●

●

Crear un set «standard» de plantillas base para
todos los elementos comunes.
Ahora mismo e...
Conclusiones
●

Con D8 los themers seremos felices (¡al
fin!)

●

...

●

We need Drupal Heros!

●

http://dgo.to/1921610
...
¡Gracias!
¿Preguntas?
Cristina
Chumillas
@chumillas
cristina.chumillas @ymbra.com

Pako Garcia
@pakmanlh

pako.garcia@ymbr...
Upcoming SlideShare
Loading in …5
×

Twig y otros "themas" en Drupal 8

1,941 views

Published on

Presentación de la DrupalCamp Spain 2013 en Cáceres sobre las mejoras en la capa de Theme de Drupal 8 respecto Drupal 7

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,941
On SlideShare
0
From Embeds
0
Number of Embeds
52
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Twig y otros "themas" en Drupal 8

  1. 1. Twig y otros «themas» en Drupal 8: quiénes somos, de dónde venimos...
  2. 2. Quienes somos Cristina Chumillas @chumillas cristina.chumillas @ymbra.com Pako Garcia @pakmanlh pako.garcia@ymbra.com We are Drupal dreamers!
  3. 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. 4. THEMERS ARE WELLCOME ● Somos Drupaleros ● Somos diseñadores ● Somos themers ● No somos desarrolladores ● No somos sysadmins
  5. 5. Themers don't care about... ● Caching ● OOP ● PHP ● MySQL, MongoDB ● SOLID
  6. 6. Themers love... ● Marcado semántico ● HTML5, SMACSS ● SASS, compass, CSS3 ● Modernizr, JQueryUI ● RWD ● Ponys
  7. 7. Themers hate... ● DIVITIS ● Acumulación de classes (estilos) ● ... ● Drupal ?¿
  8. 8. Themers hate... ● DIVITIS ● Acumulación de classes (estilos) ● ... ● Drupal ?¿ ● WE ARE DRUPAL DREAMERS
  9. 9. Drupal 8 loves themers!! ● Configuración Archivo .yaml ● CSS (Arquitectura, nomenclatura, etc) ● Inspector de plantillas / variables incorporado. ● Mismas plantillas front y back ● ...
  10. 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. 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. 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. 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. 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. 15. Organización archivos CSS Base ● Uso de normalize.css http://necolas.github.io/normalize.css/ ● Y seguimiento de Boilerplate http://html5boilerplate.com/
  16. 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. 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. 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. 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. 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. 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. 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. 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. 24. Puntos flojos de Drupal 7 ● Sintaxis ● Inconsistencia ● Complejidad ● Redundancia ● Seguridad
  25. 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. 26. Puntos flojos de D7: Sintaxis
  27. 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. 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. 29. Puntos flojos de D7: Inconsistencia Si queremos modificar el marcado en Drupal 7 tenemos dos opciones: ● Mediante TPL ● Mediante funciones theme()
  30. 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. 31. Puntos flojos de D7: Inconsistencia D7 node.pages.inc función theme_node_preview()
  32. 32. Puntos flojos de D7: Inconsistencia Si no sabemos PHP ...
  33. 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. 34. Puntos flojos de D7: Inconsistencia Render arrays VS theme functions
  35. 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. 36. Puntos flojos de D7: Complejidad
  37. 37. Puntos flojos de D7: Complejidad
  38. 38. Puntos flojos de D7: Complejidad x x x x x x x
  39. 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. 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. 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. 42. Puntos flojos de D7: Redundancia Twig permite extender una plantilla, heredando sus líneas y modificando solamente las diferencias.
  43. 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. 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. 45. Puntos flojos de D7: Redundancia Existe un problema «parecido »con las funciones actuales de theme:
  46. 46. Puntos flojos de D7: Redundancia Solución D8: Render arrays con herencia de sugerencias de templates.
  47. 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. 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. 49. Mejoras en la API de D8
  50. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 60. ¡Gracias! ¿Preguntas? Cristina Chumillas @chumillas cristina.chumillas @ymbra.com Pako Garcia @pakmanlh pako.garcia@ymbra.com

×