diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 1e437d860aa097..9c8f66b7ffe185 100644 --- a/packages/block-library/src/image/index.php +++ b/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,14 +31,52 @@ 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( @@ -45,4 +84,4 @@ function register_block_core_image() { ) ); } -add_action( 'init', 'register_block_core_image' ); + add_action( 'init', 'register_block_core_image' ); diff --git a/test/e2e/specs/editor/various/behaviors.spec.js b/test/e2e/specs/editor/various/behaviors.spec.js index 9fe1fedf175c3c..a1b76d6c6105af 100644 --- a/test/e2e/specs/editor/various/behaviors.spec.js +++ b/test/e2e/specs/editor/various/behaviors.spec.js @@ -227,6 +227,142 @@ test.describe( 'Testing behaviors functionality', () => {
1024x768_e2e_test_image_size.jpeg
` ); } ); + + 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 { diff --git a/test/gutenberg-test-themes/behaviors-enabled/templates/single.html b/test/gutenberg-test-themes/behaviors-enabled/templates/single.html new file mode 100644 index 00000000000000..3d3bd7cfb9613a --- /dev/null +++ b/test/gutenberg-test-themes/behaviors-enabled/templates/single.html @@ -0,0 +1 @@ +