Using attributes in templates Twig

Question

I am a newbie. I have experience working with Twig but in Drupal it is used in another way.

I have seen a lot of code like that

<section{{ attributes.addClass(classes) }}>

And of course I read this article https://www.drupal.org/docs/8/theming-drupal-8/using-attributes-in-templates

There are a lot of examples and that is great.

But why do I need this, how could I use them to improve readability and flexebility ?

You should agree that attributes.addClass(classes) method is doing something like adding class to the existing attributes, but not returning the output of all attributes.

Could you tell me please why this attributes variable is useful, how can I use it to provide better decoupling or whatever it is used for. Why not just to keep classes directly in a template file, is it possible to add them from admin panel ? Thanks

Answer 1

A general reason is that contributed modules or theme code can hook in and add attributes in. Outputting {{ attributes }} ensures that they are all printed without hardcoding them all in templates.

Here is an example.

I want to add a class and data-attr to an input field on a particular form. Instead of hardcoding it, I add to the #attributes key, and they are rendered out for me since {{ attributes }} is printed on the element:

/**
 * @param $form
 * @param \Drupal\Core\Form\FormStateInterface $form_state
 * @param $form_id
 */
function mytheme_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  if ($form['#id'] == 'views-exposed-form-search-results') {  
    $form['actions']['submit']['#attributes']['data-twig-suggestion'] = 'search_results_submit';
    $form['actions']['submit']['#attributes']['class'][] = 'search-box__button';
  }
}

My class and data-attr are added to that element automatically. I don't need to know what twig file is rendering it, I just need to provide the attributes I want to add on to, or print out.

Here are some links that explain a bit more in depth what Attributes are:

• https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Template!Attribute.php/class/Attribute/8.2.x
• https://www.drupal.org/docs/8/theming-drupal-8/modifying-attributes-in-a-theme-file

I heard that in 8.3.x it will be easier to work with attributes, but I can't find the thread offhand.