Create @wordpress/interactivity with the Interactivity API

docs/manifest.json

@@ -1673,6 +1673,12 @@
 		"markdown_source": "../packages/icons/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/interactivity",
+		"slug": "packages-interactivity",
+		"markdown_source": "../packages/interactivity/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/interface",
 		"slug": "packages-interface",

lib/experimental/interactivity-api/blocks.php

@@ -227,7 +227,7 @@ function gutenberg_block_update_interactive_view_script( $metadata ) {
 		in_array( $metadata['name'], array( 'core/file', 'core/navigation', 'core/image' ), true ) &&
 		str_contains( $metadata['file'], 'build/block-library/blocks' )
 	) {
-		$metadata['viewScript'] = array( 'file:./interactivity.min.js' );
+		$metadata['viewScript'] = array( 'file:./view-interactivity.min.js' );
 	}
 	return $metadata;
 }

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

@@ -35,22 +35,3 @@ function gutenberg_register_interactivity_scripts( $scripts ) {
 	}
 }
 add_action( 'wp_default_scripts', 'gutenberg_register_interactivity_scripts', 10, 1 );
-
-/**
- * Adds the "defer" attribute to all the interactivity script tags.
- *
- * @param string $tag    The generated script tag.
- * @param string $handle The script handle.
- *
- * @return string The modified script tag.
- */
-function gutenberg_interactivity_scripts_add_defer_attribute( $tag, $handle ) {
-	if ( str_starts_with( $handle, 'wp-interactivity-' ) || str_contains( $tag, '/interactivity.min.js' ) ) {
-		$p = new WP_HTML_Tag_Processor( $tag );
-		$p->next_tag( array( 'tag' => 'script' ) );
-		$p->set_attribute( 'defer', true );
-		return $p->get_updated_html();
-	}
-	return $tag;
-}
-add_filter( 'script_loader_tag', 'gutenberg_interactivity_scripts_add_defer_attribute', 10, 2 );

package.json

@@ -57,6 +57,7 @@
 		"@wordpress/html-entities": "file:packages/html-entities",
 		"@wordpress/i18n": "file:packages/i18n",
 		"@wordpress/icons": "file:packages/icons",
+		"@wordpress/interactivity": "file:packages/interactivity",
 		"@wordpress/interface": "file:packages/interface",
 		"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 		"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",

packages/block-library/package.json

@@ -27,8 +27,7 @@
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
-		"{src,build,build-module}/*/init.js",
-		"{src,build,build-module}/utils/interactivity/index.js"
+		"{src,build,build-module}/*/init.js"
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
@@ -52,6 +51,7 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
+		"@wordpress/interactivity": "file:../interactivity",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/primitives": "file:../primitives",

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

@@ -1,7 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { store } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { store } from '../utils/interactivity';
 import { browserSupportsPdfs as hasPdfPreview } from './utils';
 
 store( {

packages/block-library/src/image/interactivity.js → packages/block-library/src/image/view-interactivity.js

@@ -1,7 +1,7 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import { store } from '../utils/interactivity';
+import { store } from '@wordpress/interactivity';
 
 const focusableSelectors = [
 	'a[href]',

packages/block-library/src/navigation/interactivity.js → packages/block-library/src/navigation/view-interactivity.js

@@ -1,7 +1,7 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import { store } from '../utils/interactivity';
+import { store } from '@wordpress/interactivity';
 
 const focusableSelectors = [
 	'a[href]',

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

@@ -27,7 +27,6 @@ class DependencyExtractionWebpackPlugin {
 				combinedOutputFile: null,
 				externalizedReport: false,
 				injectPolyfill: false,
-				__experimentalInjectInteractivityRuntime: false,
 				outputFormat: 'php',
 				outputFilename: null,
 				useDefaults: true,
@@ -143,7 +142,6 @@ class DependencyExtractionWebpackPlugin {
 			combinedOutputFile,
 			externalizedReport,
 			injectPolyfill,
-			__experimentalInjectInteractivityRuntime,
 			outputFormat,
 			outputFilename,
 		} = this.options;
@@ -186,14 +184,6 @@ 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 ) ) {

packages/interactivity/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/interactivity/README.md

@@ -0,0 +1 @@
+# Interactivity

packages/interactivity/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "@wordpress/interactivity",
+	"version": "0.1.0",
+	"description": "API for developing interactive blocks.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"interactivity"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/interactivity/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/interactivity"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Interactivity%20API"
+	},
+	"engines": {
+		"node": ">=12"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"react-native": "src/index",
+	"dependencies": {
+		"@preact/signals": "^1.1.3",
+		"deepsignal": "^1.3.0",
+		"preact": "^10.13.2"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/block-library/src/utils/interactivity/directives.js → packages/interactivity/src/directives.js

@@ -3,10 +3,6 @@
  */
 import { useContext, useMemo, useEffect } from 'preact/hooks';
 import { deepSignal, peek } from 'deepsignal';
-/**
- * Internal dependencies
- */
-import { createPortal } from './portals.js';
 
 /**
  * Internal dependencies
@@ -57,16 +53,6 @@ export default () => {
 		{ priority: 5 }
 	);
 
-	// data-wp-body
-	directive( 'body', ( { props: { children }, context: inherited } ) => {
-		const { Provider } = inherited;
-		const inheritedValue = useContext( inherited );
-		return createPortal(
-			<Provider value={ inheritedValue }>{ children }</Provider>,
-			document.body
-		);
-	} );
-
 	// data-wp-effect.[name]
 	directive( 'effect', ( { directives: { effect }, context, evaluate } ) => {
 		const contextValue = useContext( context );