Explore view transitions in Twenty Fifteen for post title and featured image specifically #8131
+109
−0
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…d image specifically.
felixarntz
commented
Jan 15, 2025
Comment on lines
+30
to
+88
| 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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.