Skip to content
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.

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

Interactivity API: Iteration for WP 6.6 #60219

Closed
DAreRodz opened this issue Mar 26, 2024 · 36 comments
Closed

Interactivity API: Iteration for WP 6.6 #60219

DAreRodz opened this issue Mar 26, 2024 · 36 comments
Labels
[Feature] Block API API that allows to express the block paradigm. [Feature] Interactivity API API to add frontend interactivity to blocks. [Type] Iteration Scoped iteration of an effort from a tracking issue or overview issue ideally for a major release.

Comments

@DAreRodz
Copy link
Contributor

DAreRodz commented Mar 26, 2024


We completed everything for the first public release of the Interactivity API in WordPress 6.5. Now, during the next iteration―which is going to be shorter―, we aim to focus on improving the current API without releasing new features. This includes enhancing the developer experience (especially during debugging), better test coverage and code quality, as well as fixing any reported bugs.

Note that the list is expected to be modified. I've also added optional tasks we can work on if we find the time.

28-05 Update: All tasks have been redistributed for 6.6 release summary.

Punted to future releases

Won't do

Ready for 6.6

Enhancements

Bug fixes

Code Quality

@DAreRodz DAreRodz added [Feature] Interactivity API API to add frontend interactivity to blocks. [Type] Iteration Scoped iteration of an effort from a tracking issue or overview issue ideally for a major release. labels Mar 26, 2024
@gziolo gziolo added the [Feature] Block API API that allows to express the block paradigm. label Mar 27, 2024
@gziolo gziolo mentioned this issue Mar 27, 2024
67 tasks
@gziolo gziolo changed the title Epic: Interactivity API - Iteration for WP 6.6 Interactivity API - Iteration for WP 6.6 Mar 27, 2024
@felixarntz
Copy link
Member

felixarntz commented Apr 2, 2024

@DAreRodz @gziolo What's the best path to consider additional workstreams for the Interactivity API for 6.6?

Context is that @westonruter and myself have been exploring ideas to facilitate better INP performance centrally via the Interactivity API. For instance, we could automatically yield certain actions and callbacks to the main thread to reduce contention between multiple event listeners. We're close to formalizing our proposal in an issue, and it would be great to eventually include this effort here, if the team is on board.

One of the changes we're proposing may require a BC break in the API which we could handle with a deprecation strategy, but it would also benefit from being implemented sooner than later, now that the API is still very new and not yet as widely adopted outside of core.

@DAreRodz
Copy link
Contributor Author

DAreRodz commented Apr 3, 2024

Hey @felixarntz, thanks for raising this up! 😊

I'm unsure what would be the "best path" (maybe @gziolo could help), but as this tracking issue is meant to be flexible, I would be happy to include your work. Let's wait for the proposal to see if we can have it ready for WP 6.6 and how the mentioned breaking changes could impact the current API.

@gziolo
Copy link
Member

gziolo commented Apr 3, 2024

That sounds excellent, @felixarntz. I'm looking forward to seeing the proposal.

@DAreRodz, the Iteration issues mostly bring focus and increase the visibility of what to expect in WordPress 6.6, but it doesn't mean we can't change it. In practice, we should always be open to changing the plans based on the feedback and discoveries from the community experts 😍

@sirreal
Copy link
Member

sirreal commented Apr 4, 2024

The ability to use existing WordPress Scripts from Script Modules is one of the most impactful things we can work on for the Interactivity API. Anything built with the Interactivity API must be a script module, so although it's not strictly Interactivity API, resolving this ticket for script and module interoperability seems very important: https://core.trac.wordpress.org/ticket/60647

@sethrubenstein
Copy link
Contributor

Second @sirreal calls for WordPress scripts. We use wp-api-fetch and wp-url with interactive blocks, a lot. Making that easier from a dev tooling perspective to automatically enqueue those scripts would be greatly appreciated.

@ermincelikovic
Copy link

Is there any chance to get interactivity api outside of blocks? For example in custom php templates?

@felixarntz
Copy link
Member

