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

Add transitions with view transitions API #52

Open
wants to merge 10 commits into
base: main
Choose a base branch
from

Conversation

SantosGuillamot
Copy link
Collaborator

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.

wpmovies.php Outdated Show resolved Hide resolved
Copy link
Member

@luisherranz luisherranz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

wpmovies.php Outdated
$p->seek( 'parent' );
$data_key = '';
if ( $p->next_tag( 'img' ) ) {
$data_key = $p->get_attribute( 'data-key' );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to change this too.

lib/view-transitions.js Show resolved Hide resolved
@SantosGuillamot
Copy link
Collaborator Author

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
Copy link
Member

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

@SantosGuillamot
Copy link
Collaborator Author

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
Copy link
Member

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
Copy link
Collaborator

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

@michalczaplinski
Copy link
Collaborator

@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
Copy link
Member

@michalczaplinski
Copy link
Collaborator

michalczaplinski commented Jul 12, 2023

@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
Copy link
Collaborator Author

SantosGuillamot commented Jul 13, 2023

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
Copy link
Collaborator

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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants