Our first Drupal 8 theme get updated

Created on
Updated on
Written By
Our first Drupal 8 theme get updated

Today we are excited to announce the latest release of our Drupal 8 theme Prius. The last build support the freshly baked Drupal 8 Alpha 14. The migration from alpha13 to alpha14 was pretty smooth. We just run into some weird issues that we've traced down to the libraries implementation. We'll explain how we fixed it, to prevent you from some Drupal headaches.

Check out the code on drupal.org or read our dedicated blog entry if you want to find out more about our first Drupal 8 theme.

Prius

Let's start at the beginning, ok? There are at least two ways to attach a library to your theme. Both involve defining your libraries in the YAML file named YOURTHEME.libraries.yml and located at the root of your theme. YOURTHEME is of course the name of your theme.

That's where we run into trouble. The trick is to include the licence details (name, url, gpl-compatible) if you use external libraries. If you don't, Drupal will behave badly and produce inexplicable errors. By the way Drupal core libraries are located under core/core.libraries.yml. It's a very good starting point to learn how to structure your YAML file and it will definitely help you to declare properly your own libraries.

# prius.libraries.yml
# Custom js and dependencies.
corescripts:
  version: VERSION
  js:
    js/build/production.min.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings
    - core/jquery.once
    - core/modernizr

# Min/max-width media query polyfill for IE 6-8.
respond:
  remote: https://github.com/scottjehl/Respond
  version: 1.4.2
  license:
    name: MIT
    url: https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT
    gpl-compatible: true
  js:
    //cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js: { every_page: true, weight: -1, browsers: { IE: 'lte IE 8', '!IE': false } }

# Emulates CSS3 pseudo-classes and attribute selectors for IE 6-8.
selectivizr:
  remote: http://selectivizr.com/
  version: 1.0.2
  license:
    name: MIT
    url: http://opensource.org/licenses/MIT
    gpl-compatible: true
  js:
    //cdnjs.cloudflare.com/ajax/libs/selectivizr/1.0.2/selectivizr-min.js: { every_page: true, weight: -1, browsers: { IE: 'lte IE 8', '!IE': false } }

When your libraries are defined, the first quick and easy method to use them is to add the corresponding keys in the info file. Don't forget that the info file is now called YOURTHEME.info.yml. Another important advice is to completely disable your theme whenever you amend that file. If you don't, you may not see your latest changes.

# prius.info.yml
# Enable prius core script
libraries:
  - prius/corescripts

Another way to attach your libraries, which will give you more control and flexibility, is achieved by using a preprocess function in your theme file. You could implement the hooks hook_page_alter() or hook_page_build(). Both should work nicely although hook_library_alter() seems to be the way to go1.

# prius.theme
/**
 * Implements hook_page_alter().
 *
 * This is another way to include the libraries into the theme.
 */
function prius_page_alter(&$page) {
  // Attach respond library unless disable checkbox is checked.
  if(theme_get_setting('disable_respond', 'prius') == FALSE) {
    $page['#attached']['library'][] = 'prius/respond';
  }
  // Attach selectivizr library unless disable checkbox is checked.
  if(theme_get_setting('disable_selectivizr', 'prius') == FALSE) {
    $page['#attached']['library'][] = 'prius/selectivizr';
  }
}

If you want to know more about our first Drupal 8 theme and the awesomeness packed with it, check out our recent blog entry.

1. The hook_page_alter() will work but may not be the best approach as the function could be dropped in the future. A better method would be to first declare all your librairies in your info file. Then you implement the function hook_library_alter(). We are still struggling to make it work that way, but we will update the blog when we succeed. For the record it will look like this:

# prius.theme
/**
 * Implements hook_library_alter().
 */
function prius_library_alter(array &$library, $name) {
  // Bug ? hook_library_alter does not seems to be called.
  if(theme_get_setting('disable_respond', 'prius') == TRUE) {
  }

  if(theme_get_setting('disable_selectivizr', 'prius') == TRUE) {

  }
}