Use Interactivity API for frontend functionality

.phpstorm.config.js

@@ -59,7 +59,6 @@ System.config({
     '@web-stories-wp/karma-puppeteer-launcher': './packages/karma-puppeteer-launcher/src',
     '@web-stories-wp/stories-block': './packages/stories-block/src',
     '@web-stories-wp/stories-carousel': './packages/stories-carousel/src',
-    '@web-stories-wp/stories-lightbox': './packages/stories-lightbox/src',
     '@web-stories-wp/tinymce-button': './packages/tinymce-button/src',
     '@web-stories-wp/widget': './packages/widget/src',
     '@web-stories-wp/wp-dashboard': './packages/wp-dashboard/src',

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:../../assets/js/web-stories-block-view.js"
 }

includes/Renderer/Stories/Carousel_Renderer.php

@@ -147,6 +147,8 @@ function () {
 		<?php
 		$content = (string) ob_get_clean();
 
+		$content = wp_interactivity_process_directives( $content );
+
 		/**
 		 * Filters the Carousel renderer stories content.
 		 *

includes/Renderer/Stories/Generic_Renderer.php

@@ -96,6 +96,8 @@ function () {
 		$view_type = $this->get_view_type();
 		$content   = (string) ob_get_clean();
 
+		$content = wp_interactivity_process_directives( $content );
+
 		/**
 		 * Filters the Generic renderer stories content.
 		 *

includes/Renderer/Stories/Renderer.php

@@ -55,11 +55,6 @@
 	 */
 	public const STYLE_HANDLE = 'web-stories-list-styles';
 
-	/**
-	 * Web Stories stylesheet handle.
-	 */
-	public const LIGHTBOX_SCRIPT_HANDLE = 'web-stories-lightbox';
-
 	/**
 	 * Number of instances invoked. Kept it static to keep track.
 	 */
@@ -277,9 +272,6 @@
 		// Web Stories styles for AMP and non-AMP pages.
 		$this->assets->register_style_asset( self::STYLE_HANDLE );
 
-		// Web Stories lightbox script.
-		$this->assets->register_script_asset( self::LIGHTBOX_SCRIPT_HANDLE, [ AMP_Story_Player_Assets::SCRIPT_HANDLE ] );
-
 		if ( \defined( 'AMPFORWP_VERSION' ) ) {
 			add_action( 'amp_post_template_css', [ $this, 'add_amp_post_template_css' ] );
 		}
@@ -377,9 +369,21 @@
 		} 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 );
 			?>
-			<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
+					// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+					echo 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 +414,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 +843,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

@@ -113,15 +113,31 @@
 			(int) $args['height']
 		);
 
+		$this->assets->enqueue_style_asset( Renderer::STYLE_HANDLE ); // For the lightbox styles.
 		$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 );
 		$this->assets->enqueue_style_asset( Embed_Base::SCRIPT_HANDLE );
 
 		ob_start();
 		?>
-		<div class="<?php echo esc_attr( "$class web-stories-singleton $align" ); ?>" data-id="<?php echo esc_attr( 'singleton-' . $this->instance_id ); ?>">
-			<div class="wp-block-embed__wrapper" style="<?php echo esc_attr( $wrapper_style ); ?>">
+		<div
+		class="<?php echo esc_attr( "$class web-stories-singleton $align" ); ?>"
+		data-id="<?php echo esc_attr( 'singleton-' . $this->instance_id ); ?>"
+		data-wp-interactive="web-stories-block"
+		<?php
+			// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+			echo wp_interactivity_data_wp_context(
+				[
+					'instanceId' => $this->instance_id,
+				]
+			);
+		?>
+		>
+			<div
+			class="wp-block-embed__wrapper"
+			style="<?php echo esc_attr( $wrapper_style ); ?>"
+			data-wp-on--click="actions.open"
+			>
 			<?php $this->render_story_with_poster( $args ); ?>
 			</div>
 			<?php
@@ -143,8 +159,17 @@
 
 			?>
 			<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">
+				<div
+				class="web-stories-singleton__lightbox"
+				id="<?php echo esc_attr( 'ws-lightbox-singleton-' . $this->instance_id ); ?>"
+				>
+					<amp-story-player
+						width="3.6"
+						height="6"
+						layout="responsive"
+						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>

packages/stories-block/package.json

@@ -43,6 +43,7 @@
     "@wordpress/element": "^6.19.0",
     "@wordpress/i18n": "^4.47.0",
     "@wordpress/icons": "^9.38.0",
+    "@wordpress/interactivity": "^6.19.0",
     "@wordpress/notices": "^4.15.0",
     "@wordpress/url": "^3.48.0",
     "@wordpress/viewport": "^5.24.0",

packages/stories-block/src/css/singleton.css

@@ -53,6 +53,7 @@
   aspect-ratio: var(--aspect-ratio);
   border-radius: 8px;
   overflow: hidden;
+  cursor: pointer;
 }
 
 .web-stories-singleton-poster a {