Read script dependencies from generated files (#15124)

* Rework script registration to use generated deps

* Deprecate static list of dependencies

* Rework translation without packages-dependencies.php

* Include build/*/*.deps.json in plugin zip

* Add script dependencies undetectable by build tools

Some scripts have dependencies that are undetectable by the webpack
plugin used to generate the dependency files. Add these dependencies
to the generated dependencies.

* Add `wp-polyfill` dependency via webpack plugin

Enable `injectPolyfill` option in the webpack plugin instead of manually
injecting the dependency via PHP on script registration.

This will enable the polyfill for consumers of wp-scripts default
webpack config.

* Improve deprecated message

* Remove obsolete lib/packages-dependencies.php

bin/build-plugin-zip.sh

@@ -107,7 +107,7 @@ npm run build
 php bin/generate-gutenberg-php.php > gutenberg.tmp.php
 mv gutenberg.tmp.php gutenberg.php
 
-build_files=$(ls build/*/*.{js,css} build/block-library/blocks/*.php)
+build_files=$(ls build/*/*.{js,css,deps.json} build/block-library/blocks/*.php)
 
 # Generate the plugin zip file.
 status "Creating archive... 🎁"

lib/client-assets.php

@@ -114,9 +114,14 @@ function gutenberg_override_translation_file( $file, $handle ) {
 		return $file;
 	}
 
-	// Only override script handles generated from the Gutenberg plugin.
-	$packages_dependencies = include dirname( __FILE__ ) . '/packages-dependencies.php';
-	if ( ! isset( $packages_dependencies[ $handle ] ) ) {
+	// Ignore scripts whose handle does not have the "wp-" prefix.
+	if ( 'wp-' !== substr( $handle, 0, 3 ) ) {
+		return $file;
+	}
+
+	// Ignore scripts that are not found in the expected `build/` location.
+	$script_path = gutenberg_dir_path() . 'build/' . substr( $handle, 3 ) . '/index.js';
+	if ( ! file_exists( $script_path ) ) {
 		return $file;
 	}
 
@@ -177,17 +182,37 @@ function gutenberg_override_style( $handle, $src, $deps = array(), $ver = false,
  * @since 4.5.0
  */
 function gutenberg_register_packages_scripts() {
-	$packages_dependencies = include dirname( __FILE__ ) . '/packages-dependencies.php';
+	foreach ( glob( gutenberg_dir_path() . 'build/*/index.js' ) as $path ) {
+		// Prefix `wp-` to package directory to get script handle.
+		// For example, `…/build/a11y/index.js` becomes `wp-a11y`.
+		$handle = 'wp-' . basename( dirname( $path ) );
+
+		// Replace `.js` extension with `.deps.json` to find the generated dependencies file.
+		$dependencies_file = substr( $path, 0, -3 ) . '.deps.json';
+
+		$dependencies = is_readable( $dependencies_file )
+			? json_decode( file_get_contents( $dependencies_file ) )
+			: array();
+
+		// Add dependencies that cannot be detected and generated by build tools.
+		switch ( $handle ) {
+			case 'wp-block-library':
+				array_push( $dependencies, 'editor' );
+				break;
+
+			case 'wp-edit-post':
+				array_push( $dependencies, 'media-models', 'media-views', 'postbox' );
+				break;
+		}
+
+		// Get the path from Gutenberg directory as expected by `gutenberg_url`.
+		$gutenberg_path = substr( $path, strlen( gutenberg_dir_path() ) );
 
-	foreach ( $packages_dependencies as $handle => $dependencies ) {
-		// Remove `wp-` prefix from the handle to get the package's name.
-		$package_name = strpos( $handle, 'wp-' ) === 0 ? substr( $handle, 3 ) : $handle;
-		$path         = "build/$package_name/index.js";
 		gutenberg_override_script(
 			$handle,
-			gutenberg_url( $path ),
-			array_merge( $dependencies, array( 'wp-polyfill' ) ),
-			filemtime( gutenberg_dir_path() . $path ),
+			gutenberg_url( $gutenberg_path ),
+			$dependencies,
+			filemtime( $path ),
 			true
 		);
 	}

packages/scripts/config/webpack.config.js

@@ -67,7 +67,7 @@ const config = {
 		// WP_LIVE_RELOAD_PORT global variable changes port on which live reload works
 		// when running watch mode.
 		! isProduction && new LiveReloadPlugin( { port: process.env.WP_LIVE_RELOAD_PORT || 35729 } ),
-		new DependencyExtractionWebpackPlugin(),
+		new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
 	].filter( Boolean ),
 	stats: {
 		children: false,