Explore view transitions in Twenty Fifteen for post title and featured image specifically #8131
Conversation
…d image specifically.
| window.addEventListener( 'pageswap', ( e ) => { | ||
| if ( e.viewTransition ) { | ||
| if ( document.body.classList.contains( 'single' ) ) { | ||
| const article = document.querySelectorAll( 'article.post' ); | ||
| if ( article.length !== 1 ) { | ||
| return; | ||
| } | ||
|
|
||
| setTemporaryViewTransitionNames( [ | ||
| [ article[ 0 ].querySelector( '.entry-title' ), 'post-title' ], | ||
| [ article[ 0 ].querySelector( '.post-thumbnail' ), 'post-thumbnail' ], | ||
| ], e.viewTransition.finished ); | ||
| } else if ( document.body.classList.contains( 'home' ) || document.body.classList.contains( 'archive' ) ) { | ||
| const articleLink = document.querySelector( 'article.post a[href="' + e.activation.entry.url + '"]' ); | ||
| if ( ! articleLink ) { | ||
| return; | ||
| } | ||
|
|
||
| const article = getParentElement( articleLink, 'article.post' ); | ||
|
|
||
| setTemporaryViewTransitionNames( [ | ||
| [ article.querySelector( '.entry-title' ), 'post-title' ], | ||
| [ article.querySelector( '.post-thumbnail' ), 'post-thumbnail' ], | ||
| ], e.viewTransition.finished ); | ||
| } | ||
| } | ||
| } ); | ||
|
|
||
| window.addEventListener( 'pagereveal', ( e ) => { | ||
| if ( ! window.navigation.activation.from ) { | ||
| return; | ||
| } | ||
|
|
||
| if ( e.viewTransition ) { | ||
| if ( document.body.classList.contains( 'single' ) ) { | ||
| const article = document.querySelectorAll( 'article.post' ); | ||
| if ( article.length !== 1 ) { | ||
| return; | ||
| } | ||
|
|
||
| setTemporaryViewTransitionNames( [ | ||
| [ article[ 0 ].querySelector( '.entry-title' ), 'post-title' ], | ||
| [ article[ 0 ].querySelector( '.post-thumbnail' ), 'post-thumbnail' ], | ||
| ], e.viewTransition.ready ); | ||
| } else if ( document.body.classList.contains( 'home' ) || document.body.classList.contains( 'archive' ) ) { | ||
| const articleLink = document.querySelector( 'article.post a[href="' + window.navigation.activation.from.url + '"]' ); | ||
| if ( ! articleLink ) { | ||
| return; | ||
| } | ||
|
|
||
| const article = getParentElement( articleLink, 'article.post' ); | ||
|
|
||
| setTemporaryViewTransitionNames( [ | ||
| [ article.querySelector( '.entry-title' ), 'post-title' ], | ||
| [ article.querySelector( '.post-thumbnail' ), 'post-thumbnail' ], | ||
| ], e.viewTransition.ready ); | ||
| } | ||
| } | ||
| } ); |
There was a problem hiding this comment.
@noamr @bramus Maybe you can help me out here: With this current logic, whenever I click on a link to open a WordPress post that does not have a featured image (post-thumbnail) assigned, my browser gets stuck and seems to endlessly load the page.
Maybe it's just a simple logic flaw, but I'm not sure what's missing. My setTemporaryViewTransitionNames implementation has a condition to skip any elements that are null (via ! element), so I would think such a scenario should be covered. But maybe something else is wrong.
Test using WordPress PlaygroundThe 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
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
There was a problem hiding this comment.
I took a look into this and can reproduce on the WordPress Playground. However, it does not reproduce in a standalone repro.
My assumption is that the WordPress Playground catches an error somewhere, preventing the code from executing properly and locking things up.
(FWIW: The Playground also grinds to a halt when when trying to load it in Safari, without even doing anything)
I’ve done a code suggestion to return early when there is no article which – I hope – prevents code from throwing.
| return; | ||
| } | ||
|
|
||
| const article = getParentElement( articleLink, 'article.post' ); |
There was a problem hiding this comment.
I believe this code throws when there is no article.
| const article = getParentElement( articleLink, 'article.post' ); | |
| const article = getParentElement( articleLink, 'article.post' ); | |
| if ( ! article ) return; |
There was a problem hiding this comment.
Great catch!
That said, this is not what caused the problem, it wasn't actually happening. Still a good safeguard to have in any case.
When this happens, nothing shows up in my browser console. FWIW I experience this bug outside of the WordPress Playground, on my local development environment with the same code, so it's not specific to the WordPress Playground. There's no |
| const articleLink = document.querySelector( 'article.post a[href="' + e.activation.entry.url + '"]' ); | ||
| if ( ! articleLink ) { | ||
| return; | ||
| } |
There was a problem hiding this comment.
@bramus I debugged the issue further and got as far as figuring out that it, for some reason, comes down to this:
- When you click on the link to an article without a featured image from the home page, the
articleLinkvariable here will be empty - at least this is how it shows when I add aconsole.log( articleLink );below. - This causes the early return to trigger.
I still don't understand why that's happening, for two reasons:
- If I manually run this exact
document.querySelector( ... )call in the console using the URL of that post in question, I do get a result, which is theaelement in the post title. That's what I would expect. But for some reason, during the view transition it returns nothing. - The early return here is triggered if
articleLinkis empty. But that shouldn't cause the browser to infinitely get stuck on loading the page right? Or is there any "cleanup" to do if a view transition is "aborted" with an early return like this?
This is an exploration for using cross-document view transitions in a WordPress theme, specifically the Twenty Fifteen theme, similar to #8026.
The difference from that PR is that this one here only transitions specifically the post title and featured image between an archive page and the post's own page, while the other PR transitions the entire main content of the page with slide-in / slide-out transition.
A benefit of the approach explored here is that it could possibly be applied in the same way for almost any WordPress theme, as it only relies on elements commonly used across WordPress themes (both block themes and classic themes), and it avoids more opinionated transitions.
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.