Add transitions with view transitions API

[SantosGuillamot]

Coupled with this other pull request, we added a new experimental directive to add a transition between featured images using the View Transitions API. Here you have a video with the explanation:

https://www.loom.com/share/39631b65aebf42b386f0fee14e0b3f58?sid=fd5f26d5-1105-43ab-87a0-d66467e6ebff

Basically, what I did:

• Support a new property viewTransitionsAPI in the wp-link directive. If it is set to true, the viewTransitionsAPI is enabled while navigating. This already enables all the transitions that can be achieved only with CSS.
• For more complex uses cases, I created a data-wp-transition directive:
  • It creates a global action and global state to be able to create transitions that need a unique id. The transitions are added dynamically with JS. When the action is called, it updates the global state and add the transition to the current element. In the new page, we have a init function that checks if the key defined in the directive matches the global state. If so, it adds the transition dynamically.

There are some aspects to review, although it is already working more or less fine for the movies:

• There seems to be a problem with the backdrop-filter.
• The JS file is sent each time I visit a post.

[luisherranz]

Let's make the data-wp-key change and this should be ready to go 🙂

[luisherranz]

We need to change this too.

[SantosGuillamot]

I made the changes suggested. There is one issue though. It seems that the JS file is being fetched each time I visit a movie. I made a quick video showing what I mean:

Extra.scripts.mp4

[luisherranz]

That's because you have the "Disable cache" option enabled, but that option is always off when the devtools are closed.

[SantosGuillamot]

That's because you have the "Disable cache" option enabled, but that option is always off when the devtools are closed.

I'm not sure about this. Right now, fetching the script multiple times throws a console.log error. And I can see that error even if I have the devtools closed. I made a quick video explaining it:

https://www.loom.com/share/eb25392388a749f98d31c4c1844623e4?sid=4ed71037-4a4e-40eb-ad41-862f0f4a1fd4

[luisherranz]

Then maybe there's a problem with the way the router is loading the scripts during the client-side navigation?

I'm not familiar with that logic, so @michalczaplinski, could you please take a look? Thanks! 🙂

[michalczaplinski]

Sure thing, I'll take a look on Monday!

[michalczaplinski]

@SantosGuillamot I took a look at the issue but I'm getting the error:

view-transitions.js?ver=1.0.0:6 Uncaught TypeError: directive is not a function at view-transitions.js?ver=1.0.0:6:1

I'm not sure why it doesn't fail for you as we need to export the directive, useContext and useLayoutEffect in the runtime/index.js in the block-hydration-experiements plugin.

(sorry for the bad audio)

2023-07-10_16-51-44.mp4

[luisherranz]

@michalczaplinski, you need to use this "coupled" PR:

• Experiment: Add view transitions API directive block-interactivity-experiments#241

[michalczaplinski]

@DAreRodz and I looked at this problem, and we found the culprit. The <script src="src="http://movies.local/wp-content/plugins/wp-movies-demo/lib/view-transitions.js?ver=1.0.0"> node is being re-rendered on the individual movie page because there is another <script> being inserted in-between and Preact doesn't know how to reconcile "correctly".

We've tried a quick fix by adding keys to the vnodes but that didn't seem to work.

2023-07-13_11-41-35.mp4

[SantosGuillamot]

So, if I understood it correctly, it is not a problem with the movies implementation but with client-side navigation, right? Should we open a new issue for this and discuss it there?

[michalczaplinski]

Yes, that's right! @SantosGuillamot I have now updated the video with better-quality audio, btw.

I'll open a new issue in https://github.com/WordPress/block-interactivity-experiments

[michalczaplinski]

Opened the issue: WordPress/block-interactivity-experiments#242