Skip to content

Use Interactivity API for frontend functionality #13704

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
swissspidy merged 32 commits into from
Mar 6, 2025
Merged

Use Interactivity API for frontend functionality #13704

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
2ea017c
Update `block.json` with interactivity support
Swanand01 May 30, 2024
2c2fb3a
Add directives and pass context
Swanand01 May 30, 2024
4e8aea7
Add `viewScript`
Swanand01 May 30, 2024
8054547
Temporarily disable the use of the `Lightbox` class
Swanand01 May 30, 2024
4703cc5
Add directives to <amp-story=player /> in Embed and Singleton
Swanand01 Jun 6, 2024
88b77cf
Update package-lock.json
Swanand01 Jun 6, 2024
11714ea
Fix lightboxElement being null
Swanand01 Jun 6, 2024
a390a62
Add Interactivity API only on WP versions greater than 6.5
Swanand01 Jun 6, 2024
f156aa5
Uncomment creating Lightbox instances
Swanand01 Jun 6, 2024
a97a915
Change registered to enqueued
Swanand01 Jun 6, 2024
7e3350e
Remove interactive attributes from Embed and AMP context
Swanand01 Jun 7, 2024
6238a47
Add file entry for `stories-block-view` in `webpack.config.js`
Swanand01 Jun 11, 2024
279eae0
Remove `view.js` and add `index.js`
Swanand01 Jun 11, 2024
2e8315c
Change `viewScriptModule`
Swanand01 Jun 11, 2024
be38368
Add package and package-lock
Swanand01 Jun 11, 2024
b7612b6
Fix `package.json` linting issues
Swanand01 Jun 11, 2024
bdb779d
Use `get_bloginfo( 'version' )` instead of `global $wp_version`
Swanand01 Jun 12, 2024
9f376b9
Add entry for `webStoriesBlockView`
Swanand01 Jun 12, 2024
602d5d1
Update `viewScriptModule` with the built file
Swanand01 Jun 12, 2024
97c82f7
Use `wp_interactivity_process_directives` to support classic themes
Swanand01 Jun 12, 2024
9ac7bb0
Merge branch 'main' into use-interactivity-api-for-frontend
Swanand01 Jun 12, 2024
abae778
Remove `ReactRefreshWebpackPlugin()` from `webStoriesBlockView`
Swanand01 Jun 12, 2024
6420ad7
Add 'audio/aac' to test_get_allowed_mime_types_multisite
Swanand01 Jun 14, 2024
8f9577b
Remove 'audio/aac' from test_get_allowed_mime_types_multisite
Swanand01 Jun 14, 2024
3ad3319
Merge branch 'main' into use-interactivity-api-for-frontend
swissspidy Dec 5, 2024
6dab4fb
Remove pre 6.5 code
swissspidy Dec 5, 2024
8438c02
Merge branch 'main' into use-interactivity-api-for-frontend
swissspidy Jan 10, 2025
aa10ac9
Remove unused variables
swissspidy Jan 10, 2025
fa7d2ff
Merge branch 'main' into use-interactivity-api-for-frontend
swissspidy Mar 5, 2025
63e816a
Lint fix
swissspidy Mar 5, 2025
78c98bc
Remove leftover package references
swissspidy Mar 5, 2025
066e84c
Improve singletons
swissspidy Mar 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions blocks/embed/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
35 changes: 32 additions & 3 deletions includes/Renderer/Stories/Renderer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -354,6 +354,7 @@ public function render_single_story_content(): void {
* @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;
Expand All @@ -377,9 +378,27 @@ class="<?php echo esc_attr( $single_story_classes ); ?>"
} 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
Expand Down Expand Up @@ -410,7 +429,14 @@ public function render_stories_with_lightbox(): void {
];
?>
<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>
Expand Down Expand Up @@ -832,6 +858,9 @@ class="story-lightbox__close-button"
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>
Expand Down
3 changes: 2 additions & 1 deletion includes/Renderer/Story/Embed.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 12 additions & 2 deletions includes/Renderer/Story/Singleton.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ public function __construct( Story $story, Assets $assets ) {
public function render( array $args = [] ): string {
++self::$instances;
$this->instance_id = self::$instances;
global $wp_version;

$defaults = [
'align' => 'none',
Expand All @@ -115,7 +116,9 @@ public function render( array $args = [] ): string {

$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();
Expand Down Expand Up @@ -144,7 +147,14 @@ public function render( array $args = [] ): string {
?>
<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>
Expand Down
Loading