File: Add experimental integration with Interactivity API

lib/experimental/interactivity-api/blocks.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * Temporary compatibility shims for block APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Adds Interactivity API directives to the File block markup using the Tag Processor.
+ *
+ * @param string   $block_content Markup of the File block.
+ * @param array    $block         The full block, including name and attributes.
+ * @param WP_Block $instance      The block instance.
+ *
+ * @return string File block markup with the directives injected when applicable.
+ */
+function gutenberg_block_core_file_add_directives_to_content( $block_content, $block, $instance ) {
+	if ( empty( $instance->attributes['displayPreview'] ) ) {
+		return $block_content;
+	}
+	$processor = new WP_HTML_Tag_Processor( $block_content );
+	$processor->next_tag();
+	$processor->set_attribute( 'data-wp-init', 'effects.core.file.init' );
+	return $processor->get_updated_html();
+}
+add_filter( 'render_block_core/file', 'gutenberg_block_core_file_add_directives_to_content', 10, 3 );
+
+/**
+ * Replaces view script for the File block with version using Interactivity API.
+ *
+ * @param array $metadata Block metadata as read in via block.json.
+ *
+ * @return array Filtered block type metadata.
+ */
+function gutenberg_block_core_file_update_view_script( $metadata ) {
+	if ( 'core/file' === $metadata['name'] && str_contains( $metadata['file'], 'build/block-library/blocks' ) ) {
+		$metadata['viewScript'] = array( 'file:./view/interactivity.min.js' );
+	}
+	return $metadata;
+}
+add_filter( 'block_type_metadata', 'gutenberg_block_core_file_update_view_script', 10, 1 );

lib/experimental/interactivity-api/script-loader.php

@@ -11,22 +11,28 @@
  * @param WP_Scripts $scripts WP_Scripts instance.
  */
 function gutenberg_register_interactivity_scripts( $scripts ) {
-	gutenberg_override_script(
-		$scripts,
-		'wp-interactivity-runtime',
-		gutenberg_url(
-			'build/block-library/interactive-blocks/interactivity.min.js'
-		),
-		array( 'wp-interactivity-vendors' )
-	);
+	// When in production, use the plugin's version as the default asset version;
+	// else (for development or test) default to use the current time.
+	$default_version = defined( 'GUTENBERG_VERSION' ) && ! SCRIPT_DEBUG ? GUTENBERG_VERSION : time();
 
-	gutenberg_override_script(
-		$scripts,
-		'wp-interactivity-vendors',
-		gutenberg_url(
-			'build/block-library/interactive-blocks/vendors.min.js'
-		)
-	);
+	foreach ( array( 'vendors', 'runtime' ) as $script_name ) {
+		$script_path = "build/block-library/interactivity/$script_name.min.js";
+		// Replace extension with `.asset.php` to find the generated dependencies file.
+		$asset_file   = gutenberg_dir_path() . substr( $script_path, 0, -( strlen( '.js' ) ) ) . '.asset.php';
+		$asset        = file_exists( $asset_file )
+			? require $asset_file
+			: null;
+		$dependencies = isset( $asset['dependencies'] ) ? $asset['dependencies'] : array();
+		$version      = isset( $asset['version'] ) ? $asset['version'] : $default_version;
+
+		gutenberg_override_script(
+			$scripts,
+			"wp-interactivity-$script_name",
+			gutenberg_url( $script_path ),
+			$dependencies,
+			$version
+		);
+	}
 }
 add_action( 'wp_default_scripts', 'gutenberg_register_interactivity_scripts', 10, 1 );
 
