Multiple blocks on the same page

frontend/block/view.ts

@@ -1,13 +1,5 @@
 import { BlockProps, renderBlock } from "../app";
 
-declare global {
-    interface Window {
-        ChatrixBlockConfig: {
-            attributes: object,
-        };
-    }
-}
-
 window.addEventListener('DOMContentLoaded', () => {
     renderAllBlocks().catch(error => {
         console.error(error);
@@ -18,24 +10,42 @@ async function renderAllBlocks() {
     // See https://github.com/Automattic/chatrix/issues/161 for why we introduce a delay here.
     await introduceDelayInMilliseconds(1);
 
-    const config = window.ChatrixBlockConfig;
-    if (!config) {
-        throw "ChatrixBlockConfig is not defined";
-    }
-
-    const props: BlockProps = {
-        attributes: config.attributes,
-    };
-
     const containers = <HTMLCollectionOf<HTMLElement>>document.getElementsByClassName('wp-block-automattic-chatrix');
     for (const container of containers) {
+        const config = getConfigFromDataElement(container);
+        const props: BlockProps = {
+            attributes: config.attributes,
+        };
+
         renderBlock(container, props);
 
         // TODO: Support multiple blocks on the same page.
         break;
     }
 }
 
+/**
+ * The container element has a single <span> child that contains the config as a data-attribute.
+ * This function parses that data-attribute into an object.
+ */
+function getConfigFromDataElement(container: HTMLElement): BlockConfig {
+    const dataElement = container.getElementsByTagName('span').item(0);
+    if (!dataElement) {
+        throw "Data element for chatrix block was not found";
+    }
+
+    const dataString = decodeURIComponent(dataElement.dataset?.chatrixBlockConfig ?? '');
+    if (dataString === '') {
+        throw "Data attribute for chatrix block was not found, or is empty";
+    }
+
+    return JSON.parse(dataString);
+}
+
+interface BlockConfig {
+    attributes: object,
+}
+
 async function introduceDelayInMilliseconds(delay: number) {
     return new Promise(resolve => setTimeout(resolve, delay));
 }

src/Block/block.php

@@ -28,27 +28,22 @@ function () use ( $block_json_path ) {
 }
 
 function render( array $attributes ): string {
-	$handle    = 'chatrix-block-config';
 	$json_data = wp_json_encode(
 		array(
 			'attributes' => $attributes,
 		)
 	);
 
-	wp_register_script( $handle, '', array(), automattic_chatrix_version(), true );
-	wp_add_inline_script( $handle, "window.ChatrixBlockConfig = $json_data;", 'before' );
-	wp_enqueue_script( $handle );
-
 	ob_start();
 	?>
 	<div <?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>>
-		<?php // Iframe will be rendered here. ?>
+		<?php // The following element will be replaced by the <Block> component. ?>
+		<span style="display: none;" data-chatrix-block-config="<?php echo rawurlencode( $json_data ); ?>"></span>
 	</div>
 	<?php
 	return ob_get_clean();
 }
 
-
 function parse_block_json( string $block_json_path ): array {
 	// phpcs discourages file_get_contents for remote URLs, and recommends using wp_remote_get().
 	// However, here we're dealing with a path to a file on disk, so we ignore phpcs's warning.