Pattern overrides: Add id to the supported image's binding attributes

[kevin940726]

In the Gutenberg PR ​#58596 and ​#59194, We add the id attribute of the image block to the supported binding allowlist. This is needed to fix a bug where empty image blocks in a pattern will cause unexpected bugs as mentioned in ​#58708.
Some of these changes need to be backported to WordPress core.

Backports the changes from ​https://github.com/WordPress/gutenberg/pull/59169 and ​https://github.com/WordPress/gutenberg/pull/59194.

The gutenberg PRs add id to the supported image's binding attributes for Pattern Overrides.

Trac ticket: https://core.trac.wordpress.org/ticket/60577

[Ankit K Gupta]

Hello @kevin940726 Thanks for the fixes and PR. Would you mind providing manual test steps to test the changes? Would be very helpful for Test Contributors to test easily. Thanks in advance!

[gziolo]

Step-by-step reproduction instructions from ​https://github.com/WordPress/gutenberg/pull/59194:

There's one bug I've spotted so far, it happens when an image block is added to a pattern source but left empty. When a user overrides that image, the image has no id, so the 'upload' option is visible on the toolbar.

1. Create a new post and insert an image block and leave it empty (in the placeholder state)
2. From the block settings menu for the image block, create a new pattern, making it synced.
3. Choose the 'Edit original' button from the toolbar to edit the pattern
4. Select the image block, and from the advanced inspector options, check the 'Allow instance overrides' option
5. Save changes
6. Click the back button to go back to the post you were initially editing
7. Add an image to image block in the pattern (use a media library image, so upload a new one or choose an existing one).
8. Save the post.
9. Reload, select the image in the pattern

Expected: because the image added in step 7 is from the media library, there's no upload button on the block toolbar.
Before patch: there is an 'upload' button on the block toolbar

[sonali844]

QA Report:

---
​https://github.com/WordPress/gutenberg/pull/59194: I have checked with this pull request and followed the test steps and it is working as expected.

Screenshot :

Testing Environment :

WordPress: 6.4
Theme: Twenty Twenty-Four 1.0
PHP: 8.3
Browser: Chrome
OS: Window Version 121.0.6167.185

[harshalkadu]

Hi @gziolo @ankit-k-gupta @sonali844

I have completed testing this task update and found that it's working as expected. Kindly check below QA status for the executed test steps followed by the test environment details.

Test steps executed:

1. Create a new post and insert an image block and leave it empty (in the placeholder state)
2. From the block settings menu for the image block, create a new pattern, making it synced.

QA Status: PASS
SS: ​https://prnt.sc/0Z1NQzm8HVtQ

3. Choose the 'Edit original' button from the toolbar to edit the pattern

QA Status: PASS
SS: ​https://prnt.sc/Y51QD7q64iA4

4. Select the image block, and from the advanced inspector options, check the 'Allow instance overrides' option
5. Save changes

QA Status: PASS
SS: ​https://prnt.sc/DXnaQLlYbOiM

6. Click the back button to go back to the post you were initially editing
7. Add an image to image block in the pattern (use a media library image, so upload a new one or choose an existing one).
8. Save the post.

QA Status: PASS
SS: ​https://prnt.sc/kDTovrpBFYif

Testing Environment :
WordPress version: 6.5 beta 2
Theme: Twenty Twenty-Four
PHP: 8.3
Browser: Chrome Version 122.0.6261.57 (Official Build) (x86_64)
SS: ​https://prnt.sc/T_r3FnkHJHNR

Thank you!

[gziolo]

Thank you for your help with testing this bug fix.

[gziolo]

In 57700:

Editor: Add id to the supported Image's binding attributes

Syncs changes from the Gutenberg plugin: ​https://github.com/WordPress/gutenberg/pull/59194.

Fixes #60577.
Props kevin940726, ankit-k-gupta, sonali844, harshalkadu, gziolo.

Committed with https://core.trac.wordpress.org/changeset/57700.