Right now, when we add classes to a div, we do it this way:

 <div class="content {{ attributes.class }}"{{ attributes }}>

This is alright, but it would be *better* if we could find some kind of filter for content_attributes.class that could eat the whitespace to the left of the twig print indicator {{ *only* when attributes.class is empty.

There are several alternatives to the way we are currently doing this.

1) Preprocess everything and add all classes into attributes early, instead of printing them in the templates.
- I think this is a bad idea because it will be harder for front-end devs to know which div is which if they all look the same in the template

2) Use Twig's whitespace controllers.
- Right now this does not work because the {{- controller removes the whitespace even when there is a class there, slamming two class names together and rendering them both useless. We would need to modify this behavior of twig in order to use these for our classes - something I hesitate to do.

3) Come up with a better alternative.
- I vote for this :) Ideas?

Comments

steveoliver’s picture

joelpittet’s picture

Issue summary: View changes

The attribute.class needs to know it it's empty before it can eat space before the attribute.class print. Though maybe to avoid extra logic being added to twig we can use AttributeArray creatively?

Like:

  <div class="{{ attributes.class|merge(['apple', 'orange']) }}"{{ attributes }}>

Which should actually be possible right now. (untested, but if it isn't I will pre-emptively blame TwigReference #2114563: Remove TwigReference with the help of 'without' filter replacing 'show'/'hide' functions.)
http://twig.sensiolabs.org/doc/filters/merge.html

joelpittet’s picture

Status: Active » Needs review

#2 needs review I guess;)

joelpittet’s picture

Status: Needs review » Closed (duplicate)

If you use addClass/removeClass methods on the attribute object it's now unnessasary. Closing this one! woot!

#2285451: Create addClass() and removeClass() methods on Attribute object for merging css class names.