Using attributes in Twig template

Submitted by shiv on Fri, 04/22/2016 - 20:19
Many Twig templates will have one or more attribute objects passed in as variables. The job of the Attribute object is to store a set of HTML attributes, give the themer helpful methods to interact with that data and allow for easy printing of the attributes. It should look something like this:
 <div{{ attributes }}></div>
There should not be any space between the tag name and the Twig syntax. By default the following attribute objects variables are available to all
 templates: attributes, title_attributes, and content_attributes. 

Splitting out the class attribute:

<div class="myclass {{ attributes.class }}">   </div> 
Here are other helpful methods you can use with the Attribute object:

Adds classes or merges them on to array of existing CSS classes.

Single class:


Multiple classes:

  set classes = [
 <div{{ attributes.addClass(classes) }}> </div>
<div class="red green"></div>
Removes a class from an Attribute object. Used similarly to addClass. Let's say you get the classes variable from somewhere else like a preprocess function.
 {% set classes = [ 'red', 'green', 'blue' ] %}

<div{{ attributes.addClass(classes).removeClass('green') }}></div>
 <div class="red blue"> </div>.

attributes.setAttribute($attribute, $value)

Sets values for an attribute key.



Removes an attribute from an Attribute object.
<div{{ attributes.removeAttribute('id') }}></div>

Checks if the class array has the given CSS class.

{% if attributes.hasClass('myClass') %}
  {# do stuff #}
{% endif %} 
Create Attributes in Twig As of Drupal 8.3.x there is a new Twig function create_attribute() See the change record:

This provides a new blank Attribute object to use to build up attributes.

{% set my_attribute = create_attribute() %}
  set my_classes = [
<div{{ my_attribute.addClass(my_classes).addAttribute('id', 'myUniqueId') }}>
  {{ content }}
<div{{ create_attribute({'class': ['region', 'region--header']}) }}>
  {{ content }}
Other helpful snippets Dot notation can be chained
{% set classes = ['red', 'green', 'blue'] %}
{% set my_id = 'specific-id' %}
{% set image_src = '' %}
<img{{ attributes.addClass(classes).removeClass('green').setAttribute('id', my_id).setAttribute('src', image_src) }}>
outputs <img id="specific-id" class="red blue" src="">
Using without filter The twig filter without to retrieve part of attributes:
 <div class="myclass {{ attributes.class }}"{{attributes|without('class') }}></div> 
Note that in most cases code like the above should be avoided in favor of using addClass().
Check updated info @ here

Sample blackbox block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non porta odio, id mattis erat.

Nam sed tincidunt eros. Donec a venenatis odio, vitae commodo sem. Vivamus ullamcorper pellentesque erat, in adipiscing tortor scelerisque sit amet. Nulla pulvinar urna magna. Vivamus a ipsum lorem. Etiam adipiscing pulvinar lorem.