Drupal 8
theme layer changes

Template process layer

…is gone!

Theme functions

…are being converted to templates…
(and other formats).

Only 12 remaining!

Theme suggestion hooks

Drupal 7:

/**
 * Implements hook_preprocess_HOOK() for node templates.
 */
function MYTHEME_preprocess_node(&$variables) {
  $variables['theme_hook_suggestions'][] = 'node__' . 'my_first_suggestion';
  $variables['theme_hook_suggestions'][] = 'node__' . 'my_second_more_specific_suggestion';
}

Drupal 8:

/**
 * Implements hook_theme_suggestions_HOOK_alter() for node templates.
 */
function MYTHEME_theme_suggestions_node_alter(array &$suggestions, array $variables) {
  $suggestions[] = 'node__' . 'my_first_suggestion';
  $suggestions[] = 'node__' . 'my_second_suggestion';
}

Goodbye theme(), hello
render arrays

Drupal 7:

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

Drupal 8:

$variables['list'] = [
  '#theme' => 'item_list',
  '#items' => $items,
];

Sandwiches.

https://github.com/DrupalTwig/sandwich

Build your render array data

/**
 * Builds a sandwich.
 */
public function build() {
  return [
    '#theme' => 'sandwich',
    '#name' => $this->t('Chickado'),
    '#attributes' => [
      'id' => 'best-sandwich',
      'style' => 'float: left;',
      'class' => ['left', 'clearfix'],
    ],
    '#bread' => $this->t('Sourdough'),
    '#cheese' => $this->t('Gruyère'),
    '#veggies' => [$this->t('Avocado'), $this->t('Red onion'), $this->t('Romaine')],
    '#protein' => $this->t('Chicken'),
    '#condiments' => [$this->t('Mayo'), $this->t('Dijon')],
  ];
}

Pass in variables using #-prefixed keys.

Markup your Twig template

<section{{ attributes }}>
  <h2>{{ name }}</h2>
  {% if bread %}
    <p><strong>Bread:</strong> {{ bread }}</p>
  {% endif %}

  <strong>Vegetables:</strong>
  <ul>
    {% for veg in veggies %}
      <li>{{ veg }}</li>
    {% endfor %}
  </ul>

  {% if condiments %}
    <strong>Condiments:</strong>
    <ul>
      {% for condiment in condiments %}
        <li>{{ condiment }}</li>
      {% endfor %}
    </ul>
  {% endif %}
</section>

Voilà!

Themable data

Overview of Drupal 7
rendering flow

1. drupal_render()
   2. #pre_render
   3. theme()
      4. Preprocess functions (and suggestions)
      5. Template/theme function is rendered
   7. #post_render

Overview of Drupal 8
rendering flow

1. \Drupal::service('renderer')->render()
   2. #pre_render
   3. \Drupal::theme()->render()
      4. Theme suggestion hooks
      5. Preprocess functions
      6. Template is rendered
   7. #post_render

#type “Coles Notes”

Yes, that's Canadian eh!

Discoverable Differences

/**
 * Implements hook_element_info().
 */
function your_module_element_info() {
  $types['html_tag'] = array(
    '#theme' => 'html_tag',
    '#pre_render' => array(
      'drupal_pre_render_conditional_comments'
    ),
    '#attributes' => array(),
    '#value' => NULL,
  );
  return $types;
}

/**
 * Provides a render element for any HTML tag, with properties and value.
 *
 * @RenderElement("html_tag")
 */
class HtmlTag extends RenderElement {
  public function getInfo() {
    return [
      '#theme' => 'html_tag',
      '#pre_render' => [
        [HtmlTag, 'preRenderConditionalComments'],
      ],
      '#attributes' => [],
      '#value' => NULL,
    ];
  }
}

Defaults and callbacks on a reusable type of render array

Example #type render array:

$variables['link'] = [
  '#type' => 'link',
  '#title' => t('Example'),
  '#url' => 'http://example.com',
];

\Drupal::service('link_generator');
$generated_link = $link_generator->generate($element['#title'], $element['#url']->setOptions($options), TRUE);
$element['#markup'] = $generated_link->getGeneratedLink();

Twig magic

{{ sandwich.cheese }}

// 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');