Add missing full size image in PICTURE > SOURCE srcset

[mukeshpanchal27]

Summary

Fixes #1417

Todos:

• Add unit tests

[github-actions]

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @1ucay.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: 1ucay.

Co-authored-by: mukeshpanchal27 <[email protected]>
Co-authored-by: westonruter <[email protected]>
Co-authored-by: adamsilverstein <[email protected]>
Co-authored-by: devansh016 <[email protected]>

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

[adamsilverstein]

Nice!

[westonruter]

Verified ✅

Before

<picture
  class="not-transparent wp-picture-149"
  style="--dominant-color: #1e2428; display: contents"
  ><source
    type="image/webp"
    srcset="
      http://localhost:8888/wp-content/uploads/2024/08/image-300x300-jpeg.webp 300w,
      http://localhost:8888/wp-content/uploads/2024/08/image-150x150-jpeg.webp 150w,
      http://localhost:8888/wp-content/uploads/2024/08/image-768x768-jpeg.webp 768w
    "
    sizes="(max-width: 650px) 100vw, 650px" />
  <img
    data-dominant-color="1e2428"
    data-has-transparency="false"
    decoding="async"
    width="1024"
    height="1024"
    src="http://localhost:8888/wp-content/uploads/2024/08/image.jpeg"
    alt=""
    class="not-transparent wp-image-149"
    srcset="
      http://localhost:8888/wp-content/uploads/2024/08/image.jpeg         1024w,
      http://localhost:8888/wp-content/uploads/2024/08/image-300x300.jpeg  300w,
      http://localhost:8888/wp-content/uploads/2024/08/image-150x150.jpeg  150w,
      http://localhost:8888/wp-content/uploads/2024/08/image-768x768.jpeg  768w
    "
    sizes="(max-width: 650px) 100vw, 650px"
/></picture>

After

<picture
  class="not-transparent wp-picture-149"
  style="--dominant-color: #1e2428; display: contents"
  ><source
    type="image/webp"
    srcset="
      http://localhost:8888/wp-content/uploads/2024/08/image-jpeg.webp         1024w,
      http://localhost:8888/wp-content/uploads/2024/08/image-300x300-jpeg.webp  300w,
      http://localhost:8888/wp-content/uploads/2024/08/image-150x150-jpeg.webp  150w,
      http://localhost:8888/wp-content/uploads/2024/08/image-768x768-jpeg.webp  768w
    "
    sizes="(max-width: 650px) 100vw, 650px" />
  <img
    data-dominant-color="1e2428"
    data-has-transparency="false"
    decoding="async"
    width="1024"
    height="1024"
    src="http://localhost:8888/wp-content/uploads/2024/08/image.jpeg"
    alt=""
    class="not-transparent wp-image-149"
    srcset="
      http://localhost:8888/wp-content/uploads/2024/08/image.jpeg         1024w,
      http://localhost:8888/wp-content/uploads/2024/08/image-300x300.jpeg  300w,
      http://localhost:8888/wp-content/uploads/2024/08/image-150x150.jpeg  150w,
      http://localhost:8888/wp-content/uploads/2024/08/image-768x768.jpeg  768w
    "
    sizes="(max-width: 650px) 100vw, 650px"
/></picture>

Diff

--- /tmp/picture/before.html	2024-08-12 13:35:20.180047338 -0700
+++ /tmp/picture/after.html	2024-08-12 13:35:20.152047337 -0700
@@ -4,9 +4,10 @@
   ><source
     type="image/webp"
     srcset="
-      http://localhost:8888/wp-content/uploads/2024/08/image-300x300-jpeg.webp 300w,
-      http://localhost:8888/wp-content/uploads/2024/08/image-150x150-jpeg.webp 150w,
-      http://localhost:8888/wp-content/uploads/2024/08/image-768x768-jpeg.webp 768w
+      http://localhost:8888/wp-content/uploads/2024/08/image-jpeg.webp         1024w,
+      http://localhost:8888/wp-content/uploads/2024/08/image-300x300-jpeg.webp  300w,
+      http://localhost:8888/wp-content/uploads/2024/08/image-150x150-jpeg.webp  150w,
+      http://localhost:8888/wp-content/uploads/2024/08/image-768x768-jpeg.webp  768w
     "
     sizes="(max-width: 650px) 100vw, 650px" />
   <img

With whitespace ignored:

--- /tmp/picture/before.html	2024-08-12 13:35:20.180047338 -0700
+++ /tmp/picture/after.html	2024-08-12 13:35:20.152047337 -0700
@@ -4,6 +4,7 @@
   ><source
     type="image/webp"
     srcset="
+      http://localhost:8888/wp-content/uploads/2024/08/image-jpeg.webp         1024w,
       http://localhost:8888/wp-content/uploads/2024/08/image-300x300-jpeg.webp 300w,
       http://localhost:8888/wp-content/uploads/2024/08/image-150x150-jpeg.webp 150w,
       http://localhost:8888/wp-content/uploads/2024/08/image-768x768-jpeg.webp 768w