[List View] Image preview to use URL connected to block binding

[BugReportOnWeb]

What?

Closes #75163

This PR fixes two related issues with the List View image preview for core/image blocks when the url attribute is connected to a block binding source:

• When an image is first selected from the media library and then its url is switched to a block binding, the List View continues to show the old media library image.
• When a block binding is connected to url without first selecting an image, the List View shows no preview at all.

Why?

use-list-view-images.js was reading image URLs directly from raw block attributes. When a block binding is connected to the url attribute, the raw attributes are not updated.

As a result, the List View is unaware of bindings and continues to display stale raw attribute values instead of the live resolved values.

How?

Updated useListViewImages to:

• Check if block bindings are present.
• Resolve the live values when bindings exist.
• Merge resolved values over raw attributes.
• Pass the merged result to getImagesFromBlock.

Testing Instructions

1. Register a custom block bindings source using register_block_bindings_source() (PHP) and wp.blocks.registerBlockBindingsSource() (JS). Example:

   add_action( 'init', function () {
   	register_block_bindings_source(
   		'test/test-source',
   		array(
   			'label' => 'Test Source',
   			'get_value_callback' => function () {
   				return 'https://picsum.photos/seed/sample-image/400/300';
   			}
   		)
   	);
   } );
   
   add_action( 'enqueue_block_editor_assets', function () {
   	wp_enqueue_script(
   		'block-binding',
   		plugin_dir_url(__FILE__) . 'block-binding.js',
   		['wp-blocks'],
   		'1.0.1',
   		true
   	);
   } );

   // block-binding.js
   wp.blocks.registerBlockBindingsSource( {
   	name: 'test/test-source',
   	label: 'Test Source',
   	getValues: () => ( {
   		url: 'https://picsum.photos/seed/sample-image/400/300',
   	} ),
   	getFieldsList: () => [
   		{
   			label: 'Image URL',
   			type: 'string',
   			args: {},
   		},
   	],
   } );

2. Create a new post and insert an Image block.

3. Select any image from the media library.

4. Open the List View and confirm the correct image preview is shown.

5. In the block sidebar (Attributes panel), connect the url attribute to your custom binding source.

   • ✅ Confirm the List View preview updates to show the bound image (not the old one).

6. Insert a second Image block without selecting any image first.

7. Connect the url attribute to your custom binding source.

   • ✅ Confirm the List View preview shows the bound image.

8. Verify that regular image blocks (without bindings) still display previews correctly.

Screenshots or screencast

Before	After

Use of AI Tools

ChatGPT for rephrasing PR description and Claude 4.6 for understandings basics of block bindings.

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: [Package] Block editor.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[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.

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

Co-authored-by: BugReportOnWeb <devasheeshkaul@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>

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