Twig y otros "themas" en Drupal 8

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

We are Drupal dreamers!

DISCLAIMER
●

No somos expertos D8

●

NO es una sesión de TWIG (solamente)

●

NADA está 100% cerrado

●

SÍ aprenderemos algo (o eso esperamos)

THEMERS ARE WELLCOME
●

Somos Drupaleros

●

Somos diseñadores

●

Somos themers

●

No somos desarrolladores

●

No somos sysadmins

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 plantillas / variables
incorporado.

●

Mismas plantillas front y back

●

...

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'

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

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']);
}
}
?>

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

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.

Base
●

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

●

Y seguimiento de Boilerplate
http://html5boilerplate.com/

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»

●

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>

●

/**
* Progress Bar component
*/
.progress {}
.progress__track {}
.progress__bar {}
.progress__description {}
.progress__cancel {}
.progress__cancel:focus,
.progress__cancel:hover {}

●


<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>

●

/**
* Progress Bar small variant
*/
.progress--small .progress__track {}
.progress--small .progress__bar {}
.progress--small .progress__cancel {}

Inspección de plantillas
●

Gracias a Twig tenemos un DEBUG de código:

●

Editando settings.php
$settings['twig_debug'] = TRUE;

●

Obteniendo automáticamente:




...

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!

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 ?

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 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

<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 %}
{{ user_picture }}
{{ submitted }}
</div>
{% endif %}
</header>
...

D7

node.tpl.php


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

Mostrar variables: {{ title }}

●

Procesar: {% if not page %}

●

Comentar: {# That's just comment #}

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

Mediante TPL

●

Mediante funciones theme()

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): ?>
<?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.pages.inc

función theme_node_preview()


Si no sabemos PHP ...


En Drupal 8 *solamente se usarán plantillas!

* A día de hoy se está trabajando en ello

Render arrays VS theme functions

En Drupal 8 *solamente se usarán
render_arrays

* A día de hoy se está trabajando en ello

Puntos flojos de D7: Complejidad


x
x
x x
x

x

x


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

¿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

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

●

...

Twig permite extender una plantilla,
heredando sus líneas y modificando
solamente las diferencias.


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>

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 %}

Existe un problema «parecido »con las
funciones actuales de theme:

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...
<?php print $node->field_whatever['und'][0]['value']; ?>

●

Realizar llamadas MySQL...
<?php db_query(“DROP TABLE {node}”); ?>

...

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>

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

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


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


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';
}
?>

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


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

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

Traducción de cadenas en plantillas
●

●

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 %}

«Theme Component Library»
●

●

Crear un set «standard» de plantillas base para
todos los elementos comunes.
Ahora mismo es una lista de deseos

Conclusiones
●

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

●

...

●

We need Drupal Heros!

●


●


●

Ask to @rteijeiro

¡Gracias!
¿Preguntas?
Cristina
Chumillas
@chumillas
cristina.chumillas @ymbra.com

Pako Garcia
@pakmanlh

pako.garcia@ymbra.com

Twig y otros "themas" en Drupal 8

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (7)

Similar a Twig y otros "themas" en Drupal 8

Similar a Twig y otros "themas" en Drupal 8 (20)

Último

Último (15)

Twig y otros "themas" en Drupal 8