Pattern Overrides: Image id attribute can mismatch the image url attribute, which results in buggy behavior

[talldan]

Description

When using images for pattern overrides, it will be a common use case for the pattern creator to set one image in the pattern e.g take the following pseudocode (image block markup is more complex than this, the code is just to illustrate the point):

<!-- wp:image {"id":215,"url":"https://my.wordpress.site/wp-content/uploads/initial-image.jpg"} /-->

In the above markup, both the id and url attributes are correctly set for an image in the media library.

Now in the instance of the same pattern, a user may wish to set a url for a different image, the resulting pseudocode would be:

<!-- wp:image {"id":215,"url":"https://my.wordpress.site/wp-content/uploads/override-image.jpg"} /-->

Not that the url has changed, but the id hasn't. There's now a mismatch, the id represents one image in the media library, while the url represents another.

This happens because url has a block binding, but id doesn't.

This mismatch could cause unpredictable bugs.

Step-by-step reproduction instructions

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.
Actual: there is an 'upload' button on the block toolbar

Screenshots, screen recording, code snippet

Environment info

No response

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