Prevent responsive images from being loaded unnecessarily

The src attribute on the img elements was causing the srcset
attribute to be added as well before the Interactivity API
could remove them, causing images to be loaded before they
were needed and in the wrong size.

This commit removes the src attribute from the img elements
before they are output to the DOM, and also updates the tests.

lib/block-supports/behaviors.php

@@ -145,6 +145,7 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
 	$m->next_tag( 'figure' );
 	$m->add_class( 'responsive-image' );
 	$m->next_tag( 'img' );
+	$m->set_attribute( 'src', '' );
 	$m->set_attribute( 'data-wp-bind--src', 'selectors.core.image.responsiveImgSrc' );
 	$m->set_attribute( 'data-wp-bind--srcset', 'selectors.core.image.responsiveImgSrcSet' );
 	$initial_image_content = $m->get_updated_html();
@@ -153,6 +154,7 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) {
 	$q->next_tag( 'figure' );
 	$q->add_class( 'enlarged-image' );
 	$q->next_tag( 'img' );
+	$q->set_attribute( 'src', '' );
 	$q->set_attribute( 'data-wp-bind--src', 'selectors.core.image.enlargedImgSrc' );
 	$enlarged_image_content = $q->get_updated_html();
 

packages/block-library/src/image/interactivity.js

@@ -135,14 +135,22 @@ store( {
 					return context.core.image.lightboxEnabled ? 'dialog' : '';
 				},
 				responsiveImgSrc: ( { context } ) => {
-					return context.core.image.activateLargeImage
-						? ''
-						: context.core.image.imageSrc;
+					if (
+						! context.core.image.initialized ||
+						context.core.image.activateLargeImage
+					) {
+						return '';
+					}
+					return context.core.image.imageSrc;
 				},
 				responsiveImgSrcSet: ( { context } ) => {
-					return context.core.image.activateLargeImage
-						? ''
-						: context.core.image.imageSrcSet;
+					if (
+						! context.core.image.initialized ||
+						context.core.image.activateLargeImage
+					) {
+						return '';
+					}
+					return context.core.image.imageSrcSet;
 				},
 				enlargedImgSrc: ( { context } ) => {
 					return context.core.image.initialized

test/e2e/specs/editor/blocks/image.spec.js

@@ -990,10 +990,7 @@ test.describe( 'Image - interactivity', () => {
 			const responsiveImage = lightbox.locator( '.responsive-image img' );
 			const enlargedImage = lightbox.locator( '.enlarged-image img' );
 
-			await expect( responsiveImage ).toHaveAttribute(
-				'src',
-				new RegExp( filename )
-			);
+			await expect( responsiveImage ).toHaveAttribute( 'src', '' );
 			await expect( enlargedImage ).toHaveAttribute( 'src', '' );
 
 			await page.getByRole( 'button', { name: 'Enlarge image' } ).click();
@@ -1185,7 +1182,7 @@ test.describe( 'Image - interactivity', () => {
 		const responsiveImage = lightbox.locator( '.responsive-image img' );
 		const enlargedImage = lightbox.locator( '.enlarged-image img' );
 
-		await expect( responsiveImage ).toHaveAttribute( 'src', imgUrl );
+		await expect( responsiveImage ).toHaveAttribute( 'src', '' );
 		await expect( enlargedImage ).toHaveAttribute( 'src', '' );
 
 		await page.getByRole( 'button', { name: 'Enlarge image' } ).click();