[wp-trac] [WordPress Trac] #37868: Avoid default width styles in the markup of the audio player

[WordPress Trac]

#37868: Avoid default width styles in the markup of the audio player
-------------------------+-----------------------------
 Reporter:  GeertDD      |      Owner:
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Embeds       |    Version:  4.6
 Severity:  normal       |   Keywords:
  Focuses:               |
-------------------------+-----------------------------
 The markup for every audio player contains inline styles for setting its
 width to 100%, like below (simplified):

 {{{
 <div class="wp-audio-shortcode" style="width: 100%;">
 <audio class="wp-audio-shortcode" style="width: 100%;">
 }}}

 Why not move that style to a stylesheet? It is the default style for
 ''every'' audio player, so let’s not repeat ourselves each time. Moreover,
 style attributes in the HTML make it hard to override styles. If you don’t
 want your audio player to be 100% wide you’re left with two ugly options:

 a) Use `!important` declarations in your own stylesheet to override it.

 b) Filter out the default width like this:

 {{{
 add_filter( 'shortcode_atts_audio', 'my_shortcode_atts_audio', 10, 4 );

 function my_shortcode_atts_audio( $out, $pairs, $atts, $shortcode ) {
         $out['style'] = preg_replace( '~(?:^|\s)width\s*+:\s*+100%;?~i',
 '', $out['style'] );
         return $out;
 }
 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/37868>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform