Attributes

In the previous three examples of theme hooks, we encountered the concept of attributes in the context of using them to render HTML elements. Attributes here are understood in the same way as with HTML. For example, class, id, style, and href are all HTML element attributes. Why is this important?

The reusability of theme hooks makes it so that we cannot hardcode all our HTML attributes in the Twig template files. We can have some, including classes, but we will always need to allow business logic to inform the theme hook of certain attribute values it needs printed on the HTML element. For example, an active class on a link. This is why we have this concept of attributes.

Most theme hooks you'll see have attributes in some form or another, with the variable usually being called $attributes, $wrapper_attributes, or something of that nature. Also, this variable always needs to be a multidimensional array with the attribute data you want passed. The keys in this array are the name of the attribute, whereas the value is the attribute value. If the value can have multiple items, such as classes, it will also be an array. Consider the following example:

$attributes = [

  'id' => 'my-id',

  'class' => ['class-one', 'class-two'],

  'data-custom' => 'my custom data value'

];

As you can see, we have some common attributes, but you can also make up your own as needed (usually in the form of data attributes). However, in no way is this mandatory, and you can add only the ones you actually need. Do always, though, read the documentation on the theme hook to see how they are used and which elements are actually going to get them.

From an API point of view, Drupal handles attributes via a handy class called Attribute. You'll note that many template preprocessors will take that array and construct a new Attribute object for manipulating them with more ease. Additionally, such an object is also renderable because it implements the MarkupInterface and Twig will know directly how to transform it into a string. And to make dealing with attribute collections easier, a helper class called AttributeHelper was introduced.

So, keep that in mind if you are writing your own theme hooks and need to handle attributes with more class (pun intended).