Merge pull request #2179 from b1ink0/fix/post-thumbnail-missing-picture-element

Fix missing `PICTURE` element support for post thumbnail and add missing Modern Image Formats support for Widget Block

Co-authored-by: b1ink0 <[email protected]>
Co-authored-by: adamsilverstein <[email protected]>
Co-authored-by: westonruter <[email protected]>
Co-authored-by: 1ucay <[email protected]>

Author: 4 people

plugins/webp-uploads/hooks.php

@@ -673,6 +673,9 @@ function webp_uploads_img_tag_update_mime_type( string $original_image, string $
  * @return string The updated HTML markup.
  */
 function webp_uploads_update_featured_image( string $html, int $post_id, int $attachment_id ): string {
+	if ( webp_uploads_is_picture_element_enabled() ) {
+		return webp_uploads_wrap_image_in_picture( $html, 'post_thumbnail_html', $attachment_id );
+	}
 	return webp_uploads_img_tag_update_mime_type( $html, 'post_thumbnail_html', $attachment_id );
 }
 add_filter( 'post_thumbnail_html', 'webp_uploads_update_featured_image', 10, 3 );

plugins/webp-uploads/picture-element.php

@@ -19,7 +19,7 @@
  * @return string The new image tag.
  */
 function webp_uploads_wrap_image_in_picture( string $image, string $context, int $attachment_id ): string {
-	if ( 'the_content' !== $context ) {
+	if ( ! in_array( $context, array( 'the_content', 'post_thumbnail_html', 'widget_block_content' ), true ) ) {
 		return $image;
 	}
 

plugins/webp-uploads/tests/test-load.php

@@ -1268,4 +1268,44 @@ static function () {
 		);
 		$this->assertSameSets( $file, webp_uploads_convert_palette_png_to_truecolor( $file ) );
 	}
+
+	/**
+	 * Test that the webp_uploads_update_featured_image function is hooked to the post_thumbnail_html filter.
+	 */
+	public function test_webp_uploads_update_featured_image_hooked_into_post_thumbnail_html(): void {
+		$this->assertSame( 10, has_filter( 'post_thumbnail_html', 'webp_uploads_update_featured_image' ) );
+	}
+
+	/**
+	 * Test that the featured image is not wrapped in a picture element.
+	 *
+	 * @covers ::webp_uploads_update_featured_image
+	 * @covers ::webp_uploads_img_tag_update_mime_type
+	 */
+	public function test_webp_uploads_update_featured_image_picture_element_disabled(): void {
+		$attachment_id = self::factory()->attachment->create_upload_object( TESTS_PLUGIN_DIR . '/tests/data/images/car.jpeg' );
+		$post_id       = self::factory()->post->create();
+		set_post_thumbnail( $post_id, $attachment_id );
+
+		$featured_image = get_the_post_thumbnail( $post_id );
+		$this->assertStringStartsWith( '<img ', $featured_image );
+	}
+
+	/**
+	 * Test that the featured image is wrapped in a picture element.
+	 *
+	 * @covers ::webp_uploads_update_featured_image
+	 * @covers ::webp_uploads_wrap_image_in_picture
+	 */
+	public function test_webp_uploads_update_featured_image_picture_element_enabled(): void {
+		update_option( 'perflab_generate_webp_and_jpeg', '1' );
+		$this->opt_in_to_picture_element();
+
+		$attachment_id = self::factory()->attachment->create_upload_object( TESTS_PLUGIN_DIR . '/tests/data/images/car.jpeg' );
+		$post_id       = self::factory()->post->create();
+		set_post_thumbnail( $post_id, $attachment_id );
+
+		$featured_image = get_the_post_thumbnail( $post_id );
+		$this->assertStringStartsWith( '<picture ', $featured_image );
+	}
 }

plugins/webp-uploads/tests/test-picture-element.php

@@ -526,4 +526,70 @@ public function test_wrap_image_in_picture_with_false_image_src(): void {
 
 		$this->assertSame( $image, $filtered_image );
 	}
+
+	/**
+	 * Test that images are not wrapped in picture element for unsupported contexts.
+	 *
+	 * @dataProvider data_provider_webp_uploads_wrap_image_in_picture_with_different_context
+	 *
+	 * @param string $context  The context to test.
+	 * @param bool   $expected Whether the image should be wrapped in a picture element.
+	 *
+	 * @covers ::webp_uploads_wrap_image_in_picture
+	 */
+	public function test_webp_uploads_wrap_image_in_picture_with_different_context( string $context, bool $expected ): void {
+		$image = wp_get_attachment_image(
+			self::$image_id,
+			'large',
+			false,
+			array(
+				'class' => 'wp-image-' . self::$image_id,
+				'alt'   => 'Green Leaves',
+			)
+		);
+
+		$this->opt_in_to_picture_element();
+		$filtered_image = apply_filters( 'wp_content_img_tag', $image, $context, self::$image_id );
+		if ( $expected ) {
+			$processor = new WP_HTML_Tag_Processor( $filtered_image );
+			$this->assertTrue( $processor->next_tag() );
+			$this->assertSame( 'PICTURE', $processor->get_tag() );
+			$this->assertTrue( $processor->next_tag() );
+			$this->assertSame( 'SOURCE', $processor->get_tag() );
+			$this->assertTrue( $processor->next_tag() );
+			$this->assertSame( 'IMG', $processor->get_tag() );
+		} else {
+			$this->assertSame( $image, $filtered_image );
+		}
+	}
+
+	/**
+	 * Data provider for test_webp_uploads_wrap_image_in_picture_with_different_context.
+	 *
+	 * @return array<string, array{ context: string, expected: bool }>
+	 */
+	public function data_provider_webp_uploads_wrap_image_in_picture_with_different_context(): array {
+		return array(
+			'the_content'          =>
+				array(
+					'context'  => 'the_content',
+					'expected' => true,
+				),
+			'post_thumbnail_html'  =>
+				array(
+					'context'  => 'post_thumbnail_html',
+					'expected' => true,
+				),
+			'widget_block_content' =>
+				array(
+					'context'  => 'widget_block_content',
+					'expected' => true,
+				),
+			'invalid_context'      =>
+				array(
+					'context'  => 'invalid_context',
+					'expected' => false,
+				),
+		);
+	}
 }