Add script module data implementation

lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php

@@ -131,22 +131,21 @@ public function config( string $store_namespace, array $config = array() ): arra
 		}
 
 		/**
-		 * Prints the serialized client-side interactivity data.
+		 * Adds interactivity data to filtered data to be passed to the client.
 		 *
-		 * Encodes the config and initial state into JSON and prints them inside a
-		 * script tag of type "application/json". Once in the browser, the state will
-		 * be parsed and used to hydrate the client-side interactivity stores and the
-		 * configuration will be available using a `getConfig` utility.
+		 * Once in the browser, the state will be parsed and used to hydrate the client-side
+		 * interactivity stores and the configuration will be available using a `getConfig` utility.
 		 *
 		 * @since 6.5.0
+		 *
+		 * @param array $interactivity_data Interactivity data.
+		 * @return array $interactivity_data Interactivity data with store data added (if it exists).
 		 */
-		public function print_client_interactivity_data() {
+		public function print_client_interactivity_data( $interactivity_data ) {
 			if ( empty( $this->state_data ) && empty( $this->config_data ) ) {
-				return;
+				return $interactivity_data;
 			}
 
-			$interactivity_data = array();
-
 			$config = array();
 			foreach ( $this->config_data as $key => $value ) {
 				if ( ! empty( $value ) ) {
@@ -167,18 +166,7 @@ public function print_client_interactivity_data() {
 				$interactivity_data['state'] = $state;
 			}
 
-			if ( ! empty( $interactivity_data ) ) {
-				wp_print_inline_script_tag(
-					wp_json_encode(
-						$interactivity_data,
-						JSON_HEX_TAG | JSON_HEX_AMP
-					),
-					array(
-						'type' => 'application/json',
-						'id'   => 'wp-interactivity-data',
-					)
-				);
-			}
+			return $interactivity_data;
 		}
 
 		/**
@@ -208,7 +196,7 @@ public function register_script_modules() {
 		 */
 		public function add_hooks() {
 			add_action( 'wp_enqueue_scripts', array( $this, 'register_script_modules' ) );
-			add_action( 'wp_footer', array( $this, 'print_client_interactivity_data' ) );
+			add_filter( 'scriptmoduledata_@wordpress/interactivity', array( $this, 'print_client_interactivity_data' ) );
 		}
 
 		/**

lib/experimental/script-modules.php

@@ -197,3 +197,94 @@ function gutenberg_dequeue_module( $module_identifier ) {
 	_deprecated_function( __FUNCTION__, 'Gutenberg 17.6.0', 'wp_dequeue_script_module' );
 	wp_script_modules()->dequeue( $module_identifier );
 }
+
+
+/**
+ * Print data associated with Script Modules in Script tags.
+ *
+ * This embeds data in the page HTML so that it is available on page load.
+ *
+ * Data can be associated with a given Script Module by using the
+ * `scriptmoduledata_{$module_id}` filter.
+ *
+ * The data for a given Script Module will be JSON serialized in a script tag with an ID
+ * like `wp-scriptmodule-data_{$module_id}`.
+ */
+function gutenberg_print_script_module_data(): void {
+	$get_marked_for_enqueue = new ReflectionMethod( 'WP_Script_Modules', 'get_marked_for_enqueue' );
+	$get_import_map         = new ReflectionMethod( 'WP_Script_Modules', 'get_import_map' );
+
+	$modules = array();
+	foreach ( array_keys( $get_marked_for_enqueue->invoke( wp_script_modules() ) ) as $id ) {
+		$modules[ $id ] = true;
+	}
+	foreach ( array_keys( $get_import_map->invoke( wp_script_modules() )['imports'] ) as $id ) {
+		$modules[ $id ] = true;
+	}
+
+	foreach ( array_keys( $modules ) as $module_id ) {
+		/**
+		 * Filters data associated with a given Script Module.
+		 *
+		 * Script Modules may require data that is required for initialization or is essential to
+		 * have immediately available on page load. These are suitable use cases for this data.
+		 *
+		 * This is best suited to a minimal set of data and is not intended to replace the REST API.
+		 *
+		 * If the filter returns no data (an empty array), nothing will be embedded in the page.
+		 *
+		 * The data for a given Script Module, if provided, will be JSON serialized in a script tag
+		 * with an ID like `wp-scriptmodule-data_{$module_id}`.
+		 *
+		 * The dynamic portion of the hook name, `$module_id`, refers to the Script Module ID that
+		 * the data is associated with.
+		 *
+		 * @param array $data The data that should be associated with the array.
+		 */
+		$data = apply_filters( "scriptmoduledata_{$module_id}", array() );
+
+		if ( is_array( $data ) && ! empty( $data ) ) {
+			/*
+			 * This data will be printed as JSON inside a script tag like this:
+			 *   <script type="application/json"></script>
+			 *
+			 * A script tag must be closed by a sequence beginning with `</`. It's impossible to
+			 * close a script tag without using `<`. We ensure that `<` is escaped and `/` can
+			 * remain unescaped, so `</script>` will be printed as `\u003C/script\u00E3`.
+			 *
+			 *   - JSON_HEX_TAG: All < and > are converted to \u003C and \u003E.
+			 *   - JSON_UNESCAPED_SLASHES: Don't escape /.
+			 *
+			 * If the page will use UTF-8 encoding, it's safe to print unescaped unicode:
+			 *
+			 *   - JSON_UNESCAPED_UNICODE: Encode multibyte Unicode characters literally (instead of as `\uXXXX`).
+			 *   - JSON_UNESCAPED_LINE_TERMINATORS: The line terminators are kept unescaped when
+			 *     JSON_UNESCAPED_UNICODE is supplied. It uses the same behaviour as it was
+			 *     before PHP 7.1 without this constant. Available as of PHP 7.1.0.
+			 *
+			 * The JSON specification requires encoding in UTF-8, so if the generated HTML page
+			 * is not encoded in UTF-8 then it's not safe to include those literals. They must
+			 * be escaped to avoid encoding issues.
+			 *
+			 * @see https://www.rfc-editor.org/rfc/rfc8259.html for details on encoding requirements.
+			 * @see https://www.php.net/manual/en/json.constants.php for details on these constants.
+			 * @see https://html.spec.whatwg.org/#script-data-state for details on script tag parsing.
+			 */
+			$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_LINE_TERMINATORS;
+			if ( 'UTF-8' !== get_option( 'blog_charset' ) ) {
+				$json_encode_flags = JSON_HEX_TAG | JSON_UNESCAPED_SLASHES;
+			}
+
+			wp_print_inline_script_tag(
+				wp_json_encode( $data, $json_encode_flags ),
+				array(
+					'type' => 'application/json',
+					'id'   => "wp-scriptmodule-data_{$module_id}",
+				)
+			);
+		}
+	}
+}
+
+add_action( 'wp_footer', 'gutenberg_print_script_module_data' );
+add_action( 'admin_print_footer_scripts', 'gutenberg_print_script_module_data' );

packages/interactivity/src/store.ts

@@ -319,15 +319,15 @@ export function store(
 }
 
 export const parseInitialData = ( dom = document ) => {
-	const storeTag = dom.querySelector(
-		`script[type="application/json"]#wp-interactivity-data`
-	);
-	if ( storeTag?.textContent ) {
+	const jsonDataScriptTag =
+		// Preferred Script Module data passing form
+		dom.getElementById( 'wp-scriptmodule-data_@wordpress/interactivity' ) ??
+		// Legacy form
+		dom.getElementById( 'wp-interactivity-data' );
+	if ( jsonDataScriptTag?.textContent ) {
 		try {
-			return JSON.parse( storeTag.textContent );
-		} catch ( e ) {
-			// Do nothing.
-		}
+			return JSON.parse( jsonDataScriptTag.textContent );
+		} catch {}
 	}
 	return {};
 };