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:../../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,22 @@
 		} 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
+					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 +415,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 +844,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

@@ -32,7 +32,7 @@
 use Google\Web_Stories\Assets;
 use Google\Web_Stories\Embed_Base;
 use Google\Web_Stories\Model\Story;
 use Google\Web_Stories\Renderer\Stories\Renderer;
 
 /**
  * Class Singleton
@@ -115,7 +115,6 @@
 
 		$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();
@@ -144,7 +143,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>

packages/stories-block-view/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "stories-block-view",
+  "description": "Web Stories package to view a story",
+  "version": "1.0.0",
+  "author": {
+    "name": "Google",
+    "url": "https://creators.google/"
+  },
+  "license": "Apache-2.0",
+  "keywords": [
+    "web stories"
+  ],
+  "homepage": "https://github.com/GoogleForCreators/web-stories-wp/blob/main/packages/stories-block-view/README.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GoogleForCreators/web-stories-wp.git",
+    "directory": "packages/stories-block-view"
+  },
+  "bugs": {
+    "url": "https://github.com/GoogleForCreators/web-stories-wp/issues"
+  },
+  "main": "dist/index.js",
+  "module": "dist-module/index.js",
+  "types": "dist-types/index.d.ts",
+  "source": "src/index.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@wordpress/interactivity": "^6.0.0"
+  }
+}

packages/stories-block-view/src/index.js

@@ -0,0 +1,122 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { store, getContext, getElement } from '@wordpress/interactivity';
+
+const { state, actions } = store('web-stories-block', {
+  state: {
+    lightboxElement: null,
+    player: null,
+    stories: null,
+    instanceId: null,
+    currentLocation: null,
+  },
+  actions: {
+    storyContentReady: (storyObject, callback, maxRetries = 5) => {
+      const stateIntervalObj = setInterval(() => {
+        if (storyObject.storyContentLoaded === true) {
+          window.clearInterval(stateIntervalObj);
+          callback();
+        }
+        if (!--maxRetries) {
+          window.clearInterval(stateIntervalObj);
+        }
+      }, 250);
+    },
+    close: () => {
+      history.pushState({}, '', state.currentLocation);
+
+      const { player, lightboxElement } = state;
+      if (!player) {
+        return;
+      }
+
+      // Rewind the story and pause there upon closing the lightbox.
+      player.rewind();
+      player.pause();
+      player.mute();
+
+      lightboxElement.classList.toggle('show');
+      document.body.classList.toggle('web-stories-lightbox-open');
+    },
+    open: (event) => {
+      event.preventDefault();
+      const { ref: card } = getElement();
+      const context = JSON.parse(getContext().replaceAll("'", ''));
+      const lightboxElement =
+        document.querySelector(
+          `.ws-lightbox-${context.instanceId} .web-stories-list__lightbox`
+        ) ||
+        document.querySelector(
+          `.ws-lightbox-${context.instanceId} .web-stories-singleton__lightbox`
+        );
+      const player = lightboxElement.querySelector('amp-story-player');
+      const stories = player.getStories();
+
+      state.lightboxElement = lightboxElement;
+      state.player = player;
+      state.stories = stories;
+      state.instanceId = context.instanceId;
+      state.currentLocation = location.href;
+
+      const storyObject = stories.find(
+        (story) => story.href === card.querySelector('a').href
+      );
+
+      player.show(storyObject.href);
+      player.play();
+
+      actions.storyContentReady(storyObject, () => {
+        history.pushState({}, '', storyObject.href);
+      });
+
+      lightboxElement.classList.toggle('show');
+      document.body.classList.toggle('web-stories-lightbox-open');
+    },
+    navigation: (event) => {
+      const storyObject = state.stories[event.detail.index];
+      if (storyObject && storyObject.href !== document.location.href) {
+        actions.storyContentReady(storyObject, () => {
+          history.pushState({}, '', storyObject.href);
+        });
+      }
+    },
+    onPopstate: () => {
+      const lightboxElement = state.lightboxElement;
+      const player = state.player;
+      const isLightboxOpen = lightboxElement.classList.contains('show');
+
+      const storyObject = state.stories.find(
+        (story) => story.href === document.location.href
+      );
+
+      if (storyObject) {
+        if (!isLightboxOpen) {
+          lightboxElement.classList.toggle('show');
+          document.body.classList.toggle('web-stories-lightbox-open');
+          player.play();
+        }
+
+        player.show(storyObject.href);
+      } else if (isLightboxOpen) {
+        actions.close();
+      }
+    },
+  },
+});