Use Interactivity API for frontend functionality #13704
Conversation
|
I've tried to replicate the following functionality using the Interactivity API:
Using the Interactivity API requires adding a This file mirrors the These |
|
web-stories-wp/includes/Renderer/Stories/Renderer.php Lines 439 to 446 in 8054547 I think we'll need to add these attributes to the WDYT @swissspidy ? |
|
It took me a moment to realize that the interactivity API somehow doesn't work with classic themes... I'm probably missing something, but I opened https://core.trac.wordpress.org/ticket/61387 just in case. But if it's truly a bug, then this is a blocker for us. Implementation-wise it looks like a nice port of the existing script 👍 It's also super snappy. Functionality-wise, later on we could try to convert the carousel script to this new format as well. I just saw a similar solution for a slider here: https://github.com/ryanwelcher/iapi-gallery-slider/blob/38b63eacf018f29153980fce7d7278d7b41f1011/src/view.js So a carousel like ours could potentially also be built. But that's future talk :) What's your experience so far with using this interactivity API? Note: For the file location we'll have to come up with something different eventually as I don't want to put JS files into the
For For In the editor you can switch between the two modes using this toggle: 
Another thing we need to be careful: we don't need to add this to the AMP version of the markup (everything wrapped in |
OK it's my fault for not reading the docs right. So we'll definitely need to move this script to For classic themes in particular we'll also need |
I think it is a nice addition to have, and makes things simpler as I don't have to add event listeners manually. I also like the declarative approach. |
|
Hi @swissspidy, I have created a new package
How and where should this be implemented in our |
I think it would need to be added at the end of the |
Swanand01
added
Type: Enhancement
|
Size Change: +8.97 kB (+0.33%) Total Size: 2.77 MB
ℹ️ View Unchanged
|
|
Hi @swissspidy, the Build & deploy action seems to be failing: Do I need to change something in the Particularly in : const webStoriesBlockView = {
...sharedConfig,
output: { ...sharedConfig.output, module: true },
experiments: { outputModule: true },
entry: {
'web-stories-block-view': './packages/stories-block-view/src/index.js',
},
plugins: [
...sharedConfig.plugins.filter(
(plugin) => !(plugin instanceof DependencyExtractionWebpackPlugin)
),
// React Fast Refresh.
!isProduction && new ReactRefreshWebpackPlugin(),
new WebpackBar({
name: 'Web Stories Block View',
color: '#a9db14',
}),
new DependencyExtractionWebpackPlugin(),
].filter(Boolean),
};This might be of help. |
|
Yeah need to remove the |
|
Plugin builds for 8f9577b are ready 🛎️!
|
|
Hi @swissspidy, this test is failing for PHP > 8.3:
Interestingly, this test passed when run locally. My PHP version is 8.3.0, with WP 6.5.4 |
|
It‘s not the PHP version. It‘s because it‘s testing against WordPress trunk. It will probably fix itself in trunk. If not, we can open an issue for it, as it is unrelated to this PR. |
|
Revisiting this: The Interactivity API approach looks appealing, but given the duplicate code required to still support WP < 6.5, let's put this aside until we raise our minimum version requirement. Then we should be able to remove some of that code, and rewrite it in TypeScript too. |
Summary
This PR makes use of the new Interactivity API to implement the lightbox functionality in the Web Stories block.
On WP versions < 6.5
packages/stories-lightbox/src/web-stories-lightbox.jswould continue being used to handle the functionality of opening and closing stories.On WP versions > 6.5
packages/stories-block-viewcontains the necessarystateandactionsTo learn more about these, please visit General overview of the Interactivity API
User-facing changes
None. The user won't notice a difference in how the Stories are rendered and opened.
Testing Instructions
This PR can be tested by following these steps:
data-wp-interactiveReviews
Does this PR have a security-related impact?
No.
Does this PR change what data or activity we track or use?
No.
Does this PR have a legal-related impact?
No.
Checklist
Type: XYZlabel to the PRFixes #13502