Skip to content

Commit 44880db

Browse files
Swanand01Swanand01
authored
Use Interactivity API for frontend functionality (#13704)
1 parent 6a22e46 commit 44880db

21 files changed

+343
-281
lines changed

‎.phpstorm.config.js

-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ System.config({
5959
'@web-stories-wp/karma-puppeteer-launcher': './packages/karma-puppeteer-launcher/src',
6060
'@web-stories-wp/stories-block': './packages/stories-block/src',
6161
'@web-stories-wp/stories-carousel': './packages/stories-carousel/src',
62-
'@web-stories-wp/stories-lightbox': './packages/stories-lightbox/src',
6362
'@web-stories-wp/tinymce-button': './packages/tinymce-button/src',
6463
'@web-stories-wp/widget': './packages/widget/src',
6564
'@web-stories-wp/wp-dashboard': './packages/wp-dashboard/src',

‎blocks/embed/block.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,8 @@
8585
}
8686
},
8787
"supports": {
88-
"align": ["wide", "full", "left", "right", "center"]
89-
}
88+
"align": ["wide", "full", "left", "right", "center"],
89+
"interactivity": true
90+
},
91+
"viewScriptModule": "file:../../assets/js/web-stories-block-view.js"
9092
}

‎includes/Renderer/Stories/Carousel_Renderer.php

