Adding CSS Classes to Blocks in Drupal 8
原文链接：http://atendesigngroup.com/blog/adding-css-classes-blocks-drupal-8
John FerrisApril 20, 2016
This is an update to a previous post I wrote onadding classes to blocks in Drupal 7
Interested in
Drupal 8 Theming?
Attend a free 90 minute workshop online or in person in Denver to learn more about theming in Drupal 8. Specific dates TBD.
SIGN UP AND BE THE FIRST TO KNOW:
AsI've stated before, I'm a big fan of Modular CSS which requires the ability to easily manage classes on your markup. This was often a struggle in previous versions of Drupal. However, Drupal 8 makes this significantly easier to manage thanks to a number of improvements to the front-end developer experience (DX). In this post we'll look at how two of these DX improvements, theTwigtemplate language andhook_theme_suggestions_HOOK_alter, and how they make adding classes to blocks much easier to manage.
Twig allows us to easily open up a template file and add our classes where we need them. There are two main approaches to adding classes to a template file. The first is simple: open the file, add the class directly to the tag, save the file and move on with your life.
block.html.twig
{{ title_prefix }}
{% if label %}
{{ label }}
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
{% endblock %}
This works in a lot of cases, but may not be flexible enough. The second approach utilizes the newattributes object– the successor to Drupal 7's attributes array. The attribute object encapsulates all the attributes for a given tag. It also includes a number of methods which enable you to add, remove and alter those attributes before printing. For now we'll just focus on theattributes.addClass()method. You can learn more about available methods in the officialDrupal 8 documentation.
block.html.twig
{%
set classes = [
'block',
'block--fancy'
]
%}
{%
set title_classes = [
'block__title',
'block__title--fancy'
]
%}
{{ title_prefix }}
{% if label %}
{{ label }}
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
{% endblock %}
Alternatively, we can add our class directly to theclassattribute with the existing classes from theattribute.classthen print the remaining attributes. To prevent the class attribute from printing twice, we exclude it using thewithoutTwig filter. Either way works.
block.html.twig
{{ title_prefix }}
{% if label %}
{{ label }}
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
{% endblock %}
In any case, all our blocks on the site now look fancy as hell (assuming we've styled.block--fancyas such)
Template Suggestions
The above examples work. In reality if all our blocks look fancy, no blocks will look fancy. We need to apply this class only to our special blocks that truly deserve to be fancy. This introduces my second favorite DX improvement to Drupal 8 –hook_theme_suggestions_HOOK_alter.
If you wanted to make a custom template available for use to a certain block In Drupal 7, you had to do so in a preprocess function. Altering theme hook suggestions (the list of possible templates) in the Drupal 8 is delegated to its very own hook. The concept is pretty straight forward. Before Drupal renders an element, it looks at an array of possible template file names (a.k.a. suggestions) one-by-one. For each template file, it looks in the file system to see if that file exists in our theme, its base theme or core themes. Once it finds a match, it stops looking and renders the element using the matching template.
We'll use this hook to add our new template file to the list of suggestions. In the case of blocks, the function we'll define ishook_theme_suggestions_block_alter. It takes two arguments, the first is the array of suggestions which are passed by reference (by prefixing the parameter with a&so we can alter them directly. The second is the variables from our element that we can use to determine which templates we want to include.
Lets assume we renamed one of our templates above toblock--fancy.html.twigand saved it to our theme. We then add the following function tomy_theme.themewhere "my_theme" is the name of our theme.
my_theme.theme
* Implements hook_theme_suggestions_HOOK_alter() for block templates.
*/functionmy_theme_theme_suggestions_block_alter(array&$suggestions,array$variables){$block_id=$variables['elements']['#id'];/* Uncomment the line below to see variables you can use to target a block */// print $block_id . '
';/* Add classes based on the block id. */switch($block_id){/* Account Menu block */case'account_menu':$suggestions[]='block__fancy';break;}}
Now the account menu block on our site will useblock--fancy.html.twigas we can see from the output of twig debug
This is just one example of the improvements in D8 theming. I'm really excited for the clarity that the new Twig templates bring to Drupal 8 and the simplicity of managing template suggestions throughhook_theme_suggestions_HOOK_alter.
About the Author
John has been working in the print and interactive design industry since 2000. In addition to leading the front-end engineering team at Aten, John has spoken at many industry conferences throughout the U.S and internationally, including CSS Dev Conference and DrupalCons Portland, Austin, Amsterdam and L.A., on topics ranging from SVG to CSS architecture and layout design patterns. He is...
