Entity view (Content)

New Drupal 8 Features for Themers and Developers

By azvonkov
Apr. 28, 2014

In this post I wanted to share few features of Drupal 8 that I've discovered while working on a D8 theme. These can be very handy in the Drupal development process for both themers and devs.

Theming Debug with Template Suggestion Settings and the Web Profiler Module

In Drupal 8 finding the right templates, getting suggestions on templates, and finding where markup is generated by drupal is built right into core. All Drupal developers need to do in order to enable this functionality is to uncomment a couple of lines in our settings.php file which is located in sites/default/ directory. Look for lines 300 and 314 $settings['twig_debug'] = TRUE; $settings['twig_auto_reload'] = TRUE; and uncomment those. As always Clear your Caches. Now if you check your theme with crome dev tools / firebug you will see those template suggestions as HTML comments.

In a D8 theme I have set up and wrote about in a previous post, I have a sidebar block that contains social links. If I inspect that with chrome dev tools I will see template suggestions and file names that can be used. There is a number of options going from the most specific block--sociallinks.html.twig to the one currently used by the theme block.html.twig, which is the default.

You can refer to the official documentation on Debugging Twig compiled templates and Debugging variables in Twig templates.

Thanks for this tip to the The Weekly Drop and this post Drupal8 Theme Debug by mortendk. You can also check out a quick screen cast here.

Web Profiler

Recently I have also discovered an interesting module called Web Profiler. It helps to expose some of the D8 system stuff that goes on behind the scenes in a little toolbar that sits on the bottom of your page. Web Profiler is similar to Drupal's 7 Devel module but with a lot more system and TWIG related stuff.

  • PHP Configuration
  • Necessary time and memory
  • List of enabled themes/modules
  • Routing information (aka. hook_menu in D7)
  • Requested cache/Key-Value data
  • Information about the Request raw data

Drupal's 8 Configuration Management

With Drupal 8 Configuration Management you can import, export, and synchronize your site configurations across various environments.

All content, settings, and regions can be exported and reapplied throughout your dev, staging, and production environments. All this info is stored in the .yml files

You can either import / export individual settings or export everything as one tar file.

Here you can see the difference between my local and production environments.

If you are familiar with Drupal's 7 features module, you will find D8's configuration management very useful.

All scripts in libraries.yml file

Last but not least there is an important update to the Library API in D8

hook_library_info() is replaced by *.libraries.yml file

In the root of a theme's directory you can now put a theme_name .libraries.yml file were you would include all your scripts and their dependencies in a nicely formatted *.libraries.yml file.

Here is an example I've used in formata theme. All scripts and their dependencies are listed here.


formata.corescripts:
  version: 1.0
  js:
    js/jquery.scrollUp.min.js: {}
    js/jquery.fs.naver.min.js: {}
    js/rainbow/rainbow.min.js: {}
    js/rainbow/rainbow.linenumbers.min.js: {}
    js/rainbow/language/generic.js: {}
    js/rainbow/language/javascript.js: {}
    js/rainbow/language/css.js: {}
    js/rainbow/language/php.js: {}
    js/script.js: {}
  dependencies:
    - core/jquery
    - core/modernizr

 

Post Tags: