Recipes: take into account new Lazy attribute that may be added (#15366)

See https://core.trac.wordpress.org/changeset/47554

Author: jeherve

modules/shortcodes/recipe.php

@@ -618,16 +618,25 @@ private static function output_image_html( $src ) {
 			return '';
 		}
 
+		$image_attrs = array(
+			'class'    => 'jetpack-recipe-image u-photo photo',
+			'itemprop' => 'image',
+		);
+
+		if (
+			function_exists( 'wp_lazy_loading_enabled' )
+			&& wp_lazy_loading_enabled( 'img', 'wp_get_attachment_image' )
+		) {
+			$image_attrs['loading'] = 'lazy';
+		}
+
 		// If it's numeric, this may be an attachment.
 		if ( is_numeric( $src ) ) {
 			return wp_get_attachment_image(
 				$src,
 				'full',
 				false,
-				array(
-					'class'    => 'jetpack-recipe-image u-photo photo',
-					'itemprop' => 'image',
-				)
+				$image_attrs
 			);
 		}
 
@@ -639,8 +648,18 @@ private static function output_image_html( $src ) {
 			return '';
 		}
 
+		$image_attrs_markup = '';
+		foreach ( $image_attrs as $name => $value ) {
+			$image_attrs_markup .= sprintf(
+				' %1$s="%2$s"',
+				esc_attr( $name ),
+				esc_attr( $value )
+			);
+		}
+
 		return sprintf(
-			'<img class="jetpack-recipe-image u-photo photo" itemprop="image" src="%1$s" />',
+			'<img%1$s src="%2$s" />',
+			$image_attrs_markup,
 			esc_url( $src )
 		);
 	}

tests/php/modules/shortcodes/test-class.recipe.php

@@ -185,7 +185,16 @@ public function test_shortcodes_recipe_image_shortcode_src() {
 		$content = '[recipe-image https://example.com]';
 
 		$shortcode_content = do_shortcode( $content );
-		$this->assertContains( '<img class="jetpack-recipe-image u-photo photo" itemprop="image" src="https://example.com" />', $shortcode_content );
+
+		// We expect a different image markup in WP 5.5 when Lazy Load is enabled.
+		if (
+			function_exists( 'wp_lazy_loading_enabled' )
+			&& wp_lazy_loading_enabled( 'img', 'wp_get_attachment_image' )
+		) {
+			$this->assertContains( '<img class="jetpack-recipe-image u-photo photo" itemprop="image" loading="lazy" src="https://example.com" />', $shortcode_content );
+		} else {
+			$this->assertContains( '<img class="jetpack-recipe-image u-photo photo" itemprop="image" src="https://example.com" />', $shortcode_content );
+		}
 	}
 
 	/**
@@ -198,7 +207,16 @@ public function test_shortcodes_recipe_image_shortcode_src_attr() {
 		$content = '[recipe-image image="https://example.com"]';
 
 		$shortcode_content = do_shortcode( $content );
-		$this->assertContains( '<img class="jetpack-recipe-image u-photo photo" itemprop="image" src="https://example.com" />', $shortcode_content );
+
+		// We expect a different image markup in WP 5.5 when Lazy Load is enabled.
+		if (
+			function_exists( 'wp_lazy_loading_enabled' )
+			&& wp_lazy_loading_enabled( 'img', 'wp_get_attachment_image' )
+		) {
+			$this->assertContains( '<img class="jetpack-recipe-image u-photo photo" itemprop="image" loading="lazy" src="https://example.com" />', $shortcode_content );
+		} else {
+			$this->assertContains( '<img class="jetpack-recipe-image u-photo photo" itemprop="image" src="https://example.com" />', $shortcode_content );
+		}
 	}
 
 	/**
@@ -245,7 +263,7 @@ public function test_shortcodes_recipe_image_shortcode_attachment() {
 		$content = '[recipe-image ' . $attachment_id . ']';
 
 		$shortcode_content = do_shortcode( $content );
-		$this->assertContains( '<img src="http://example.org/wp-content/uploads/example.jpg" class="jetpack-recipe-image u-photo photo" alt="" itemprop="image" />', $shortcode_content );
+		$this->assertContains( '<img src="http://example.org/wp-content/uploads/example.jpg" class="jetpack-recipe-image u-photo photo"', $shortcode_content );
 	}
 
 	/**
@@ -268,7 +286,7 @@ public function test_shortcodes_recipe_image_shortcode_attachment_attr() {
 		$content = '[recipe-image image="' . $attachment_id . '"]';
 
 		$shortcode_content = do_shortcode( $content );
-		$this->assertContains( '<img src="http://example.org/wp-content/uploads/example.jpg" class="jetpack-recipe-image u-photo photo" alt="" itemprop="image" />', $shortcode_content );
+		$this->assertContains( '<img src="http://example.org/wp-content/uploads/example.jpg" class="jetpack-recipe-image u-photo photo"', $shortcode_content );
 	}
 
 	/**