From fc0531c4d57b0ffc3ab9a705cd4ef4bd838ae334 Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Sun, 16 Mar 2025 18:49:39 +0000
Subject: [PATCH] Media: Add 'muted' attribute and normalize HTML attributes.
Add the 'muted' attribute to the audio shortcode. Fix boolean attributes to meet HTML5 standards. Replaces instances like `attr="1"` with `attr` for `loop`, `autoplay`, and `muted`, and improves handling of the `preload` attribute to only output valid values.
Props shub07, dmsnell, debarghyabanerjee, audrasjb, narenin, apermo, joedolson.
Fixes #61515.
git-svn-id: https://develop.svn.wordpress.org/trunk@59987 602fd350-edb4-49c9-b593-d223f7449a82
---
src/wp-includes/media.php | 22 ++++++++++++++++---
tests/phpunit/tests/media.php | 11 ++++++----
.../tests/widgets/wpWidgetMediaAudio.php | 2 +-
3 files changed, 27 insertions(+), 8 deletions(-)
diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php
index 1d6d987bb9..da46ef90a7 100644
--- a/src/wp-includes/media.php
+++ b/src/wp-includes/media.php
@@ -3345,6 +3345,7 @@ function wp_get_attachment_id3_keys( $attachment, $context = 'display' ) {
* WordPress mp3s in a post.
*
* @since 3.6.0
+ * @since 6.8.0 Added the 'muted' attribute.
*
* @param array $attr {
* Attributes of the audio shortcode.
@@ -3352,6 +3353,7 @@ function wp_get_attachment_id3_keys( $attachment, $context = 'display' ) {
* @type string $src URL to the source of the audio file. Default empty.
* @type string $loop The 'loop' attribute for the `<audio>` element. Default empty.
* @type string $autoplay The 'autoplay' attribute for the `<audio>` element. Default empty.
+ * @type string $muted The 'muted' attribute for the `<audio>` element. Default 'false'.
* @type string $preload The 'preload' attribute for the `<audio>` element. Default 'none'.
* @type string $class The 'class' attribute for the `<audio>` element. Default 'wp-audio-shortcode'.
* @type string $style The 'style' attribute for the `<audio>` element. Default 'width: 100%;'.
@@ -3390,6 +3392,7 @@ function wp_audio_shortcode( $attr, $content = '' ) {
'src' => '',
'loop' => '',
'autoplay' => '',
+ 'muted' => 'false',
'preload' => 'none',
'class' => 'wp-audio-shortcode',
'style' => 'width: 100%;',
@@ -3469,12 +3472,13 @@ function wp_audio_shortcode( $attr, $content = '' ) {
'id' => sprintf( 'audio-%d-%d', $post_id, $instance ),
'loop' => wp_validate_boolean( $atts['loop'] ),
'autoplay' => wp_validate_boolean( $atts['autoplay'] ),
+ 'muted' => wp_validate_boolean( $atts['muted'] ),
'preload' => $atts['preload'],
'style' => $atts['style'],
);
// These ones should just be omitted altogether if they are blank.
- foreach ( array( 'loop', 'autoplay', 'preload' ) as $a ) {
+ foreach ( array( 'loop', 'autoplay', 'preload', 'muted' ) as $a ) {
if ( empty( $html_atts[ $a ] ) ) {
unset( $html_atts[ $a ] );
}
@@ -3482,8 +3486,20 @@ function wp_audio_shortcode( $attr, $content = '' ) {
$attr_strings = array();
- foreach ( $html_atts as $k => $v ) {
- $attr_strings[] = $k . '="' . esc_attr( $v ) . '"';
+ foreach ( $html_atts as $attribute_name => $attribute_value ) {
+ if ( in_array( $attribute_name, array( 'loop', 'autoplay', 'muted' ), true ) && true === $attribute_value ) {
+ // Add boolean attributes without a value.
+ $attr_strings[] = esc_attr( $attribute_name );
+ } elseif ( 'preload' === $attribute_name && ! empty( $attribute_value ) ) {
+ // Handle the preload attribute with specific allowed values.
+ $allowed_preload_values = array( 'none', 'metadata', 'auto' );
+ if ( in_array( $attribute_value, $allowed_preload_values, true ) ) {
+ $attr_strings[] = sprintf( '%s="%s"', esc_attr( $attribute_name ), esc_attr( $attribute_value ) );
+ }
+ } else {
+ // For other attributes, include the value.
+ $attr_strings[] = sprintf( '%s="%s"', esc_attr( $attribute_name ), esc_attr( $attribute_value ) );
+ }
}
$html = '';
diff --git a/tests/phpunit/tests/media.php b/tests/phpunit/tests/media.php
index 4d1eb7d39b..d8aac58d2a 100644
--- a/tests/phpunit/tests/media.php
+++ b/tests/phpunit/tests/media.php
@@ -941,6 +941,7 @@ VIDEO;
$this->assertStringContainsString( 'src="https://example.com/foo.mp3', $actual );
$this->assertStringNotContainsString( 'loop', $actual );
$this->assertStringNotContainsString( 'autoplay', $actual );
+ $this->assertStringNotContainsString( 'muted', $actual );
$this->assertStringContainsString( 'preload="none"', $actual );
$this->assertStringContainsString( 'class="wp-audio-shortcode"', $actual );
$this->assertStringContainsString( 'style="width: 100%;"', $actual );
@@ -950,16 +951,18 @@ VIDEO;
'src' => 'https://example.com/foo.mp3',
'loop' => true,
'autoplay' => true,
- 'preload' => true,
+ 'muted' => true,
+ 'preload' => 'none',
'class' => 'foobar',
'style' => 'padding:0;',
)
);
$this->assertStringContainsString( 'src="https://example.com/foo.mp3', $actual );
- $this->assertStringContainsString( 'loop="1"', $actual );
- $this->assertStringContainsString( 'autoplay="1"', $actual );
- $this->assertStringContainsString( 'preload="1"', $actual );
+ $this->assertStringContainsString( 'loop', $actual );
+ $this->assertStringContainsString( 'autoplay', $actual );
+ $this->assertStringContainsString( 'muted', $actual );
+ $this->assertStringContainsString( 'preload="none"', $actual );
$this->assertStringContainsString( 'class="foobar"', $actual );
$this->assertStringContainsString( 'style="padding:0;"', $actual );
}
diff --git a/tests/phpunit/tests/widgets/wpWidgetMediaAudio.php b/tests/phpunit/tests/widgets/wpWidgetMediaAudio.php
index a02c1bb042..20aee5f30b 100644
--- a/tests/phpunit/tests/widgets/wpWidgetMediaAudio.php
+++ b/tests/phpunit/tests/widgets/wpWidgetMediaAudio.php
@@ -272,7 +272,7 @@ class Tests_Widgets_wpWidgetMediaAudio extends WP_UnitTestCase {
// Custom attributes.
$this->assertStringContainsString( 'preload="auto"', $output );
- $this->assertStringContainsString( 'loop="1"', $output );
+ $this->assertStringContainsString( 'loop', $output );
}
/**