search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.5k stars 4.19k forks source link

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

Closed joseph-sites-vc closed 1 month ago

joseph-sites-vc commented 2 months ago

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:

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

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

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

talldan commented 2 months ago

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: Screenshot 2024-08-23 at 7 42 45 AM

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 commented 1 month ago

Reproduction Report

Environment

Actual Results

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

before img replace

Replacement: GIR.jpg

after img replace

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 commented 1 month ago

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 - https://github.com/WordPress/wordpress-develop/pull/7394

cbravobernal commented 1 month ago

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