@ermincelikovic While I believe it's not documented, it should already be possible. The main caveat is that by default custom PHP templates wouldn't be processed server-side, so you have to make sure the attributes that are dynamic via the Interactivity API are initialized with their correct value.

As a proof of concept, I have been working on WordPress/wordpress-develop#5795 where I am using the Interactivity API for all dynamic functionality of the Twenty Twenty-One theme. Maybe that's helpful.

@luisherranz
Copy link
Member

default custom PHP templates wouldn't be processed server-side, so you have to make sure the attributes that are dynamic via the Interactivity API are initialized with their correct value

You can process them using wp_interactivity_process_directives 🙂

@ermincelikovic
Copy link

ermincelikovic commented Apr 7, 2024

default custom PHP templates wouldn't be processed server-side, so you have to make sure the attributes that are dynamic via the Interactivity API are initialized with their correct value

You can process them using wp_interactivity_process_directives 🙂

This looks great!
How would I import { store, getContext } from "@wordpress/interactivity"; within a context of php template or a traditional script.js file in the theme though?

EDIT:
Just found out that script modules are also introduced in 6.5:
https://make.wordpress.org/core/2024/03/04/script-modules-in-6-5/

@cbravobernal
Copy link
Contributor

I've added the suggestions in Typescripting utils PR. Ready to be reviewed again.
#60149

@sirreal
Copy link
Member

sirreal commented Apr 10, 2024

How would I import { store, getContext } from "@wordpress/interactivity"; within a context of php template or a traditional script.js file in the theme though?

@ermincelikovic The @wordpress/interactivity script module is only available to other script modules at this time. Using it from WordPress scripts is not supported at this time. See this ticket for details.

@DAreRodz
Copy link
Contributor Author

I've added two PRs to the description above.

The first one could be considered a bug fix (I've added it under that category), and so be released in a minor WP release.

@DAreRodz
Copy link
Contributor Author

The fix for data-wp-on is merged.

I've also opened an issue to fix the same problem in data-wp-on-window and data-wp-on-document.

@fabiankaegy
Copy link
Member

In addition to #60035 I'd love to see some more useful debugging for the following areas:

  • output a warning when you use directives in the markup of a block that doesn't have the interactivity support enabled

  • add better client side errors when you try to access a property on a store that doesn't exist

  • add a guide for how to connect the preact dev tools to the interactivity API


Besides debugging here are some other things that I would love to see in the 6.6 cycle.

  • some documentation for working with external stores / making a store extensible

  • refine clarity in documentation of what the difference between callbacks and actions are

  • add documentation for client side routing like the query block does it

@sirreal
Copy link
Member

sirreal commented Apr 18, 2024

I've added WordPress/wordpress-develop#6394 for server-side derived state. It's ready for review.

@sirreal
Copy link
Member

sirreal commented Apr 18, 2024

I've just added 3 items related to data-wp-ignore directive.

I think there's a bug with the server processing of ignore directives I'm attempting to fix in WordPress/wordpress-develop#6405. I think that nodes with that attribute and their descendants should be ignored completely, no processing should happen on or under a node with data-wp-ignore. @cbravobernal or @DAreRodz can you confirm?

Right now ignore directives are not handled on the server, so those nodes and their descendants are processed. I discovered that while working on tests for #60744.

@sirreal
Copy link
Member

sirreal commented Apr 18, 2024

I've created this ticket to handle property access on PHP objects in interactivity state, only arrays are well handled at the moment: https://core.trac.wordpress.org/ticket/61039

@cbravobernal
Copy link
Contributor

I've created a PR to add a couple of warnings if Server Directives processing fails.

@cbravobernal
Copy link
Contributor

Created a PR to handle multiple document and window events in the same element.

@gziolo gziolo changed the title Interactivity API - Iteration for WP 6.6 Interactivity API: Iteration for WP 6.6 May 6, 2024
@cbravobernal
Copy link
Contributor

Created a PR to avoid a wrong directive from killing the runtime.

@cbravobernal
Copy link
Contributor

Added another PR, avoiding an emtpy or a wrong namespace from killing the runtime too.

@cbravobernal
Copy link
Contributor

Added a follow-up issue to improve the readability of the directive processing function inside vdom.ts as @sirreal requested in #61249 (comment)

@westonruter
Copy link
Member

Added another performance issue which came out of the discussion in #60574 (comment):

@cbravobernal
Copy link
Contributor

Added a minimum PR with two types:

@michalczaplinski
Copy link
Contributor

Based on discussion in #60979 (comment) I've opened a PR to add build configuration for a standalone package:

@michalczaplinski
Copy link
Contributor

I've started a PR to migrate @wordpress/interactivity-router to TS:

@fabiankaegy
Copy link
Member

Hi all 👋

Reminder: The release candidate for Gutenberg Version 18.5 is scheduled for next Friday (May 31st). So anything that is supposed to make it into WordPress 6.6 must be merged by then.

Please raise any important issues that need additional attention :)

