[wp-trac] [WordPress Trac] #22249: Add ability to set or remove attributes on enqueued scripts and styles.

[WordPress Trac]

#22249: Add ability to set or remove attributes on enqueued scripts and styles.
-----------------------------+------------------------------
 Reporter:  ryanve           |       Owner:
     Type:  feature request  |      Status:  new
 Priority:  normal           |   Milestone:  Awaiting Review
Component:  General          |     Version:
 Severity:  normal           |  Resolution:
 Keywords:  dev-feedback     |
-----------------------------+------------------------------

Comment (by raphaelvalerio):

 This feature would also be useful for removing `type='text/javascript'`,
 since it's redundant in HTML5. As far as I know, currently the only way of
 using a `<script>` element without the type attribute is to hardcode it
 into your theme.

 Styles do have a filter hook you can use to alter the markup:
 {{{
 add_filters( 'style_loader_tag' )
 }}}

 (see ''wp-includes/class.wp-styles.php'', line 83)

 I haven't tried hooking into this filter, but I think the whole `<link>`
 element is a string, not an array, which could be improved upon. But at
 least it's hookable.

 Scripts, on the other hand, have no filter to hook. Not only that, but the
 `<script>` element is printed to the site with a simple `echo` statement
 right in the function, so there's no variable to modify.

 This happens in ''wp-includes/class.wp-scripts.php'', in the `do_item()`
 function on line 125. I toyed around with adding in a filter. Although
 this doesn't correspond exactly to what you're asking, here's one solution
 for the script tag side of things:

 Replace lines 122-125 of ''wp-includes/class.wp-scripts.php'' with:
 {{{
 $attrs = array( 'type' => 'text/javascript' );

 $attrs = apply_filters( 'script_loader_attrs', $attrs );

 $attrs_string = '';

 if(!empty( $attrs ) ) {
         foreach ( $attrs as $key => $value ) {
                 $attrs_string .= "$key='" . esc_attr( $value ) . "' ";
         }
         $attrs = ltrim( $attrs_string );
 }

 if ( $this->do_concat )
         $this->print_html .= "<script " . $attrs . "
 src='$src'></script>\n";
 else
         echo "<script " . $attrs . "src='$src'></script>\n";
 }}}

 You can then use add_filter in your themes/plugins like so:
 {{{
 add_filter( 'script_loader_attrs', 'my_function' );

 function my_function( $attrs ) {
    $attrs = array('async' => 'async', 'charset' => 'utf8') // whatever
 attributes you want

    // alternatively, eliminate type='text/javascript' by emptying $attrs:
    // $attrs = '';

    return $attrs;
 }
 }}}

 The code above will always produce XHTML type attributes, e.g.
 `async='async'`. I'd need to add in a little code in the loop if the
 author wanted the more succinct `async` HTML5 version of the boolean.

 For backward compatibility, the code will default back to including
 `type='text/javascript'` if no filter hooks in.

 If people are interested in trying this solution, I could upload a diff
 file.

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/22249#comment:5>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software