MU WPCOM: don't enqueue block scripts in the canvas iframe! #41055

ellatrix · 2025-01-14T17:00:22Z

Problem:

React and most block editor packages are currently loaded in both the main window and the editor canvas iframe. This should not happen. (Note that you don't need any blocks inserted.)

Additionally there's an error message from one of the scripts that's added in the iframe:

Proposed changes:

The problem is that 4 blocks are currently enqueueing their editor scripts with enqueue_block_assets for some reason. This is wrong, since that hook is meant for assets to the block itself rather than assets to register the blocks. Instead, enqueue_block_editor_assets should be used.

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

On a simple site, just visit the post editor and check the <head> of the canvas.
Try adding a timeline block for example and check that it still works in the editor.

github-actions · 2025-01-14T17:01:12Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the fix/block-asset-enqueueing branch.
- For jetpack-mu-wpcom changes, also add define( 'JETPACK_MU_WPCOM_LOAD_VIA_BETA_PLUGIN', true ); to your wp-config.php file.

To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack-mu-wpcom-plugin fix/block-asset-enqueueing

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2025-01-14T17:01:46Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add a "[Type]" label (Bug, Enhancement, Janitorial, Task).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Follow this PR Review Process:

Ensure all required checks appearing at the bottom of this PR are passing.
Choose a review path based on your changes:
- A. Team Review: add the "[Status] Needs Team Review" label
  - For most changes, including minor cross-team impacts.
  - Example: Updating a team-specific component or a small change to a shared library.
- B. Crew Review: add the "[Status] Needs Review" label
  - For significant changes to core functionality.
  - Example: Major updates to a shared library or complex features.
- C. Both: Start with Team, then request Crew
  - For complex changes or when you need extra confidence.
  - Example: Refactor affecting multiple systems.
Get at least one approval before merging.

Still unsure? Reach out in #jetpack-developers for guidance!

Mu Wpcom plugin:

Next scheduled release: WordPress.com Simple releases happen semi-continuously (PCYsg-Jjm-p2).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Wpcomsh plugin:

Next scheduled release: Atomic deploys happen twice daily on weekdays (p9o2xV-2EN-p2).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

youknowriad · 2025-01-14T17:32:35Z

projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/index.php

@@ -86,7 +86,7 @@ function () {
 	);

 	add_action(
-		is_admin() ? 'enqueue_block_assets' : 'enqueue_block_editor_assets',


I wonder what's the historic reason for this.

Yes, I asked in #38724 and #38298 🤔

Also no other blocks are doing this (otherwise this PR wouldn't entirely remove the packages enqueued).

Yes, I just migrated the code to this repo, and kept everything the same as before to avoid any regressions

Oops...my memory was wrong, and I just followed the comment below. It seemed something was wrong but I forgot the reason.

jetpack/projects/plugins/jetpack/class.jetpack.php

Lines 632 to 641 in 5042902

/**

* We've switched from enqueue_block_editor_assets to enqueue_block_assets in WP-Admin because the assets with the former are loaded on the main site-editor.php.

*

* With the latter, the assets are now loaded in the SE iframe; the implementation is now faster because Gutenberg doesn't need to inject the assets in the iframe on client-side.

*/

if ( is_admin() ) {

add_action( 'enqueue_block_assets', array( 'Jetpack_Gutenberg', 'enqueue_block_editor_assets' ) );

} else {

add_action( 'enqueue_block_editor_assets', array( 'Jetpack_Gutenberg', 'enqueue_block_editor_assets' ) );

}

youknowriad

This makes sense.

arthur791004

Thanks for addressing this 🙂

ellatrix added 2 commits January 14, 2025 17:42

MU WPCOM: don't enqueue block scripts in the canvas iframe

1f95448

changelog

77936e7

ellatrix added the [Focus] Performance label Jan 14, 2025

github-actions bot added [mu wpcom Feature] Wpcom Blocks [mu wpcom Feature] Newspack Blocks [Package] Jetpack mu wpcom WordPress.com Features [Plugin] mu wpcom jetpack-mu-wpcom plugin [Plugin] Wpcomsh labels Jan 14, 2025

github-actions bot added the [Status] Needs Author Reply We would need you to make some changes or provide some more details about your PR. Thank you! label Jan 14, 2025

This was referenced Jan 14, 2025

MU WPCOM: Port the newspack blocks from the ETK (2nd try) #38724

Merged

MU WPCOM: Move the Event Countdown and Timeline blocks from jetpack to jetpack-mu-wpcom #38298

Merged

ellatrix requested a review from arthur791004 January 14, 2025 17:07

youknowriad reviewed Jan 14, 2025

View reviewed changes

youknowriad approved these changes Jan 14, 2025

View reviewed changes

arthur791004 approved these changes Jan 15, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

MU WPCOM: don't enqueue block scripts in the canvas iframe! #41055

MU WPCOM: don't enqueue block scripts in the canvas iframe! #41055

ellatrix commented Jan 14, 2025 •

edited

Loading

github-actions bot commented Jan 14, 2025 •

edited

Loading

github-actions bot commented Jan 14, 2025 •

edited

Loading

youknowriad Jan 14, 2025

ellatrix Jan 15, 2025

ellatrix Jan 15, 2025

arthur791004 Jan 15, 2025

arthur791004 Jan 15, 2025

youknowriad left a comment

arthur791004 left a comment

	/**
	* We've switched from enqueue_block_editor_assets to enqueue_block_assets in WP-Admin because the assets with the former are loaded on the main site-editor.php.
	*
	* With the latter, the assets are now loaded in the SE iframe; the implementation is now faster because Gutenberg doesn't need to inject the assets in the iframe on client-side.
	*/
	if ( is_admin() ) {
	add_action( 'enqueue_block_assets', array( 'Jetpack_Gutenberg', 'enqueue_block_editor_assets' ) );
	} else {
	add_action( 'enqueue_block_editor_assets', array( 'Jetpack_Gutenberg', 'enqueue_block_editor_assets' ) );
	}

MU WPCOM: don't enqueue block scripts in the canvas iframe! #41055

Are you sure you want to change the base?

MU WPCOM: don't enqueue block scripts in the canvas iframe! #41055

Conversation

ellatrix commented Jan 14, 2025 • edited Loading

Problem:

Proposed changes:

Other information:

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

github-actions bot commented Jan 14, 2025 • edited Loading

github-actions bot commented Jan 14, 2025 • edited Loading

youknowriad Jan 14, 2025

Choose a reason for hiding this comment

ellatrix Jan 15, 2025

Choose a reason for hiding this comment

ellatrix Jan 15, 2025

Choose a reason for hiding this comment

arthur791004 Jan 15, 2025

Choose a reason for hiding this comment

arthur791004 Jan 15, 2025

Choose a reason for hiding this comment

youknowriad left a comment

Choose a reason for hiding this comment

arthur791004 left a comment

Choose a reason for hiding this comment

ellatrix commented Jan 14, 2025 •

edited

Loading

github-actions bot commented Jan 14, 2025 •

edited

Loading

github-actions bot commented Jan 14, 2025 •

edited

Loading