Experiment with cross-document view transitions in Twenty Fifteen theme

[felixarntz]

This is an experiment to use cross-document view transitions in WordPress, testing with the Twenty Fifteen theme.

For more context, see https://developer.chrome.com/docs/web-platform/view-transitions/cross-document

Trac ticket:

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[felixarntz]

For some reason, the pagereveal event is not fired in most of my page loads. I "randomly" see it fired, but rarely - no idea where that comes from.

I added the pageRevealEvent console log to ensure it has nothing to do with the e.viewTransition check below, so it's indeed the event itself that is not fired.

🤔

[swissspidy]

I only see it fired when using the back/forward buttons in the browser.

[noamr]

My guess is that the scripts that adds the event listener is called too late. It has to be added before the first rendering opportunity.

[noamr]

I'm also seeing that MDN doesn't talk much about this, mind filing an issue?
pagereveal event listeners need to be added in either:

1. A classic parser-blocking script at the head (not a module, not async, not defer)
2. An async script in the head with blocking=render, either module or classic.

[noamr]

/cc @bramus, perhaps the cross-document view-transition official chromium docs should mention this if they don't already.

[bramus]

Thanks for the ping @noamr. It’s not mentioned in our docs either (but all demos do use it that way). I remember being bitten by this myself, so would indeed be good to have some extra notices around this.

[felixarntz]

Fixed in 3027a06, this was the problem indeed.

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[felixarntz]

Closing this in favor of #8370, which now includes this behavior in a more abstract implementation that works across multiple themes and makes more sense.