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]

This API is interesting. Not to copy, but to see what custom requirements Astro devs had which led to this API: https://docs.astro.build/en/guides/view-transitions/#building-a-custom-swap-function

[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!

[Enfaf]

Hello. Please, you should return to this topic, it is a shame that something native to browsers cannot be implemented in WP. The issue of view transitions will open many doors when it comes to improving WordPress themes and it is something that from what I see is not being taken with the consideration it deserves. Greetings