diff --git a/src/wp-includes/media.php b/src/wp-includes/media.php index a0e7ef9c6c..37ec7fc737 100644 --- a/src/wp-includes/media.php +++ b/src/wp-includes/media.php @@ -1077,6 +1077,8 @@ function wp_get_attachment_image( $attachment_id, $size = 'thumbnail', $icon = f } } + $attr['decoding'] = 'async'; + /** * Filters the list of attachment image attributes. * @@ -1843,6 +1845,11 @@ function wp_filter_content_tags( $content, $context = null ) { $filtered_image = wp_img_tag_add_loading_attr( $filtered_image, $context ); } + // Add 'decoding=async' attribute unless a 'decoding' attribute is already present. + if ( false === strpos( $filtered_image, ' decoding=' ) ) { + $filtered_image = wp_img_tag_add_decoding_async_attr( $filtered_image, $context ); + } + if ( $filtered_image !== $match[0] ) { $content = str_replace( $match[0], $filtered_image, $content ); } @@ -1911,6 +1918,45 @@ function wp_img_tag_add_loading_attr( $image, $context ) { return $image; } +/** + * Add `decoding` attribute to an `img` HTML tag. + * + * The `decoding` attribute allows developers to indicate whether the + * browser can decode the image off the main thread (`async`), on the + * main thread (`sync`) or as determined by the browser (`auto`). + * + * By default WordPress adds `decoding="async"` to images but developers + * can use the {@see 'wp_img_tag_add_decoding_attr'} filter to modify this + * to remove the attribute or set it to another accepted value. + * + * @since 6.0.0 + * + * @param string $image The HTML `img` tag where the attribute should be added. + * @param string $context Additional context to pass to the filters. + * @return string Converted `img` tag with `decoding` attribute added. + */ +function wp_img_tag_add_decoding_async_attr( $image, $context ) { + /** + * Filters the `decoding` attribute value to add to an image. Default `async`. + * + * Returning `false` or an empty string will not add the attribute. + * + * @since 6.0.0 + * + * @param string|bool $value The `decoding` attribute value. Returning a falsey value will result in + * the attribute being omitted for the image. Otherwise, it may be: + * 'async' (default), 'sync', or 'auto'. + * @param string $image The HTML `img` tag to be filtered. + * @param string $context Additional context about how the function was called or where the img tag is. + */ + $value = apply_filters( 'wp_img_tag_add_decoding_attr', 'async', $image, $context ); + if ( in_array( $value, array( 'async', 'sync', 'auto' ), true ) ) { + $image = str_replace( ' false, 'loading' => null, 'extra_attr' => '', + 'decoding' => 'async', ); if ( wp_lazy_loading_enabled( 'img', 'get_avatar' ) ) { @@ -2781,6 +2782,13 @@ if ( ! function_exists( 'get_avatar' ) ) : $extra_attr .= "loading='{$loading}'"; } + if ( isset( $args['decoding'] ) && in_array( $args['decoding'], array( 'async', 'sync', 'auto' ) ) && ! preg_match( '/\bdecoding\s*=/', $extra_attr ) ) { + if ( ! empty( $extra_attr ) ) { + $extra_attr .= ' '; + } + $extra_attr .= "decoding='{$args['decoding']}'"; + } + $avatar = sprintf( "%s", esc_attr( $args['alt'] ), diff --git a/tests/phpunit/tests/avatar.php b/tests/phpunit/tests/avatar.php index 336ab611e2..026809b4a1 100644 --- a/tests/phpunit/tests/avatar.php +++ b/tests/phpunit/tests/avatar.php @@ -169,7 +169,7 @@ class Tests_Avatar extends WP_UnitTestCase { public function test_get_avatar() { $img = get_avatar( 1 ); - $this->assertSame( preg_match( "|^[^$|", $img ), 1 ); + $this->assertSame( preg_match( "|^[^$|", $img ), 1 ); } public function test_get_avatar_size() { diff --git a/tests/phpunit/tests/media.php b/tests/phpunit/tests/media.php index 5d92d9718b..88d1418210 100644 --- a/tests/phpunit/tests/media.php +++ b/tests/phpunit/tests/media.php @@ -1474,7 +1474,7 @@ EOF; public function test_wp_get_attachment_image_defaults() { $image = image_downsize( self::$large_id, 'thumbnail' ); $expected = sprintf( - '', + '', $image[1], $image[2], $image[0] @@ -1512,7 +1512,7 @@ EOF; $image = image_downsize( self::$large_id, 'thumbnail' ); $expected = sprintf( - 'Some very clever alt text', + 'Some very clever alt text', $image[1], $image[2], $image[0] @@ -2248,6 +2248,7 @@ EOF; $respimg_xhtml, $respimg_html5 ); + $content_filtered = wp_img_tag_add_decoding_async_attr( $content_filtered, 'the_content' ); // Do not add width, height, and loading. add_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' ); @@ -2273,6 +2274,7 @@ EOF; public function test_wp_filter_content_tags_srcset_sizes_wrong() { $img = get_image_tag( self::$large_id, '', '', '', 'medium' ); $img = wp_img_tag_add_loading_attr( $img, 'test' ); + $img = wp_img_tag_add_decoding_async_attr( $img, 'the_content' ); // Replace the src URL. $image_wrong_src = preg_replace( '|src="[^"]+"|', 'src="http://' . WP_TESTS_DOMAIN . '/wp-content/uploads/foo.jpg"', $img ); @@ -2287,6 +2289,7 @@ EOF; // Generate HTML and add a dummy srcset attribute. $img = get_image_tag( self::$large_id, '', '', '', 'medium' ); $img = wp_img_tag_add_loading_attr( $img, 'test' ); + $img = wp_img_tag_add_decoding_async_attr( $img, 'the_content' ); $img = preg_replace( '|]+) />|', '', $img ); // The content filter should return the image unchanged. @@ -2383,6 +2386,7 @@ EOF; $respimg_https, $respimg_relative ); + $expected = wp_img_tag_add_decoding_async_attr( $expected, 'the_content' ); $actual = wp_filter_content_tags( $unfiltered ); @@ -2527,7 +2531,7 @@ EOF; 'src="' . $uploads_url . 'test-image-testsize-999x999.jpg" ' . 'class="attachment-testsize size-testsize" alt="" loading="lazy" ' . 'srcset="' . $uploads_url . 'test-image-testsize-999x999.jpg 999w, ' . $uploads_url . $basename . '-150x150.jpg 150w" ' . - 'sizes="(max-width: 999px) 100vw, 999px" />'; + 'sizes="(max-width: 999px) 100vw, 999px" decoding="async" />'; $actual = wp_get_attachment_image( self::$large_id, 'testsize' ); @@ -2832,7 +2836,7 @@ EOF; %4$s'; $content_unfiltered = sprintf( $content, $img, $img_no_width_height, $img_no_width, $img_no_height ); - $content_filtered = sprintf( $content, $img, $respimg_no_width_height, $img_no_width, $img_no_height ); + $content_filtered = wp_img_tag_add_decoding_async_attr( sprintf( $content, $img, $respimg_no_width_height, $img_no_width, $img_no_height ), 'the_content' ); // Do not add loading, srcset, and sizes. add_filter( 'wp_img_tag_add_loading_attr', '__return_false' ); @@ -2890,7 +2894,7 @@ EOF; %8$s'; $content_unfiltered = sprintf( $content, $img, $img_xhtml, $img_html5, $img_eager, $img_no_width_height, $iframe, $iframe_eager, $iframe_no_width_height ); - $content_filtered = sprintf( $content, $lazy_img, $lazy_img_xhtml, $lazy_img_html5, $img_eager, $img_no_width_height, $lazy_iframe, $iframe_eager, $iframe_no_width_height ); + $content_filtered = wp_img_tag_add_decoding_async_attr( sprintf( $content, $lazy_img, $lazy_img_xhtml, $lazy_img_html5, $img_eager, $img_no_width_height, $lazy_iframe, $iframe_eager, $iframe_no_width_height ), 'the_content' ); // Do not add width, height, srcset, and sizes. add_filter( 'wp_img_tag_add_width_and_height_attr', '__return_false' ); @@ -2919,7 +2923,7 @@ EOF; %2$s'; $content_unfiltered = sprintf( $content, $img, $iframe ); - $content_filtered = sprintf( $content, $lazy_img, $lazy_iframe ); + $content_filtered = sprintf( $content, wp_img_tag_add_decoding_async_attr( $lazy_img ), $lazy_iframe, 'the_content' ); // Do not add srcset and sizes while testing. add_filter( 'wp_img_tag_add_srcset_and_sizes_attr', '__return_false' ); @@ -2937,7 +2941,7 @@ EOF; * @ticket 50756 */ public function test_wp_filter_content_tags_loading_lazy_opted_out() { - $img = get_image_tag( self::$large_id, '', '', '', 'medium' ); + $img = wp_img_tag_add_decoding_async_attr( get_image_tag( self::$large_id, '', '', '', 'medium' ), 'the_content' ); $iframe = ''; $content = ' @@ -3401,7 +3405,7 @@ EOF; // Following the threshold of 2, the first two content media elements should not be lazy-loaded. $content_unfiltered = $img1 . $iframe1 . $img2 . $img3 . $iframe2; - $content_expected = $img1 . $iframe1 . $lazy_img2 . $lazy_img3 . $lazy_iframe2; + $content_expected = wp_img_tag_add_decoding_async_attr( $img1 . $iframe1 . $lazy_img2 . $lazy_img3 . $lazy_iframe2, 'the_content' ); $wp_query = new WP_Query( array( 'post__in' => array( self::$post_ids['publish'] ) ) ); $wp_the_query = $wp_query; diff --git a/tests/phpunit/tests/media/getAdjacentImageLink.php b/tests/phpunit/tests/media/getAdjacentImageLink.php index 735c0ff15c..1c4133d6e7 100644 --- a/tests/phpunit/tests/media/getAdjacentImageLink.php +++ b/tests/phpunit/tests/media/getAdjacentImageLink.php @@ -32,7 +32,7 @@ class Tests_Media_GetAdjacentImageLink extends WP_Test_Adjacent_Image_Link_TestC 'when has previous link' => array( 'current_attachment_index' => 3, 'expected_attachment_index' => 2, - 'expected' => '', + 'expected' => '', ), 'with text when has previous link' => array( 'current_attachment_index' => 3, @@ -43,7 +43,7 @@ class Tests_Media_GetAdjacentImageLink extends WP_Test_Adjacent_Image_Link_TestC 'when has next link' => array( 'current_attachment_index' => 4, 'expected_attachment_index' => 5, - 'expected' => '', + 'expected' => '', 'args' => array( 'prev' => false ), ), 'with text when has next link' => array( diff --git a/tests/phpunit/tests/media/getNextImageLink.php b/tests/phpunit/tests/media/getNextImageLink.php index 86a843cbfc..88ee51a434 100644 --- a/tests/phpunit/tests/media/getNextImageLink.php +++ b/tests/phpunit/tests/media/getNextImageLink.php @@ -31,7 +31,7 @@ class Tests_Media_GetNextImageLink extends WP_Test_Adjacent_Image_Link_TestCase 'when has next link' => array( 'current_attachment_index' => 4, 'expected_attachment_index' => 5, - 'expected' => '', + 'expected' => '', ), 'with text when has next link' => array( 'current_attachment_index' => 4, diff --git a/tests/phpunit/tests/media/getPreviousImageLink.php b/tests/phpunit/tests/media/getPreviousImageLink.php index 2d2d511e4f..d0eba54295 100644 --- a/tests/phpunit/tests/media/getPreviousImageLink.php +++ b/tests/phpunit/tests/media/getPreviousImageLink.php @@ -31,7 +31,7 @@ class Tests_Media_GetPreviousImageLink extends WP_Test_Adjacent_Image_Link_TestC 'when has previous link' => array( 'current_attachment_index' => 3, 'expected_attachment_index' => 2, - 'expected' => '', + 'expected' => '', ), 'with text when has previous link' => array( 'current_attachment_index' => 3, diff --git a/tests/phpunit/tests/media/nextImageLink.php b/tests/phpunit/tests/media/nextImageLink.php index 7799779fa8..f6da4605ca 100644 --- a/tests/phpunit/tests/media/nextImageLink.php +++ b/tests/phpunit/tests/media/nextImageLink.php @@ -30,7 +30,7 @@ class Tests_Media_NextImageLink extends WP_Test_Adjacent_Image_Link_TestCase { 'when has next link' => array( 'current_attachment_index' => 4, 'expected_attachment_index' => 5, - 'expected' => '', + 'expected' => '', ), 'with text when has next link' => array( 'current_attachment_index' => 4, diff --git a/tests/phpunit/tests/media/previousImageLink.php b/tests/phpunit/tests/media/previousImageLink.php index 11d6583d6a..de422e0379 100644 --- a/tests/phpunit/tests/media/previousImageLink.php +++ b/tests/phpunit/tests/media/previousImageLink.php @@ -30,7 +30,7 @@ class Tests_Media_PreviousImageLink extends WP_Test_Adjacent_Image_Link_TestCase 'when has previous link' => array( 'current_attachment_index' => 3, 'expected_attachment_index' => 2, - 'expected' => '', + 'expected' => '', ), 'with text when has previous link' => array( 'current_attachment_index' => 3,