Media: Ensure that the image widget supports loading optimization attributes.

This changeset adds support for loading optimization attributes such as `loading="lazy"` and `fetchpriority="high"` to the image widget. A new context `widget_media_image` is introduced for that purpose.

Props spacedmonkey, thekt12, mukesh27, westonruter.
Fixes #58704.
See #58235.


git-svn-id: https://develop.svn.wordpress.org/trunk@56154 602fd350-edb4-49c9-b593-d223f7449a82

Author: felixarntz

src/wp-includes/media.php

@@ -5662,7 +5662,7 @@ function wp_get_loading_optimization_attributes( $tag_name, $attr, $context ) {
 	}
 
 	// Special handling for programmatically created image tags.
-	if ( 'the_post_thumbnail' === $context || 'wp_get_attachment_image' === $context ) {
+	if ( 'the_post_thumbnail' === $context || 'wp_get_attachment_image' === $context || 'widget_media_image' === $context ) {
 		/*
 		 * Skip programmatically created images within post content as they need to be handled together with the other
 		 * images within the post content.

src/wp-includes/widgets/class-wp-widget-media-image.php

@@ -239,14 +239,31 @@ public function render_media( $instance ) {
 				$instance['height'] = '';
 			}
 
-			$image = sprintf(
-				'<img class="%1$s" src="%2$s" alt="%3$s" width="%4$s" height="%5$s" />',
-				esc_attr( $classes ),
-				esc_url( $instance['url'] ),
-				esc_attr( $instance['alt'] ),
-				esc_attr( $instance['width'] ),
-				esc_attr( $instance['height'] )
+			$attr = array(
+				'class'    => $classes,
+				'src'      => $instance['url'],
+				'alt'      => $instance['alt'],
+				'width'    => $instance['width'],
+				'height'   => $instance['height'],
+				'decoding' => 'async',
 			);
+
+			$loading_optimization_attr = wp_get_loading_optimization_attributes(
+				'img',
+				$attr,
+				'widget_media_image'
+			);
+
+			$attr = array_merge( $attr, $loading_optimization_attr );
+
+			$attr  = array_map( 'esc_attr', $attr );
+			$image = '<img';
+
+			foreach ( $attr as $name => $value ) {
+				$image .= ' ' . $name . '="' . $value . '"';
+			}
+
+			$image .= ' />';
 		} // End if().
 
 		$url = '';

tests/phpunit/tests/media.php

@@ -4191,7 +4191,7 @@ static function() {
 	 *
 	 * @expectedDeprecated wp_get_loading_attr_default
 	 *
-	 * @dataProvider data_special_contexts_for_the_content
+	 * @dataProvider data_special_contexts_for_the_content_wp_get_loading_attr_default
 	 *
 	 * @param string $context Context for the element for which the `loading` attribute value is requested.
 	 */
@@ -4208,7 +4208,7 @@ public function test_wp_get_loading_attr_default_should_return_lazy_for_special_
 	 *
 	 * @expectedDeprecated wp_get_loading_attr_default
 	 *
-	 * @dataProvider data_special_contexts_for_the_content
+	 * @dataProvider data_special_contexts_for_the_content_wp_get_loading_attr_default
 	 *
 	 * @param string $context Context for the element for which the `loading` attribute value is requested.
 	 */
@@ -4233,6 +4233,19 @@ static function( $content ) use ( &$result, $context ) {
 	 * @return array[]
 	 */
 	public function data_special_contexts_for_the_content() {
+		return array(
+			'widget_media_image'      => array( 'context' => 'widget_media_image' ),
+			'the_post_thumbnail'      => array( 'context' => 'the_post_thumbnail' ),
+			'wp_get_attachment_image' => array( 'context' => 'wp_get_attachment_image' ),
+		);
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array[]
+	 */
+	public function data_special_contexts_for_the_content_wp_get_loading_attr_default() {
 		return array(
 			'the_post_thumbnail'      => array( 'context' => 'the_post_thumbnail' ),
 			'wp_get_attachment_image' => array( 'context' => 'wp_get_attachment_image' ),

tests/phpunit/tests/widgets/wpWidgetMediaImage.php

@@ -494,6 +494,8 @@ public function test_render_media() {
 
 		// Custom image class.
 		$this->assertStringContainsString( 'src="http://example.org/url/to/image.jpg"', $output );
+		$this->assertStringContainsString( 'decoding="async"', $output );
+		$this->assertStringContainsString( 'loading="lazy"', $output );
 
 		// Link settings.
 		ob_start();