Drupal 8Frontend (forbackenders)

01.04.2015 Lauri Eskola / @laurii1

@srijan #SrijanWW

Lauri EskolaI live in FinlandFront and Back End DeveloperMostly working on Core issuesrelated to Theme system on theBack End sideWorking for DruidI do actually like cold (andsauna)

@srijan #SrijanWW

@lauriii@srijan #SrijanWW

@laurii1@srijan #SrijanWW

Topics

1. Theme system2. Twig3. Autoescape4. Demo

@srijan #SrijanWW

Changes related to themelayer

@srijan #SrijanWW

Drupal 7 theme layer - WTF?@srijan #SrijanWW

Template process layer ...is gone!

hook_page_alter ...is gone!

@srijan #SrijanWW

@srijan #SrijanWW

Theme functions

...are being converted to Twig templates..

@srijan #SrijanWW

Goodbye theme(), hello render arrays

Drupal 7

<?php $variables['list'] = theme('item_list', array( 'items' => $items, ));

Drupal 8

<?php $variables['list'] = array( '#theme' => 'item_list', '#items' => $items, );

@srijan #SrijanWW

@srijan #SrijanWW

Drupal 8 theme layer - FTW!@srijan #SrijanWW

Theme suggestion hooks@srijan #SrijanWW

Theme suggestion hooks

Drupal 7

<?php /** * Implements hook_preprocess_HOOK() for node templates. */ function MYTHEME_preprocess_node(&$variables) { $variables['theme_hook_suggestions'][] = 'node__' . 'first_suggestion'; $variables['theme_hook_suggestions'][] = 'node__' . 'more_specific_suggestion' }

Drupal 8

<?php /** * Implements hook_theme_suggestions_HOOK_alter() for node templates. */ function MYTHEME_theme_suggestions_node_alter(array &$suggestions, array $variables $suggestions[] = 'node__' . 'first_suggestion'; $suggestions[] = 'node__' . 'more_specific_suggestion'; }

@srijan #SrijanWW

Preprocess hooks & missing processfunctions

@srijan #SrijanWW

Attributes

<?php /** * Implements hook_preprocess_node(). */ function hook_preprocess_node(&$variables) { // Add new class. $attributes->addClass('my-own-class'); // Remove elements default class. $attributes->removeClass('default-class'); // Set elements id to kitten. $attributes->setAttribute('id', 'kitten'); }

@srijan #SrijanWW

Attributes

Twig

<div{{ attributes }}>

Not like this:

<div {{ attributes }}>

<div✖{{ attributes }}>

@srijan #SrijanWW

Attributes

{% set classes [ 'a-lot-of', 'classes-needed', 'for-this-element' ] %} <div{{ attributes.removeClass('my-own-class').addClass('better-class', classes

@srijan #SrijanWW

TwigCrash course for backenders

@srijan #SrijanWW

Twig magic{{ sandwich.cheese }}

Same in PHP

// Array key. $sandwich['cheese']; // Object property. $sandwich->cheese; // Also works for magic get (provided you implement magic isset). $sandwich->__isset('cheese'); && $sandwich->__get('cheese'); // Object method. $sandwich->cheese(); // Object get method convention. $sandwich->getCheese(); // Object is method convention. $sandwich->isCheese(); // Method doesn't exist/dynamic method. $sandwich->__call('cheese');

@srijan #SrijanWW

Print what you want, when you want

Drupal 7

<?php // We hide the comments and links now so that we can render them later. hide($content['comments']); hide($content['links']); print render($content);

Drupal 8

{# We give you what you ask for. #} {{ content|without('comments', 'links') }} ... {# Anything can be printed later on #} {{ content.comments }}

@srijan #SrijanWW

Twig filtersMeant to manipulate content. Simply takes the first parameter from a

variable or inline string and returns it in different format.

Example

{% set name = 'Lauri' %} {# Print varibale using lenght filter. #} {{ name|length }}

Returns

5

@srijan #SrijanWW

Twig functionsMore viable functions with multiple parameters meant to create simple

front-end logic

{{ dump() }}

@srijan #SrijanWW

This magic is built in TwigHow ever I'm going to show you how to add these by your self!

@srijan #SrijanWW

Adding Twig filters

<?php /** * A class providing my own Twig extension. */ class TrimString extends TwigExtension { /** * {@inheritdoc} */ public function getFilters() { return array( new \Twig_SimpleFilter('trim_string', array($this, 'trimString')), ); }

public function trimString($string, $length = 10) { return strpos($string, 0, $length); }

@srijan #SrijanWW

Adding Twig filters

{% set variable = 'my text' %} {{ variable|trim_string(2) }}

my

@srijan #SrijanWW

Adding Twig functions

<?php /** * A class providing my own Twig extension. */ class MyTwigExtension extends TwigExtension {

/** * {@inheritdoc} */ public function getFunctions() { return array( new \Twig_SimpleFunction('url', array($this, 'getUrl'), array('is_safe_callback' ); } }

@srijan #SrijanWW

Example:https://github.com/lauriii/trim-string

@srijan #SrijanWW

"I don't want to learn anythingnew!"

"I don't like Twig!"

@srijan #SrijanWW

Solution!

# engine: phptemplate

themename.info.yml

@srijan #SrijanWW

Autoescape@srijan #SrijanWW

@srijan #SrijanWW

Context-Aware Auto-EscapingBasic idea: everytime variable goes to template run appropriate escaping

function!

@srijan #SrijanWW

Different Escape functions

<?php

Drupal\Component\Utility\SafeMarkup::set(); Drupal\Component\Utility\SafeMarkup::escape(); Drupal\Component\Utility\SafeMarkup::checkAdminXss(); Drupal\Component\Utility\SafeMarkup::isSafe();

@srijan #SrijanWW

How it works? <?php

public static function escape($string) { return static::isSafe($string) ? $string : String::checkPlain($string); }

@srijan #SrijanWW

Sandwiches demo!https://github.com/DrupalTwig/sandwich

@srijan #SrijanWW

Want to help?

Isn't this stuff awesome?

We can still make it better! Join your localsprints!

@srijan #SrijanWW

Take this conversation online by tweeting using the hashtag #SrijanWW

Thank you!

Lauri Eskola / @laurii1

@srijan #SrijanWW