Problem/Motivation

Add class and id filters for use in twig templates.

Proposed resolution

Add twig filters called (names tbd) 'clean_class' and 'clean_id' that run the text through drupal_html_class() and drupal_clean_id_identifier(), respectively.

After filters added:

<div id="{{ attributes.id|clean_id }}" class="oembed oembed-video oembed-provider-{{ provider|clean_class }}">

Remaining tasks

Agree on the filter names?...

User interface changes

N/A

API changes

Two new filters available.

Files: 
CommentFileSizeAuthor
#22 add_twig_filters_for-2283301-22.patch3.17 KBdavidhernandez
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 75,402 pass(es). View
#14 interdiff.txt2.68 KBCottser
#14 2283301-14.patch2.44 KBCottser
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 75,317 pass(es). View
#11 2283301-twig-class-id-filters.patch2.06 KBDave Reid
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 73,175 pass(es). View
#7 interdiff.txt1.87 KBjoelpittet
#7 2283301-id-class-twig-filter-7.patch2.18 KBjoelpittet
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 72,750 pass(es). View
#5 2283301-twig-class-id-filters.patch2.12 KBDave Reid
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 72,292 pass(es). View
#1 2283301-twig-class-id-filters.patch2.12 KBDave Reid
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 71,989 pass(es). View

Comments

Dave Reid’s picture

Status: Active » Needs review
FileSize
2.12 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 71,989 pass(es). View
Dave Reid’s picture

Dave Reid’s picture

Issue tags: +Twig
Cottser’s picture

Yep for sure, I even used this as an example in the Twig playground in Austin.

+++ b/core/lib/Drupal/Core/Template/TwigExtension.php
@@ -50,6 +50,10 @@ public function getFilters() {
+      // CSS class and ID filters

Add a period here ;)

Then I can RTBC!

Dave Reid’s picture

FileSize
2.12 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 72,292 pass(es). View

One extra period added!

Cottser’s picture

Status: Needs review » Reviewed & tested by the community
Related issues: +#2254153: Move node classes out of preprocess and into templates

I like it! Thanks @Dave Reid :)

Adding another related issue.

joelpittet’s picture

FileSize
2.18 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 72,750 pass(es). View
1.87 KB

Just adding another test to make sure we don't accidentally break BEM syntax as we have in D7.

catch’s picture

Status: Reviewed & tested by the community » Needs work
joelpittet’s picture

@Dave Reid and @Cottser, from a sober second thought, I'd like to propose a name change as |class is very ambiguous.

Any chance 'sanitize_class' would fly as a name change?

Also, re #8 @Catch, et al would drupal_clean_id_identifier work for a 'sanitize_id' filter?

FWIW, I'm also fine with 'clean_class' and 'clean_id', though I can think of a few cases that those |class and |id filters could be used to do different things...

mortendk’s picture

Issue tags: +banana

We opened up a sandbox for a poc for the banana https://www.drupal.org/sandbox/cottser/2297653

Dave Reid’s picture

Status: Needs work » Needs review
FileSize
2.06 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 73,175 pass(es). View

Ok, given the debate about drupal_html_id(), it makes sense to just have the class filter for now since it definitely will be useful for people.

joelpittet’s picture

@Dave Reid any thoughts on #9?

Fabianx’s picture

Title: Add Twig filters for drupal_html_class() and drupal_html_id() » Add Twig filters for drupal_html_class() and drupal_clean_id_identifier()

I agree with #12, lets use clean_id and clean_class and use drupal_clean_id_identifier and drupal_html_class to make those work.

Cottser’s picture

FileSize
2.44 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 75,317 pass(es). View
2.68 KB

Here's #13. I considered taking out the second ID from the test but I think it's useful that we are differentiating between using drupal_clean_id_identifier() and drupal_html_id(), so I tweaked the text used in the test a bit to explain it for people looking at this code later.

Cottser’s picture

Interdiff is from #7.

Fabianx’s picture

Status: Needs review » Reviewed & tested by the community

**RTBC**

alexpott’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs issue summary update
+++ b/core/lib/Drupal/Core/Template/TwigExtension.php
@@ -82,6 +82,10 @@ public function getFilters() {
+      new \Twig_SimpleFilter('clean_id', 'drupal_clean_id_identifier'),

+++ b/core/modules/system/tests/modules/twig_theme_test/templates/twig_theme_test.filter.html.twig
@@ -20,3 +20,4 @@
+<div id="{{ attributes.id|clean_id }}"><span class="{{ 'Gray like a bunny!'|clean_class }} {{ 'BEM__ized--Top Feature'|clean_class }}" id="{{ attributes.id|clean_id }}">ID and class. Having the same ID twice is not valid markup but we want to make sure the filter doesn't use drupal_html_id().</span></div>

It might be nice to test that drupal_clean_id_identifier is call correctly... with the id being "quotes" it is not actaully cleaning anything. I like the fact we're testing it is not using drupal_html_id().

Also the issue summary could do with an update to accord with the latest patch.

jwilson3’s picture

Huge +1 here. One comment though about the name of the filter...

This will drastically improve implementation and syntax as CSS classes are moved out of preprocess functions, such as the work going on here: #2217731: Move field classes out of preprocess and into templates.

The template code in that example is already very long:

<div class="field field-{{ css_entity_type }}--{{ css_field_name }} field-name-{{ css_field_name }} field-type-{{ css_field_type }} field-label-{{ css_label_display }}{{ (attributes.class is defined) ? ' ' ~ attributes.class  : '' }}"{{ attributes }}>

If we were to switch to using this method, it would be nice to be able to shorten the code using a filter called c instead of clean_css.

<div class="field field-{{ entity_type|c }}--{{ field_name|c }} field-name-{{ field_name|c }} field-type-{{ field_type|c }} field-label-{{ label_display|c }}{{ (attributes.class is defined) ? ' ' ~ attributes.class  : '' }}"{{ attributes }}>
  • We already have the t filter that themers will have to learn.
  • This filter will be used more often than the t function in templates (so we have precedence).
  • LEAP OF FAITH WARNING: Teaching themers (and devs!) what c means will be a no brainer.
  • For something so ubiquitous for themers, just as t is for backend devs, it makes sense to use something brief.
joelpittet’s picture

@jwilson3 there is a historical presidence for the t filter and t() from drupal, and the |e and |escape from twig. I'm a bit leery at |c being for |clean_class. I understand it would have a wide use, but still worries me. We can maybe open up an issue for 8.1.x shorteners and punt that to a contrib twig extension so we can have some time to deliberate on that?

Cottser’s picture

Single letter things are often hard to look up.

Crell’s picture

Readabilty trumps typing. We can always add aliases later if needs be, so don't let that block here. clean_class is fine.

davidhernandez’s picture

Issue summary: View changes
FileSize
3.11 KB
3.17 KB
PASSED: [[SimpleTest]]: [PHP 5.4 MySQL] 75,402 pass(es). View

Added id text to be filtered, and updated some text. Updated summary.

Are we agreeing on clean_class and clean_id?

davidhernandez’s picture

Status: Needs work » Needs review
mdrummond’s picture

Status: Needs review » Reviewed & tested by the community

clean_class and clean_id make good sense. Patch addresses concerns raised in #17. Back to RTBC.

  • alexpott committed 3f3fc8d on 8.0.x
    Issue #2283301 by Dave Reid, davidhernandez, Cottser, joelpittet: Added...
alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed 3f3fc8d and pushed to 8.0.x. Thanks!

Status: Fixed » Closed (fixed)

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