Last Friday, I gave the second in a series of front-end web development talks here in Taipei. There were 11 attendees as we discussed in length how to use the new Twig tempting system while building a Drupal 8 theme.
Like the first class, the participants were engaged and really probed the new concepts of Twig and its syntax. We talked for over 3 hours; here are some highlights:
We started the evening, not by talking about what’s new in Drupal 8 theming (everything!), but about the short list of what’s old in Drupal 8 theming:
- Clearing the cache
- The theme registry and "theme hooks"
- Base themes and sub-themes
- Render elements
We talked about how you need to define libraries of CSS and JS files instead of adding them directly to your .info file.
# Adds a library to all pages.
libraries:
my_theme/my_custom_library
libraries-override:
# Removes an entire library.
system/base: false
core/drupal.vertical-tabs:
css:
component:
# Overrides a specific library asset.
misc/vertical-tabs.css: css/zippy-tabs.css
# Removes a specific library asset.
misc/veritcal-tabs.js: false
libraries-extend:
core/drupal.vertical-tabs:
js:
# Adds an asset to an existing library.
js/even-more-vertical.js
I had to update my slides because one of the attendees pointed out I didn’t have an example of overriding a library asset. The full documentation for libraries is at: https://www.drupal.org/theme-guide/8/assets
I showed how the default values for theme settings are no longer stored in the .info file, but instead loaded from the config/install/THEME.settings.yml file:
# Define the default values of the theme’s settings.
zen_breadcrumb: 'yes'
zen_breadcrumb_separator: ' › '
zen_breadcrumb_home: 1
James asked if the form itself was still specified in the theme-settings.php file. When I went to double check in the Drupal 8 Theming Guide, we found that it literally said “TODO”. We did some Googling, found a rough answer on Stack Exchange, and then updated the D8 docs page
We discussed the {% extends %} tag and how it is the perfect complement for theme hook suggestions.
{% extends "block.html.twig" %}
{% block content %}
Just modify the block you want to be different from the default block.html.twig.
{% endblock %}
Kevin asked if we could do define nested blocks. I had no idea, so we tried it out. We modified the block.html.twig file to have:
<div>
...
{% block content %}
{{ content }}
{% block nested_content %}
HI, KEVIN!
{% endblock %}
{% endblock %}
</div>
And then modified the block—search-form-block.html.twig file to be:
{% extends "block.html.twig" %}
{% block content %}
<div{{ content_attributes }}>
{{ parent() }}
</div>
{% endblock %}
{% block nested_content %}
HI, JENNY!
{% endblock %}
And it worked!
This was a great class. I learned a tremendous amount about Twig just preparing for it and the discussions that the participants started helped me learn even more. Thank you so much to all who attended!
Again, if you missed the class or don’t live in Taipei, I’m available to teach your organization remotely or in person. Just contact me!
Comments