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 #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