Revert and fix "Revert "Assets: do not use the new method yet (#21760)…

…"" (#21763) The new `Assets::register_script` wrapper worked great. In fact, a bit too good: it picked up a style dependency that was missing from the editor JS, which broke the Widget Editor and the Site Editor because that dependency is specifically not supposed to be loaded there (see #20357). This reverts #21760 and adds a hack around the way that #20357 made things break with the new wrapper.
Automattic · Nov 16, 2021 · 633301e · 633301e
1 parent 4087c07
commit 633301e
Show file tree

Hide file tree

Showing 17 changed files with 114 additions and 182 deletions.
diff --git a/projects/packages/connection-ui/changelog/fix-revert-revert-and-hack-around-bug b/projects/packages/connection-ui/changelog/fix-revert-revert-and-hack-around-bug
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Revert #21760
+
+
diff --git a/projects/packages/connection-ui/composer.json b/projects/packages/connection-ui/composer.json
@@ -4,6 +4,7 @@
 	"type": "library",
 	"license": "GPL-2.0-or-later",
 	"require": {
+		"automattic/jetpack-assets": "^1.12",
 		"automattic/jetpack-connection": "^1.30",
 		"automattic/jetpack-constants": "^1.6",
 		"automattic/jetpack-device-detection": "^1.4",

diff --git a/projects/packages/connection-ui/src/class-admin.php b/projects/packages/connection-ui/src/class-admin.php
@@ -7,6 +7,8 @@
 
 namespace Automattic\Jetpack\ConnectionUI;
 
+use Automattic\Jetpack\Assets;
+
 /**
  * The Connection UI Admin Area
  */
@@ -60,14 +62,17 @@ public function register_submenu_page() {
 	 */
 	public function enqueue_scripts( $hook ) {
 		if ( strpos( $hook, 'tools_page_wpcom-connection-manager' ) === 0 ) {
-			$build_assets = require_once __DIR__ . '/../build/index.asset.php';
-			wp_enqueue_script( 'jetpack_connection_ui_script', plugin_dir_url( __DIR__ ) . 'build/index.js', $build_assets['dependencies'], $build_assets['version'], true );
-
-			wp_set_script_translations( 'react-jetpack_connection_ui_script', 'jetpack' );
-			wp_add_inline_script( 'jetpack_connection_ui_script', $this->get_initial_state(), 'before' );
-
-			wp_enqueue_style( 'jetpack_connection_ui_style', plugin_dir_url( __DIR__ ) . 'build/index.css', array( 'wp-components' ), $build_assets['version'] );
-			wp_style_add_data( 'jetpack_connection_ui_style', 'rtl', plugin_dir_url( __DIR__ ) . 'build/index.rtl.css' );
+			Assets::register_script(
+				'jetpack_connection_ui',
+				'../build/index.js',
+				__FILE__,
+				array(
+					'in_footer' => true,
+				)
+			);
+			Assets::enqueue_script( 'jetpack_connection_ui' );
+			wp_add_inline_script( 'jetpack_connection_ui', $this->get_initial_state(), 'before' );
+			wp_set_script_translations( 'jetpack_connection_ui', 'jetpack' );
 		}
 	}
 

diff --git a/projects/packages/lazy-images/changelog/fix-revert-revert-and-hack-around-bug b/projects/packages/lazy-images/changelog/fix-revert-revert-and-hack-around-bug
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Revert #21760
+
+
diff --git a/projects/packages/lazy-images/src/lazy-images.php b/projects/packages/lazy-images/src/lazy-images.php
@@ -485,33 +485,26 @@ private static function build_attributes_string( $attributes ) {
 	 * @return void
 	 */
 	public function enqueue_assets() {
-		$script_path       = Assets::get_file_url_for_environment( '../dist/intersection-observer.min.js', '../dist/intersection-observer.src.js', __FILE__ );
-		$script_asset_path = '../dist/intersection-observer.min.assets.php';
-		$script_asset      = file_exists( $script_asset_path ) ? require $script_asset_path : array(
-			'dependencies' => array(),
-			'version'      => filemtime( __DIR__ . '/../dist/intersection-observer.min.js' ),
-		);
-		wp_enqueue_script(
+		Assets::register_script(
 			'jetpack-lazy-images-polyfill-intersectionobserver',
-			$script_path,
-			$script_asset['dependencies'],
-			$script_asset['version'],
-			true
-		);
-
-		$script_path       = Assets::get_file_url_for_environment( '../dist/lazy-images.min.js', 'js/lazy-images.js', __FILE__ );
-		$script_asset_path = '../dist/lazy-images.min.assets.php';
-		$script_asset      = file_exists( $script_asset_path ) ? require $script_asset_path : array(
-			'dependencies' => array(),
-			'version'      => filemtime( __DIR__ . '/../dist/lazy-images.min.js' ),
+			'../dist/intersection-observer.min.js',
+			__FILE__,
+			array(
+				'nonmin_path' => '../dist/intersection-observer.src.js',
+				'in_footer'   => true,
+			)
 		);
-		wp_enqueue_script(
+		Assets::register_script(
 			'jetpack-lazy-images',
-			$script_path,
-			array_merge( $script_asset['dependencies'], array( 'jetpack-lazy-images-polyfill-intersectionobserver' ) ),
-			$script_asset['version'],
-			true
+			'../dist/lazy-images.min.js',
+			__FILE__,
+			array(
+				'nonmin_path'  => 'js/lazy-images.js',
+				'dependencies' => array( 'jetpack-lazy-images-polyfill-intersectionobserver' ),
+				'in_footer'    => true,
+			)
 		);
+		Assets::enqueue_script( 'jetpack-lazy-images' );
 		wp_localize_script(
 			'jetpack-lazy-images',
 			'jetpackLazyImagesL10n',

diff --git a/projects/plugins/backup/changelog/revert-assets-change b/projects/plugins/backup/changelog/revert-assets-change
diff --git a/projects/plugins/backup/composer.json b/projects/plugins/backup/composer.json
@@ -4,6 +4,7 @@
 	"type": "library",
 	"license": "GPL-2.0-or-later",
 	"require": {
+		"automattic/jetpack-assets": "1.12.x-dev",
 		"automattic/jetpack-admin-ui": "0.1.x-dev",
 		"automattic/jetpack-autoloader": "2.10.x-dev",
 		"automattic/jetpack-backup": "1.1.x-dev",

diff --git a/projects/plugins/backup/composer.lock b/projects/plugins/backup/composer.lock
diff --git a/projects/plugins/backup/src/php/class-jetpack-backup.php b/projects/plugins/backup/src/php/class-jetpack-backup.php
@@ -10,6 +10,7 @@
 }
 
 use Automattic\Jetpack\Admin_UI\Admin_Menu;
+use Automattic\Jetpack\Assets;
 use Automattic\Jetpack\Connection\Manager as Connection_Manager;
 use Automattic\Jetpack\Connection\Rest_Authentication as Connection_Rest_Authentication;
 
@@ -82,36 +83,16 @@ public function admin_init() {
 	 * Enqueue plugin admin scripts and styles.
 	 */
 	public function enqueue_admin_scripts() {
-		$build_assets = require_once JETPACK_BACKUP_PLUGIN_DIR . '/build/index.asset.php';
-
-		// Main JS file.
-		wp_register_script(
-			'jetpack-backup-script',
-			plugins_url( 'build/index.js', JETPACK_BACKUP_PLUGIN_ROOT_FILE ),
-			$build_assets['dependencies'],
-			$build_assets['version'],
-			true
+		Assets::register_script(
+			'jetpack-backup',
+			'build/index.js',
+			JETPACK_BACKUP_PLUGIN_ROOT_FILE,
+			array( 'in_footer' => true )
 		);
-		wp_enqueue_script( 'jetpack-backup-script' );
+		Assets::enqueue_script( 'jetpack-backup' );
 		// Initial JS state including JP Connection data.
-		wp_add_inline_script( 'jetpack-backup-script', $this->get_initial_state(), 'before' );
-
-		// Translation assets.
-		wp_set_script_translations( 'jetpack-backup-script-translations', 'jetpack-backup' );
-
-		// Main CSS file.
-		wp_enqueue_style(
-			'jetpack-backup-style',
-			plugins_url( 'build/index.css', JETPACK_BACKUP_PLUGIN_ROOT_FILE ),
-			array( 'wp-components' ),
-			$build_assets['version']
-		);
-		// RTL CSS file.
-		wp_style_add_data(
-			'jetpack-backup-style',
-			'rtl',
-			plugins_url( 'build/index.rtl.css', JETPACK_BACKUP_PLUGIN_ROOT_FILE )
-		);
+		wp_add_inline_script( 'jetpack-backup', $this->get_initial_state(), 'before' );
+		wp_set_script_translations( 'jetpack-backup', 'jetpack-backup' );
 	}
 
 	/**

diff --git a/projects/plugins/boost/changelog/revert-assets-change b/projects/plugins/boost/changelog/revert-assets-change
diff --git a/projects/plugins/jetpack/_inc/lib/admin-pages/class-jetpack-search-dashboard-page.php b/projects/plugins/jetpack/_inc/lib/admin-pages/class-jetpack-search-dashboard-page.php
@@ -5,6 +5,7 @@
  * @package automattic/jetpack
  */
 
+use Automattic\Jetpack\Assets;
 use Automattic\Jetpack\Status;
 
 /**
@@ -56,7 +57,6 @@ public function get_page_hook() {
 	 * Enqueue and localize page specific scripts
 	 */
 	public function page_admin_scripts() {
-		$this->load_admin_styles();
 		$this->load_admin_scripts();
 	}
 
@@ -101,39 +101,27 @@ private function get_link_offset() {
 	 * Enqueue admin styles.
 	 */
 	public function load_admin_styles() {
-		\Jetpack_Admin_Page::load_wrapper_styles();
-
-		wp_enqueue_style(
-			'jp-search-dashboard',
-			plugins_url( '_inc/build/search-dashboard.css', JETPACK__PLUGIN_FILE ),
-			array(),
-			JETPACK__VERSION
-		);
+		$this->load_admin_scripts();
 	}
 
 	/**
 	 * Enqueue admin scripts.
 	 */
 	public function load_admin_scripts() {
-		$script_deps_path    = JETPACK__PLUGIN_DIR . '_inc/build/search-dashboard.asset.php';
-		$script_dependencies = array( 'react', 'react-dom', 'wp-polyfill' );
-		if ( file_exists( $script_deps_path ) ) {
-			$asset_manifest      = include $script_deps_path;
-			$script_dependencies = $asset_manifest['dependencies'];
-		}
+		\Jetpack_Admin_Page::load_wrapper_styles();
 
 		if ( ! ( new Status() )->is_offline_mode() && Jetpack::is_connection_ready() ) {
 			// Required for Analytics.
 			Automattic\Jetpack\Tracking::register_tracks_functions_scripts( true );
 		}
 
-		wp_enqueue_script(
+		Assets::register_script(
 			'jp-search-dashboard',
-			plugins_url( '_inc/build/search-dashboard.js', JETPACK__PLUGIN_FILE ),
-			$script_dependencies,
-			JETPACK__VERSION,
-			true
+			'_inc/build/search-dashboard.js',
+			JETPACK__PLUGIN_FILE,
+			array( 'in_footer' => true )
 		);
+		Assets::enqueue_script( 'jp-search-dashboard' );
 
 		// Add objects to be passed to the initial state of the app.
 		// Use wp_add_inline_script instead of wp_localize_script, see https://core.trac.wordpress.org/ticket/25280.

diff --git a/projects/plugins/jetpack/changelog/fix-revert-revert-and-hack-around-bug b/projects/plugins/jetpack/changelog/fix-revert-revert-and-hack-around-bug
@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: Revert #21760
+
+
diff --git a/projects/plugins/jetpack/class.jetpack-gutenberg.php b/projects/plugins/jetpack/class.jetpack-gutenberg.php
@@ -6,6 +6,7 @@
  * @package automattic/jetpack
  */
 
+use Automattic\Jetpack\Assets;
 use Automattic\Jetpack\Blocks;
 use Automattic\Jetpack\Connection\Manager as Connection_Manager;
 use Automattic\Jetpack\Constants;
@@ -618,7 +619,6 @@ public static function enqueue_block_editor_assets() {
 			wp_enqueue_script( 'jp-tracks', '//stats.wp.com/w.js', array(), gmdate( 'YW' ), true );
 		}
 
-		$rtl              = is_rtl() ? '.rtl' : '';
 		$blocks_dir       = self::get_blocks_directory();
 		$blocks_variation = self::blocks_variation();
 
@@ -628,28 +628,20 @@ public static function enqueue_block_editor_assets() {
 			$blocks_env = '';
 		}
 
-		$editor_script = plugins_url( "{$blocks_dir}editor{$blocks_env}.min.js", JETPACK__PLUGIN_FILE );
-		$editor_style  = plugins_url( "{$blocks_dir}editor{$blocks_env}.min{$rtl}.css", JETPACK__PLUGIN_FILE );
-
-		$editor_deps_path = JETPACK__PLUGIN_DIR . $blocks_dir . "editor{$blocks_env}.min.asset.php";
-		$editor_deps      = array( 'wp-polyfill' );
-		if ( file_exists( $editor_deps_path ) ) {
-			$asset_manifest = include $editor_deps_path;
-			$editor_deps    = $asset_manifest['dependencies'];
-		}
-
-		$version = Jetpack::is_development_version() && file_exists( JETPACK__PLUGIN_DIR . $blocks_dir . 'editor.min.js' )
-			? filemtime( JETPACK__PLUGIN_DIR . $blocks_dir . 'editor.min.js' )
-			: JETPACK__VERSION;
-
-		wp_enqueue_script(
+		Assets::register_script(
 			'jetpack-blocks-editor',
-			$editor_script,
-			$editor_deps,
-			$version,
-			false
+			"{$blocks_dir}editor{$blocks_env}.min.js",
+			JETPACK__PLUGIN_FILE
 		);
 
+		// Hack around #20357 (specifically, that the editor bundle depends on
+		// wp-edit-post but wp-edit-post's styles break the Widget Editor and
+		// Site Editor) until a real fix gets unblocked.
+		// @todo Remove this once #20357 is properly fixed.
+		wp_styles()->query( 'jetpack-blocks-editor', 'registered' )->deps = array();
+
+		Assets::enqueue_script( 'jetpack-blocks-editor' );
+
 		wp_localize_script(
 			'jetpack-blocks-editor',
 			'Jetpack_Block_Assets_Base_Url',
@@ -704,8 +696,6 @@ public static function enqueue_block_editor_assets() {
 		);
 
 		wp_set_script_translations( 'jetpack-blocks-editor', 'jetpack' );
-
-		wp_enqueue_style( 'jetpack-blocks-editor', $editor_style, array(), $version );
 	}
 
 	/**