Use Interactivity API for frontend functionality

blocks/embed/block.json

@@ -85,6 +85,8 @@
     }
   },
   "supports": {
-    "align": ["wide", "full", "left", "right", "center"]
-  }
+    "align": ["wide", "full", "left", "right", "center"],
+    "interactivity": true
+  },
+  "viewScriptModule": "file:../../packages/stories-block-view/src/index.js"
 }

includes/Renderer/Stories/Renderer.php

@@ -354,6 +354,7 @@
 		 * @var Story $story
 		 */
 		$story = $this->current();
+		global $wp_version;
 
 		$single_story_classes = $this->get_single_story_classes();
 		$lightbox_state       = 'lightbox' . $story->get_id() . $this->instance_id;
@@ -377,9 +378,27 @@
 		} else {
 			$this->assets->enqueue_style( AMP_Story_Player_Assets::SCRIPT_HANDLE );
 			$this->assets->enqueue_script( AMP_Story_Player_Assets::SCRIPT_HANDLE );
-			$this->assets->enqueue_script_asset( self::LIGHTBOX_SCRIPT_HANDLE );
+			if ( version_compare( $wp_version, '6.5', '<' ) ) {
+				$this->assets->enqueue_script_asset( self::LIGHTBOX_SCRIPT_HANDLE );
+			}
 			?>
-			<div class="<?php echo esc_attr( $single_story_classes ); ?>">
+			<div 
+				class="<?php echo esc_attr( $single_story_classes ); ?>"
+				data-wp-interactive="web-stories-block"
+				<?php
+				if ( version_compare( $wp_version, '6.5', '>=' ) ) {
+					echo esc_attr(
+						wp_interactivity_data_wp_context(
+							[
+								'instanceId' => $this->instance_id,
+							]
+						)
+					);
+				}
+				?>
+				data-wp-on--click="actions.open"
+				data-wp-on-window--popstate="actions.onPopstate"
+				>
 				<?php $this->render_story_with_poster(); ?>
 			</div>
 			<?php
@@ -410,7 +429,14 @@
 		];
 		?>
 		<div class="web-stories-list__lightbox">
-			<amp-story-player width="3.6" height="6" layout="responsive">
+			<amp-story-player 
+				width="3.6" 
+				height="6" 
+				layout="responsive" 
+				data-wp-interactive="web-stories-block" 
+				data-wp-on--amp-story-player-close="actions.close"
+				data-wp-on--navigation="actions.navigation"
+				>
 				<script type="application/json">
 					<?php echo wp_json_encode( $data ); ?>
 				</script>
@@ -832,6 +858,9 @@
 					width="3.6"
 					height="6"
 					layout="responsive"
+					data-wp-interactive="web-stories-block" 
+					data-wp-on--amp-story-player-close="actions.close"
+					data-wp-on--navigation="actions.navigation"
 				>
 					<a href="<?php echo esc_url( $story->get_url() ); ?>" <?php $this->render_link_attributes(); ?>><?php echo esc_html( $story->get_title() ); ?></a>
 				</amp-story-player>

includes/Renderer/Story/Embed.php

@@ -119,7 +119,8 @@ public function render( array $args = [] ): string {
 					<amp-story-player
 						width="<?php echo esc_attr( $args['width'] ); ?>"
 						height="<?php echo esc_attr( $args['height'] ); ?>"
-						layout="intrinsic">
+						layout="intrinsic"
+					>
 						<a href="<?php echo esc_url( $url ); ?>">
 							<?php if ( $poster ) { ?>
 								<img

includes/Renderer/Story/Singleton.php

@@ -93,6 +93,7 @@
 	public function render( array $args = [] ): string {
 		++self::$instances;
 		$this->instance_id = self::$instances;
+		global $wp_version;
 
 		$defaults = [
 			'align'  => 'none',
@@ -115,7 +116,9 @@
 
 		$this->assets->enqueue_style( AMP_Story_Player_Assets::SCRIPT_HANDLE );
 		$this->assets->enqueue_script( AMP_Story_Player_Assets::SCRIPT_HANDLE );
-		$this->assets->enqueue_script_asset( Renderer::LIGHTBOX_SCRIPT_HANDLE );
+		if ( version_compare( $wp_version, '6.5', '<' ) ) {
+			$this->assets->enqueue_script_asset( Renderer::LIGHTBOX_SCRIPT_HANDLE );
+		}
 		$this->assets->enqueue_style_asset( Embed_Base::SCRIPT_HANDLE );
 
 		ob_start();
@@ -144,7 +147,14 @@
 			?>
 			<div class="web-stories-singleton__lightbox-wrapper <?php echo esc_attr( 'ws-lightbox-singleton-' . $this->instance_id ); ?>">
 				<div class="web-stories-singleton__lightbox">
-					<amp-story-player width="3.6" height="6" layout="responsive">
+					<amp-story-player
+						width="3.6"
+						height="6"
+						layout="responsive"
+						data-wp-interactive="web-stories-block"
+						data-wp-on--amp-story-player-close="actions.close"
+						data-wp-on--navigation="actions.navigation"
+					>
 						<script type="application/json">
 							<?php echo wp_json_encode( $data ); ?>
 						</script>