Explore how to integrate the new View Transitions API

[luisherranz]

Let's explore how to integrate the new View Transitions API!

@DAreRodz played with it in this branch, but everything was hardcoded. Let's see what tools we can build to make using this API a breeze for theme creators.

---

About running document.startViewTransition with client-side navigation:

• Should the router support it?

  • Should it be configured using the router's state? Like:

    store({
      state: {
        router: {
          viewTransitions: true,
        },
      },
    });

  • Should it be a <meta> tag like the client-side navigation?

    <meta itemprop="wp-view-transitions" content="active">

  • Should it be the same <meta> tag as the client-side navigation?

    <meta itemprop="wp-interactivity" content='{ "clientSideNavigation": true, "viewTransitions": true }'>

  • Should the client-side navigation be a state configuration instead of a <meta> tag?

    store({
      state: {
        router: {
          clienSideNavigation: true,
          viewTransitions: true
        },
      },
    });

  • Can we make it so document.startViewTransition is not hardcoded into the router, and instead is injected as external functionality? (make the router "extensible")

About setting view-transition-name dynamically:

• Can we create a directive to set it dynamically right before the user navigates?

  <a
    class="wp-block-group"
    data-wp-link
    data-wp-view-transition-name="featured-image"
  >
    <h3 class="wp-block-header">Some Post Title</h3>
    <img class="wp-block-image" src=".../featured-image.jpg" />
  </a>

• Should it be part of `wp-link'?

  <a
    class="wp-block-group"
    data-wp-link='{ "prefetch": true, "viewTransitionName": "featured-image" }'
  >
    <h3 class="wp-block-header">Some Post Title</h3>
    <img class="wp-block-image" src=".../featured-image.jpg" />
  </a>

• If this needs to match the CSS of the theme, how can a theme "inject" this directive in the correct place of the HTML?

• Should blocks support it by default? (configurable in the Editor)

---

Other questions?

[luisherranz]

@SantosGuillamot started this exploration:

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

[luisherranz]

The Astro team is working on an API to do client-side navigation. It has directives for the transitions, so we should take a look and check if some of their ideas are good and could be applied here as well: withastro/roadmap#607

[luisherranz]

SvelteKit is also working on it, so it'd be interesting to explore: https://svelte.dev/blog/view-transitions

[luisherranz]

More people join the party. Now Remix and React Router: https://twitter.com/remix_run/status/1713967836798886360

[maurodf0]

Hi, there's some news about this one, seems very interesting!