Experiment: Add view transitions API directive

[SantosGuillamot]

I started exploring the possibility of creating a directive for the View Transitions API. Here you have a video with the explanation:

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

This is the branch of the movies repo.

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.
• Adding the global action to the same element using the wp-link directive seems to cause a conflict.
• We have to rethink the naming and structure of the new directives.

[luisherranz]

Great exploration 🙂

It'd be cool to add this functionality ad-hoc to the movies demo so people can see what's possible, but wait more to merge it until we figure out the best way to do it for any theme.

Maybe we can add the data-wp-view-transition directives to the movies demo plugin and in this codebase expose store in the directives and keep the support for viewTransition in data-wp-link.

I think we won't port data-wp-link as it is to Gutenberg because we should probably switch to an event delegation logic, but we can keep using it here.

[SantosGuillamot]

It'd be cool to add this functionality ad-hoc to the movies demo so people can see what's possible, but wait more to merge it until we figure out the best way to do it for any theme.

That makes sense to me 🙂 I'll try to work on that in the upcoming weeks.

[SantosGuillamot]

I've moved the data-wp-transition to the movies repo PR. I had to exposed some functions in order to use them there.

[luisherranz]

LGTM! 🎈

[luisherranz]

Let's add this change to start using data-wp-key: https://github.com/WordPress/wp-movies-demo/pull/52/files#r1247615718

[luisherranz]

I'm going to close this issue as part of the migration to the Gutenberg repository.

These changes were already deployed to the wp-movies-demo site, but we won't merge them until we figure out better how to integrate the new View Transitions API. Please, go to this discussion to continue the conversation.