[Srijan Wednesday Webinars] Drupal 8: Frontend for Backenders
-
Upload
srijan-technologies -
Category
Technology
-
view
386 -
download
1
Transcript of [Srijan Wednesday Webinars] Drupal 8: Frontend for Backenders
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