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

b1ink0 · 2025-09-19T17:35:53Z

Summary

Relevant technical choices

This PR fixes the webp_uploads_update_featured_image function not outputting the <picture> element for featured image when the experimental picture element setting is enabled.

Also fixes a issue where image blocks used inside widgets (like Image and Gallery blocks) weren’t getting replaced with modern formats.

adamsilverstein · 2025-09-19T17:43:47Z

@b1ink0 Code looks good, lets get some wider testing before landing.

This PR also fixes the problem with working in image widgets (etc) - can you please update the description to include that?

codecov · 2025-09-19T17:44:46Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 68.68%. Comparing base (4db03c2) to head (65b198c).
⚠️ Report is 6 commits behind head on trunk.

Additional details and impacted files

@@            Coverage Diff             @@
##            trunk    #2179      +/-   ##
==========================================
+ Coverage   68.65%   68.68%   +0.03%     
==========================================
  Files          90       90              
  Lines        8091     8093       +2     
==========================================
+ Hits         5555     5559       +4     
+ Misses       2536     2534       -2

Flag	Coverage Δ
multisite	`68.68% <100.00%> (+0.03%)`	⬆️
single	`35.41% <33.33%> (-0.01%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

b1ink0 · 2025-09-19T17:45:54Z

plugins/webp-uploads/picture-element.php

 */
 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 ) ) {


As mentioned #2178 (comment), I also added widget_block_content for testing the widgets. From my testing, adding widget_block_content as a context solves the issue for widgets. Should this be handled in a separate PR?

Nevermind see #2179 (comment).

~~probably, since its a separate issue entirely!~~

Ha! Cross path. Its fine to include in a single PR since the changes are tiny and its a bunch of extra work to add additional Issue and PR.

Okay, I’ll update this PR then.

b1ink0 · 2025-09-19T18:37:55Z

plugins/webp-uploads/hooks.php

+	}
 	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 );


And, right now we are using the post_thumbnail_html filter for the featured image, but we could use the wp_get_attachment_image filter as the bug reporter suggested. However, this filter would also include any image echoed using the wp_get_attachment_image() function, which is used for featured images and is also typically used by other plugins. So, I'm not sure whether the Modern Image Formats plugin should also handle those images.

@adamsilverstein what do you think about this?

lets avoid altering other plugin output for now, the unexpected change could break things or cause conflicts.

github-actions · 2025-09-24T17:14:05Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

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

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

westonruter

This seems to work with my testing. A diff from trunk:

--- before.html	2025-09-25 15:44:24
+++ after.html	2025-09-25 15:44:26
@@ -2518,24 +2518,35 @@
             style="aspect-ratio: 3/2"
             class="wp-block-post-featured-image"
           >
-            <img
-              width="1200"
-              height="1594"
-              src="http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px-jpg.webp"
-              class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
-              alt=""
-              style="width: 100%; height: 100%; object-fit: cover"
-              decoding="async"
-              fetchpriority="high"
-              srcset="
-                http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px-jpg.webp           1200w,
-                http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px-226x300-jpg.webp    226w,
-                http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px-771x1024-jpg.webp   771w,
-                http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px-768x1020-jpg.webp   768w,
-                http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px-1156x1536-jpg.webp 1156w
-              "
-              sizes="(max-width: 1200px) 100vw, 1200px"
-            />
+            <picture class="wp-picture-437" style="display: contents"
+              ><source
+                type="image/webp"
+                srcset="
+                  http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px-jpg.webp           1200w,
+                  http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px-226x300-jpg.webp    226w,
+                  http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px-771x1024-jpg.webp   771w,
+                  http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px-768x1020-jpg.webp   768w,
+                  http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px-1156x1536-jpg.webp 1156w
+                "
+                sizes="(max-width: 1200px) 100vw, 1200px" />
+              <img
+                width="1200"
+                height="1594"
+                src="http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px.jpg"
+                class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
+                alt=""
+                style="width: 100%; height: 100%; object-fit: cover"
+                decoding="async"
+                fetchpriority="high"
+                srcset="
+                  http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px.jpg           1200w,
+                  http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px-226x300.jpg    226w,
+                  http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px-771x1024.jpg   771w,
+                  http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px-768x1020.jpg   768w,
+                  http://localhost:8000/wp-content/uploads/2025/09/Heimdall-PXL_20250919_195438368.MP-1200px-1156x1536.jpg 1156w
+                "
+                sizes="(max-width: 1200px) 100vw, 1200px"
+            /></picture>
           </figure>
 
           <div class="wp-block-post-date">

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

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

Fix picture element support for post thumbnail

ef86440

b1ink0 added [Type] Bug An existing feature is broken [Plugin] Modern Image Formats Issues for the Modern Image Formats plugin (formerly WebP Uploads) labels Sep 19, 2025

b1ink0 mentioned this pull request Sep 19, 2025

Modern Image Formats - post thumbnail dont follow picture element #2178

Closed

b1ink0 commented Sep 19, 2025

View reviewed changes

b1ink0 changed the title ~~Fix missing picture element support for post thumbnail~~ Fix missing PICTURE element support for post thumbnail and add missing Modern Image Formats support for Widget Block Sep 19, 2025

b1ink0 commented Sep 19, 2025

View reviewed changes

Merge branch 'trunk' into fix/post-thumbnail-missing-picture-element

115915e

adamsilverstein marked this pull request as ready for review September 24, 2025 17:13

adamsilverstein requested review from felixarntz and westonruter as code owners September 24, 2025 17:13

adamsilverstein self-requested a review September 24, 2025 17:14

adamsilverstein and others added 2 commits September 24, 2025 12:54

Merge branch 'trunk' into fix/post-thumbnail-missing-picture-element

3539959

Add tests to ensure bugs are fixed

1fd3a4d

westonruter modified the milestones: moder, webp-uploads n.e.x.t Sep 25, 2025

westonruter approved these changes Sep 25, 2025

View reviewed changes

westonruter reviewed Sep 25, 2025

View reviewed changes

plugins/webp-uploads/tests/test-picture-element.php Outdated Show resolved Hide resolved

westonruter reviewed Sep 25, 2025

View reviewed changes

plugins/webp-uploads/tests/test-load.php Outdated Show resolved Hide resolved

Update covers tags and use HTML Tag Processor

65b198c

westonruter merged commit 4f17dd7 into WordPress:trunk Sep 25, 2025
16 checks passed

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

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

Uh oh!

Conversation

b1ink0 commented Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Relevant technical choices

Uh oh!

adamsilverstein commented Sep 19, 2025

Uh oh!

codecov bot commented Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

b1ink0 Sep 19, 2025

Choose a reason for hiding this comment

Uh oh!

b1ink0 Sep 19, 2025

Choose a reason for hiding this comment

Uh oh!

adamsilverstein Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adamsilverstein Sep 19, 2025

Choose a reason for hiding this comment

Uh oh!

b1ink0 Sep 19, 2025

Choose a reason for hiding this comment

Uh oh!

b1ink0 Sep 19, 2025

Choose a reason for hiding this comment

Uh oh!

adamsilverstein Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

westonruter left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

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

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

b1ink0 commented Sep 19, 2025 •

edited

Loading

codecov bot commented Sep 19, 2025 •

edited

Loading

adamsilverstein Sep 19, 2025 •

edited

Loading

github-actions bot commented Sep 24, 2025 •

edited

Loading