Opened 8 years ago
Last modified 6 years ago
#37868 assigned enhancement
Avoid default width styles in the markup of the audio player
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | normal | Version: | 4.6 |
Component: | Embeds | Keywords: | has-patch early needs-refresh |
Focuses: | Cc: |
Description
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)
Change History (7)
#1
@
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
#2
@
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?
This ticket was mentioned in Slack in #core by chriscct7. View the logs.
8 years ago
#5
@
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
@
6 years ago
- Keywords early needs-refresh added; 4.8-early removed
37868.diff needs to be refreshed to apply to current trunk
.
thanks @GeertDD, I need to do some testing and remember why this is here