@cbravobernal
Copy link
Contributor

Hi 👋

I updated the description of the main tracking issue with the list of PRs that won't be included in this release, the PRs that still needs review or commit and the PRs ready for 6.6.

@sirreal
Copy link
Member

sirreal commented May 29, 2024

I've added WordPress/wordpress-develop#6453 as an enhancement for 6.6 (let Interactivity API be used in WP Admin).

@cbravobernal
Copy link
Contributor

I've added a unit test to the bug fix for the fatal error if a state or context uses a stdClass. Ready to review: 👀
WordPress/wordpress-develop#6672

@cbravobernal
Copy link
Contributor

cbravobernal commented Jun 7, 2024

Added a merged a bug fix for data-wp-each-child priority.

@luisherranz
Copy link
Member

Closing as finished.

The work for WordPress 6.7 will be tracked in the following tracking issue:

@otakupahp
Copy link

otakupahp commented Jul 17, 2024

The new version introduced a BIG error... Now instead of returning an object, get_context() returns a string

@sirreal
Copy link
Member

sirreal commented Jul 17, 2024

The new version introduced a BIG error... Now instead of returning an object, get_context() returns a string

@otakupahp Will you please open a new issue with details about the problem?

@otakupahp
Copy link

otakupahp commented Jul 17, 2024

Will you please open a new issue with details about the problem?

I would love, but I spend that time tracking the error, and I'm terrible creating those issues. But I found the reason for it.

Before 6.6 I had an array with other arrays:

array(
    array( 'id' => 1, 'item' => 'item 1 name' ),
    array( 'id' => 1, 'item' => 'item 2 name' ),
    array( 'id' => 1, 'item' => 'item 3 name' ),
);

That create this JSON:

[
    {"id":1, "item":"item 1 name"},
    {"id":2, "item":"item 2 name"},
    {"id":3, "item":"item 3 name"},
]

The Interactive API created a context object that contains the array without problems.

Now, it just renders a string instead of an array object

To fix the error, I have to modify my array into this:

array(
    'data' => array(
        array( 'id' => 1, 'item' => 'item 1 name' ),
        array( 'id' => 1, 'item' => 'item 2 name' ),
        array( 'id' => 1, 'item' => 'item 3 name' ),
    )
);

Which created this JSON:

{
    "data": [
        {"id":1, "item":"item 1 name"},
        {"id":2, "item":"item 2 name"},
        {"id":3, "item":"item 3 name"},
    ]
}

This is indeed parsed as an object.

SO, I must patch my code to make it work...

Maybe this was introduced on #6672

@luisherranz
Copy link
Member

I have created an issue to investigate this bug:

@otakupahp, could you please comment on that issue to provide a detailed list of the steps we need to take to reproduce the problem? Thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block API API that allows to express the block paradigm. [Feature] Interactivity API API to add frontend interactivity to blocks. [Type] Iteration Scoped iteration of an effort from a tracking issue or overview issue ideally for a major release.
Projects
No open projects
Status: Done
Development

No branches or pull requests