Move classes out of the preprocess functions and into the Twig templates. Use the addClass() attribute method to add classes in the template. Use the clean_class filter to filter class names, if necessary. Maintain all existing functionality and ensure all existing class names are still in the markup, even ones that are inherited.

See the following issues for more detailed examples:
#2217731: Move field classes out of preprocess and into templates
#2254153: Move node classes out of preprocess and into templates

See this change record for information about using the addClass() method:

See this change record for more information about the phase 1 process of moving class from preprocess to templates:

Preprocess Functions Modified


Twig Templates Modified


#5 move_user_classes_from-2329779-5.patch2.1 KBlauriii
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 76,065 pass(es). View
#2 move_user_classes_from-2329779-2.patch2.22 KBlauriii
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 75,608 pass(es). View
Members fund testing for the Drupal project. Drupal Association Learn more


davidhernandez’s picture

Issue tags: +FUDK
lauriii’s picture

Status: Active » Needs review
2.22 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 75,608 pass(es). View
davidhernandez’s picture

Status: Needs review » Needs work

Thanks, lauriii. Just one comment. If there is only one class, you don't need to use a variable. You can add the class name directly. Like this:

<article{{ attributes.addClass('username') }}>

davidhernandez’s picture

For future reference, more than one can be added. Like so: <article{{ attributes.addClass('red', 'blue') }}>

If there are three or more, or some logic needed to create the class name, than it is better to use the variable.

lauriii’s picture

2.1 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 76,065 pass(es). View

I updated the patch for the simpler way to apply classes.

lauriii’s picture

Status: Needs work » Needs review

Sending to testbot also!

Cottser’s picture

@davidhernandez and @lauriii, thanks! Is that rule from #4 documented on the parent meta? Maybe we could have a couple examples in that issue summary showing a smaller conversion like this and a more complex one like node and explaining when to use which method (basically #4 with another code sample for a longer one).

davidhernandez’s picture

Most of that is in the draft change record, but I can copy it to the meta as instructions.

mdrummond’s picture

Status: Needs review » Reviewed & tested by the community

This looks good to me.

Cottser’s picture


Cottser’s picture

I just manually tested both of these templates as well, the only thing that changes is the position of the class attribute within the tag.

  • alexpott committed 94201c5 on 8.0.x
    Issue #2329779 by lauriii | davidhernandez: Move user classes from...
alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed 94201c5 and pushed to 8.0.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.