Prevent scripts from loading if behaviors are not used

packages/block-library/src/image/index.php

@@ -9,11 +9,12 @@
  * Renders the `core/image` block on the server,
  * adding a data-id attribute to the element if core/gallery has added on pre-render.
  *
- * @param  array  $attributes The block attributes.
- * @param  string $content    The block content.
+ * @param  array    $attributes The block attributes.
+ * @param  string   $content    The block content.
+ * @param  WP_Block $block    The block object.
  * @return string Returns the block content with the data-id attribute added.
  */
-function render_block_core_image( $attributes, $content ) {
+function render_block_core_image( $attributes, $content, $block ) {
 
 	$processor = new WP_HTML_Tag_Processor( $content );
 	$processor->next_tag( 'img' );
@@ -30,19 +31,57 @@ function render_block_core_image( $attributes, $content ) {
 		$processor->set_attribute( 'data-id', $attributes['data-id'] );
 	}
 
+	$should_load_view_script = false;
+	$experiments             = get_option( 'gutenberg-experiments' );
+	$link_destination        = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
+	// Get the lightbox setting from the block attributes.
+	if ( isset( $attributes['behaviors']['lightbox'] ) ) {
+		$lightbox_settings = $attributes['behaviors']['lightbox'];
+		// If the lightbox setting is not set in the block attributes, get it from the theme.json file.
+	} else {
+		$theme_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_data();
+		if ( isset( $theme_data['behaviors']['blocks'][ $block->name ]['lightbox'] ) ) {
+			$lightbox_settings = $theme_data['behaviors']['blocks'][ $block->name ]['lightbox'];
+		} else {
+			$lightbox_settings = null;
+		}
+	}
+
+	// If the lightbox is enabled, the image is not linked, and the Interactivity API is enabled, load the view script.
+	if ( isset( $lightbox_settings['enabled'] ) &&
+		true === $lightbox_settings['enabled'] &&
+		'none' === $link_destination &&
+		! empty( $experiments['gutenberg-interactivity-api-core-blocks'] )
+	) {
+		$should_load_view_script = true;
+	}
+
+	$view_js_file = 'wp-block-image-view';
+	if ( ! wp_script_is( $view_js_file ) ) {
+		$script_handles = $block->block_type->view_script_handles;
+
+		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
+		if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+		}
+		// If the script is needed, but it was previously removed, add it again.
+		if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
+		}
+	}
+
 	return $processor->get_updated_html();
 }
 
-/**
- * Registers the `core/image` block on server.
- */
+	/**
+	 * Registers the `core/image` block on server.
+	 */
 function register_block_core_image() {
-
 	register_block_type_from_metadata(
 		__DIR__ . '/image',
 		array(
 			'render_callback' => 'render_block_core_image',
 		)
 	);
 }
-add_action( 'init', 'register_block_core_image' );
+	add_action( 'init', 'register_block_core_image' );

test/e2e/specs/editor/various/behaviors.spec.js

@@ -227,6 +227,142 @@ test.describe( 'Testing behaviors functionality', () => {
 <figure class="wp-block-image"><img src="http://localhost:8889/wp-content/uploads/${ year }/${ month }/1024x768_e2e_test_image_size.jpeg" alt="1024x768_e2e_test_image_size.jpeg" class="wp-image-${ media.id }"/></figure>
 <!-- /wp:image -->` );
 	} );
+
+	test( 'Should load the view script if the lightbox is disabled in theme.json but enabled via block settings', async ( {
+		admin,
+		editor,
+		requestUtils,
+		page,
+		behaviorUtils,
+	} ) => {
+		await requestUtils.activateTheme( 'twentytwentythree' );
+		await admin.createNewPost();
+		const media = await behaviorUtils.createMedia();
+
+		await editor.insertBlock( {
+			name: 'core/image',
+			attributes: {
+				alt: filename,
+				id: media.id,
+				url: media.source_url,
+				behaviors: {
+					lightbox: {
+						enabled: true,
+					},
+				},
+			},
+		} );
+
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		// The view script should be loaded !!!
+		const interactivityScript = page.locator(
+			'script#wp-block-image-view-js'
+		);
+		await expect( interactivityScript ).toHaveCount( 1 );
+	} );
+
+	test( 'Should load the view script if the lightbox is enabled via theme.json', async ( {
+		admin,
+		editor,
+		requestUtils,
+		page,
+		behaviorUtils,
+	} ) => {
+		await requestUtils.activateTheme( 'behaviors-enabled' );
+
+		await admin.createNewPost();
+		const media = await behaviorUtils.createMedia();
+
+		await editor.insertBlock( {
+			name: 'core/image',
+			attributes: {
+				alt: filename,
+				id: media.id,
+				url: media.source_url,
+			},
+		} );
+
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		// The view script should be loaded !!!
+		const interactivityScript = page.locator(
+			'script#wp-block-image-view-js'
+		);
+		await expect( interactivityScript ).toHaveCount( 1 );
+	} );
+
+	test( 'Should NOT load the view script if the lightbox is disabled in theme.json and in block settings', async ( {
+		admin,
+		editor,
+		requestUtils,
+		page,
+		behaviorUtils,
+	} ) => {
+		await requestUtils.activateTheme( 'twentytwentythree' );
+		await admin.createNewPost();
+		const media = await behaviorUtils.createMedia();
+
+		await editor.insertBlock( {
+			name: 'core/image',
+			attributes: {
+				alt: filename,
+				id: media.id,
+				url: media.source_url,
+				behaviors: {
+					lightbox: {
+						enabled: false,
+					},
+				},
+			},
+		} );
+
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		// The view script should NOT be loaded !!!
+		const interactivityScript = page.locator(
+			'script#wp-block-image-view-js'
+		);
+		await expect( interactivityScript ).toHaveCount( 0 );
+	} );
+
+	test( 'Should NOT load the view script if the lightbox is enabled in theme.json but disabled in block settings', async ( {
+		admin,
+		editor,
+		requestUtils,
+		page,
+		behaviorUtils,
+	} ) => {
+		await requestUtils.activateTheme( 'behaviors-enabled' );
+		await admin.createNewPost();
+		const media = await behaviorUtils.createMedia();
+
+		await editor.insertBlock( {
+			name: 'core/image',
+			attributes: {
+				alt: filename,
+				id: media.id,
+				url: media.source_url,
+				behaviors: {
+					lightbox: {
+						enabled: false,
+					},
+				},
+			},
+		} );
+
+		const postId = await editor.publishPost();
+		await page.goto( `/?p=${ postId }` );
+
+		// The view script should NOT be loaded !!!
+		const interactivityScript = page.locator(
+			'script#wp-block-image-view-js'
+		);
+		await expect( interactivityScript ).toHaveCount( 0 );
+	} );
 } );
 
 class BehaviorUtils {

test/gutenberg-test-themes/behaviors-enabled/templates/single.html

@@ -0,0 +1 @@
+<!-- wp:post-content {"layout":{"type":"constrained"}} /-->