Make WordPress Core

Opened 8 years ago

Last modified 5 years ago

#37868 assigned enhancement

Avoid default width styles in the markup of the audio player

Reported by: geertdd's profile GeertDD Owned by: wonderboymusic's profile wonderboymusic
Milestone: Future Release Priority: normal
Severity: normal Version: 4.6
Component: Embeds Keywords: has-patch early needs-refresh
Focuses: Cc:


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;

Attachments (1)

37868.diff (759 bytes) - added by GeertDD 8 years ago.

Download all attachments as: .zip

Change History (7)

8 years ago

#1 @wonderboymusic
8 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 4.7
  • Owner set to wonderboymusic
  • Status changed from new to assigned

thanks @GeertDD, I need to do some testing and remember why this is here

#2 @jorbin
8 years ago

@wonderboymusic Have you been able to remember if there is a reason this was done the way it was done, or do you think it could be changed?

#3 @jorbin
8 years ago

@wonderboymusic Any luck looking into this? Want to #yolo this?

This ticket was mentioned in Slack in #core by chriscct7. View the logs.

8 years ago

#5 @chriscct7
8 years ago

  • Keywords 4.8-early added
  • Milestone changed from 4.7 to Future Release

Punting to 4.8 early to allow for an early release cycle dev blog post and let this soak in for adequate theme testing

#6 @desrosj
5 years ago

  • Keywords early needs-refresh added; 4.8-early removed

37868.diff needs to be refreshed to apply to current trunk.

Note: See TracTickets for help on using tickets.