+2
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,8 @@ function () {
147147
<?php
148148
$content = (string) ob_get_clean();
149149

150+
$content = wp_interactivity_process_directives( $content );
151+
150152
/**
151153
* Filters the Carousel renderer stories content.
152154
*

‎includes/Renderer/Stories/Generic_Renderer.php

+2
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,8 @@ function () {
9696
$view_type = $this->get_view_type();
9797
$content = (string) ob_get_clean();
9898

99+
$content = wp_interactivity_process_directives( $content );
100+
99101
/**
100102
* Filters the Generic renderer stories content.
101103
*

‎includes/Renderer/Stories/Renderer.php

+25-11
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,6 @@ abstract class Renderer implements RenderingInterface, Iterator {
5555
*/
5656
public const STYLE_HANDLE = 'web-stories-list-styles';
5757

58-
/**
59-
* Web Stories stylesheet handle.
60-
*/
61-
public const LIGHTBOX_SCRIPT_HANDLE = 'web-stories-lightbox';
62-
6358
/**
6459
* Number of instances invoked. Kept it static to keep track.
6560
*/
@@ -277,9 +272,6 @@ public function load_assets(): void {
277272
// Web Stories styles for AMP and non-AMP pages.
278273
$this->assets->register_style_asset( self::STYLE_HANDLE );
279274

280-
// Web Stories lightbox script.
281-
$this->assets->register_script_asset( self::LIGHTBOX_SCRIPT_HANDLE, [ AMP_Story_Player_Assets::SCRIPT_HANDLE ] );
282-
283275
if ( \defined( 'AMPFORWP_VERSION' ) ) {
284276
add_action( 'amp_post_template_css', [ $this, 'add_amp_post_template_css' ] );
285277
}
@@ -377,9 +369,21 @@ class="<?php echo esc_attr( $single_story_classes ); ?>"
377369
} else {
378370
$this->assets->enqueue_style( AMP_Story_Player_Assets::SCRIPT_HANDLE );
379371
$this->assets->enqueue_script( AMP_Story_Player_Assets::SCRIPT_HANDLE );
380-
$this->assets->enqueue_script_asset( self::LIGHTBOX_SCRIPT_HANDLE );
381372
?>
382-
<div class="<?php echo esc_attr( $single_story_classes ); ?>">
373+
<div
374+
class="<?php echo esc_attr( $single_story_classes ); ?>"
375+
data-wp-interactive="web-stories-block"
376+
<?php
377+
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
378+
echo wp_interactivity_data_wp_context(
379+
[
380+
'instanceId' => $this->instance_id,
381+
]
382+
);
383+
?>
384+
data-wp-on--click="actions.open"
385+
data-wp-on-window--popstate="actions.onPopstate"
386+
>
383387
<?php $this->render_story_with_poster(); ?>
384388
</div>
385389
<?php
@@ -410,7 +414,14 @@ public function render_stories_with_lightbox(): void {
410414
];
411415
?>
412416
<div class="web-stories-list__lightbox">
413-
<amp-story-player width="3.6" height="6" layout="responsive">
417+
<amp-story-player
418+
width="3.6"
419+
height="6"
420+
layout="responsive"
421+
data-wp-interactive="web-stories-block"
422+
data-wp-on--amp-story-player-close="actions.close"
423+
data-wp-on--navigation="actions.navigation"
424+
>
414425
<script type="application/json">
415426
<?php echo wp_json_encode( $data ); ?>
416427
</script>
@@ -832,6 +843,9 @@ class="story-lightbox__close-button"
832843
width="3.6"
833844
height="6"
834845
layout="responsive"
846+
data-wp-interactive="web-stories-block"
847+
data-wp-on--amp-story-player-close="actions.close"
848+
data-wp-on--navigation="actions.navigation"
835849
>
836850
<a href="<?php echo esc_url( $story->get_url() ); ?>" <?php $this->render_link_attributes(); ?>><?php echo esc_html( $story->get_title() ); ?></a>
837851
</amp-story-player>

‎includes/Renderer/Story/Embed.php

+2-1
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,8 @@ public function render( array $args = [] ): string {
119119
<amp-story-player
120120
width="<?php echo esc_attr( $args['width'] ); ?>"
121121
height="<?php echo esc_attr( $args['height'] ); ?>"
122-
layout="intrinsic">
122+
layout="intrinsic"
123+
>
123124
<a href="<?php echo esc_url( $url ); ?>">
124125
<?php if ( $poster ) { ?>
125126
<img

‎includes/Renderer/Story/Singleton.php

+30-5
Original file line numberDiff line numberDiff line change
@@ -113,15 +113,31 @@ public function render( array $args = [] ): string {
113113
(int) $args['height']
114114
);
115115

116+
$this->assets->enqueue_style_asset( Renderer::STYLE_HANDLE ); // For the lightbox styles.
116117
$this->assets->enqueue_style( AMP_Story_Player_Assets::SCRIPT_HANDLE );
117118
$this->assets->enqueue_script( AMP_Story_Player_Assets::SCRIPT_HANDLE );
118-
$this->assets->enqueue_script_asset( Renderer::LIGHTBOX_SCRIPT_HANDLE );
119119
$this->assets->enqueue_style_asset( Embed_Base::SCRIPT_HANDLE );
120120

121121
ob_start();
122122
?>
123-
<div class="<?php echo esc_attr( "$class web-stories-singleton $align" ); ?>" data-id="<?php echo esc_attr( 'singleton-' . $this->instance_id ); ?>">
124-
<div class="wp-block-embed__wrapper" style="<?php echo esc_attr( $wrapper_style ); ?>">
123+
<div
124+
class="<?php echo esc_attr( "$class web-stories-singleton $align" ); ?>"
125+
data-id="<?php echo esc_attr( 'singleton-' . $this->instance_id ); ?>"
126+
data-wp-interactive="web-stories-block"
127+
<?php
128+
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
129+
echo wp_interactivity_data_wp_context(
130+
[
131+
'instanceId' => $this->instance_id,
132+
]
133+
);
134+
?>
135+
>
136+
<div
137+
class="wp-block-embed__wrapper"
138+
style="<?php echo esc_attr( $wrapper_style ); ?>"
139+
data-wp-on--click="actions.open"
140+
>
125141
<?php $this->render_story_with_poster( $args ); ?>
126142
</div>
127143
<?php
@@ -143,8 +159,17 @@ public function render( array $args = [] ): string {
143159

144160
?>
145161
<div class="web-stories-singleton__lightbox-wrapper <?php echo esc_attr( 'ws-lightbox-singleton-' . $this->instance_id ); ?>">
146-
<div class="web-stories-singleton__lightbox">
147-
<amp-story-player width="3.6" height="6" layout="responsive">
162+
<div
163+
class="web-stories-singleton__lightbox"
164+
id="<?php echo esc_attr( 'ws-lightbox-singleton-' . $this->instance_id ); ?>"
165+
>
166+
<amp-story-player
167+
width="3.6"
168+
height="6"
169+
layout="responsive"
170+
data-wp-on--amp-story-player-close="actions.close"
171+
data-wp-on--navigation="actions.navigation"
172+
>
148173
<script type="application/json">
149174
<?php echo wp_json_encode( $data ); ?>
150175
</script>

‎package-lock.json

+59-16
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/stories-block/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"@wordpress/element": "^6.19.0",
4444
"@wordpress/i18n": "^4.47.0",
4545
"@wordpress/icons": "^9.38.0",
46+
"@wordpress/interactivity": "^6.19.0",
4647
"@wordpress/notices": "^4.15.0",
4748
"@wordpress/url": "^3.48.0",
4849
"@wordpress/viewport": "^5.24.0",

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

+1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
aspect-ratio: var(--aspect-ratio);
5454
border-radius: 8px;
5555
overflow: hidden;
56+
cursor: pointer;
5657
}
5758

5859
.web-stories-singleton-poster a {

0 commit comments

Comments
 (0)