Image Block with Overrides Enabled in Synched Pattern does not output all of the expected image attributes

[joseph-sites-vc]

Description

When I create a block pattern with an image block and the block is set to Enable Overrrides, when I add this block to a page or post and replace the placeholder image with a new image many of the expected image attributes do not display. These include:

• fetchpriority
• width
• height
• srcset
• sizes

I've tested this in a clean WP install with no plugins installed using the Twenty Twenty-Four theme and I can consistently reproduce this.

Step-by-step reproduction instructions

1. Add an image block to a page
2. Click on the image block, go to settings, and Create Pattern (make it a synced pattern)
3. Edit pattern
4. Click the image block and go to Advanced > Enable Overrides
5. Save Pattern and return to page
6. Click on the image block in the pattern and replace with a new image
7. Save page and view on front-end
8. Inspect image and you'll see all the attributes listed above are missing

Screenshots, screen recording, code snippet

Synced pattern image block before I add an override:
<img fetchpriority="high" decoding="async" width="384" height="296" src="http://interval-kadence.local/wp-content/uploads/2024/08/bio-placeholder.png" alt="bio headshot placeholder" class="wp-image-398" style="width:300px" srcset="http://interval-kadence.local/wp-content/uploads/2024/08/bio-placeholder.png 384w, http://interval-kadence.local/wp-content/uploads/2024/08/bio-placeholder-300x231.png 300w" sizes="(max-width: 384px) 100vw, 384px">

Synced pattern image block after I add an override:
<img decoding="async" src="http://interval-kadence.local/wp-content/uploads/2024/08/Image-1-2.jpg" alt="Raul Estrada" class="wp-image-398" style="width:300px">

Environment info

• WordPress 6.6.1
• Twenty Twenty-Four v1.2
• No plugins installed
• Chrome, Firefox, Safari (probably more)

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[talldan]

I tried to reproduce this but it works ok for me, here's an example of an image that has overrides and has those extra attributes:

My pattern markup is below, you can see that moon-1.jpg is my override image url, the original is galaxy-1.jpg:

<!-- wp:block {"ref":116,"content":{"test":{"id":25,"alt":"","url":"http://localhost:8888/wp-content/uploads/2024/08/moon-1.jpg"}}} /-->

I know little about how these extra attributes are added by core though. It doesn't seem to apply to every image, only those determined to be in the viewport.

I wonder if the attributes are also not added if the image uploaded doesn't have the appropriate sizes? This might be the relevant code in core:
https://github.com/WordPress/wordpress-develop/blob/6e7b1243f30af7b85d7dff44df4c86d852dec7df/src/wp-includes/media.php#L6039-L6084

@joseph-sites-vc Have you tried using different images as the override to see if any of them work? What are the dimensions of Image-1-2.jpg that you're testing with?

[yukiuke]

Reproduction Report

Environment

• OS: macOS 14.5
• Web Server: WP Playground
• PHP: 8.0
• WordPress: 6.6
• Browser: Firefox 129.0.2
• Theme: Twenty Twenty-Four
• Active Plugins:
  • Gutenberg 19.2.0

Actual Results

• Error condition does not occur. Report cannot be reproduced with Gutenberg.

Additional Notes

I was not able to reproduce this issue in Gutenberg on a fresh WP 6.6 playground instance. However, I was able to reproduce the issue without Gutenberg on Core in playground on 6.6 and nightly builds ( https://playground.wordpress.net/?php=8.0&wp=nightly&storage=none ) following the steps in the original post.
Original: zim.jpg

Replacement: GIR.jpg

A couple more notes for my Core testing above:

1. Image replacement needs to be done from the edit post page as opposed to editing the pattern itself.
2. Images need to be uploaded to WP. Using an external link to an image seems to ensure the image will never have the attributes listed by OP even on the original before replacement.

[talldan]

However, I was able to reproduce the issue without Gutenberg on Core in playground on 6.6 and nightly builds

Thanks for testing, I can also reproduce it, I must have had the plugin active when I tested earlier.

Since it's a core bug, I've made a trac ticket - https://core.trac.wordpress.org/ticket/62069

And I've put together a fix for the issue - WordPress/wordpress-develop#7394

[cbravobernal]

Changes have been committed in https://core.trac.wordpress.org/changeset/59095.