@@ -39,7 +45,7 @@ function gutenberg_register_interactivity_scripts( $scripts ) {
  * @return string The modified script tag.
  */
 function gutenberg_interactivity_scripts_add_defer_attribute( $tag, $handle ) {
-	if ( str_starts_with( $handle, 'wp-interactivity-' ) ) {
+	if ( str_starts_with( $handle, 'wp-interactivity-' ) || str_contains( $tag, 'view/interactivity.min.js' ) ) {
 		$p = new WP_HTML_Tag_Processor( $tag );
 		$p->next_tag( array( 'tag' => 'script' ) );
 		$p->set_attribute( 'defer', true );

lib/load.php

@@ -99,6 +99,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/block-editor-settings.php';
 require __DIR__ . '/experimental/blocks.php';
 require __DIR__ . '/experimental/interactivity-api/script-loader.php';
+require __DIR__ . '/experimental/interactivity-api/blocks.php';
 require __DIR__ . '/experimental/navigation-theme-opt-in.php';
 require __DIR__ . '/experimental/kses.php';
 require __DIR__ . '/experimental/l10n.php';

packages/block-library/src/file/view/interactivity.js

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import { store } from '../../utils/interactivity';
+import { hidePdfEmbedsOnUnsupportedBrowsers } from '../utils';
+
+store( {
+	effects: {
+		core: {
+			file: {
+				init() {
+					hidePdfEmbedsOnUnsupportedBrowsers();
+				},
+			},
+		},
+	},
+} );

packages/dependency-extraction-webpack-plugin/lib/index.js

@@ -27,6 +27,7 @@ class DependencyExtractionWebpackPlugin {
 				combinedOutputFile: null,
 				externalizedReport: false,
 				injectPolyfill: false,
+				__experimentalInjectInteractivityRuntime: false,
 				outputFormat: 'php',
 				outputFilename: null,
 				useDefaults: true,
@@ -142,6 +143,7 @@ class DependencyExtractionWebpackPlugin {
 			combinedOutputFile,
 			externalizedReport,
 			injectPolyfill,
+			__experimentalInjectInteractivityRuntime,
 			outputFormat,
 			outputFilename,
 		} = this.options;
@@ -184,6 +186,14 @@ class DependencyExtractionWebpackPlugin {
 			if ( injectPolyfill ) {
 				chunkDeps.add( 'wp-polyfill' );
 			}
+			// Temporary fix for Interactivity API until it gets moved to its package.
+			if ( __experimentalInjectInteractivityRuntime ) {
+				if ( ! chunkJSFile.startsWith( './interactivity/' ) ) {
+					chunkDeps.add( 'wp-interactivity-runtime' );
+				} else if ( './interactivity/runtime.min.js' === chunkJSFile ) {
+					chunkDeps.add( 'wp-interactivity-vendors' );
+				}
+			}
 
 			const processModule = ( { userRequest } ) => {
 				if ( this.externalizedDeps.has( userRequest ) ) {

tools/webpack/blocks.js

@@ -221,12 +221,12 @@ module.exports = [
 	},
 	{
 		entry: {
-			// blockname: './packages/block-library/src/blockname/interactivity.js',
+			file: './packages/block-library/src/file/view/interactivity.js',
 		},
 		output: {
 			devtoolNamespace: 'wp',
-			filename: './build/block-library/interactive-blocks/[name].min.js',
-			path: join( __dirname, '..', '..' ),
+			filename: './blocks/[name]/view/interactivity.min.js',
+			path: join( __dirname, '..', '..', 'build', 'block-library' ),
 		},
 		optimization: {
 			runtimeChunk: {
@@ -237,12 +237,14 @@ module.exports = [
 					vendors: {
 						name: 'vendors',
 						test: /[\\/]node_modules[\\/]/,
+						filename: './interactivity/[name].min.js',
 						minSize: 0,
 						chunks: 'all',
 					},
-					interactivity: {
-						name: 'interactivity',
+					runtime: {
+						name: 'runtime',
 						test: /[\\/]utils\/interactivity[\\/]/,
+						filename: './interactivity/[name].min.js',
 						chunks: 'all',
 						minSize: 0,
 						priority: -10,
@@ -278,5 +280,12 @@ module.exports = [
 				},
 			],
 		},
+		plugins: [
+			...plugins,
+			new DependencyExtractionWebpackPlugin( {
+				__experimentalInjectInteractivityRuntime: true,
+				injectPolyfill: false,
+			} ),
+		].filter( Boolean ),
 	},
 ];