Skip to content

Commit

Permalink
Prevent scripts from loading if behaviors are not used (#52140)
Browse files Browse the repository at this point in the history 
Co-authored-by: Ricardo Artemio Morales <ric.morales22@gmail.com>
  • Loading branch information
@michalczaplinski @artemiomorales
michalczaplinski and artemiomorales authored Jul 18, 2023
1 parent a57a8e9 commit 69a1573
Show file tree
Hide file tree
Showing 3 changed files with 184 additions and 8 deletions.
55 changes: 47 additions & 8 deletions packages/block-library/src/image/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand All @@ -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' );
136 changes: 136 additions & 0 deletions test/e2e/specs/editor/various/behaviors.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions test/gutenberg-test-themes/behaviors-enabled/templates/single.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!-- wp:post-content {"layout":{"type":"constrained"}} /-->

0 comments on commit 69a1573

Please sign in to comment.