Add support for chronological and pagination transitions by b1ink0 · Pull Request #2336 · WordPress/performance

b1ink0 · 2026-01-08T21:27:11Z

Summary

Relevant technical choices

The implementation of this PR is based on WordPress/wordpress-develop#8370.

Other than that, this PR adds new options to the existing Default Transition Animation setting, allowing users to select chronological and pagination transitions for the supported transition types: Slide, Swipe, and Wipe.

TODO:

~~View transition between paginated list table navigations in the admin dashboard~~ Will be added in a subsequent PR. This PR will focus on the frontend only for now.
Add tests

Co-authored-by: Felix Arntz <felixarntz@google.com>

codecov · 2026-01-08T21:37:18Z

Codecov Report

❌ Patch coverage is 29.41176% with 72 lines in your changes missing coverage. Please review.
✅ Project coverage is 68.92%. Comparing base (ee918b1) to head (b6dfded).

Files with missing lines	Patch %	Lines
plugins/view-transitions/includes/theme.php	40.00%	45 Missing ⚠️
plugins/view-transitions/includes/settings.php	0.00%	27 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##            trunk    #2336      +/-   ##
==========================================
- Coverage   69.33%   68.92%   -0.42%     
==========================================
  Files          90       90              
  Lines        7749     7830      +81     
==========================================
+ Hits         5373     5397      +24     
- Misses       2376     2433      +57

Flag	Coverage Δ
multisite	`68.92% <29.41%> (-0.42%)`	⬇️
single	`35.36% <0.00%> (-0.37%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

…ansition-support

westonruter · 2026-01-27T16:03:42Z

View transition between paginated list table navigations in the admin dashboard

This might not be necessary. Since admin view transitions have been merged into core, if we do something there it maybe should go into Trac.

b1ink0 · 2026-01-27T16:26:01Z

@westonruter What do you think about removing the table navigation scope from this PR and handling it in a separate PR instead? It would depend on the implementation of the chronological and pagination transition support that this PR introduces.

Since Core currently doesn’t support chronological or pagination transitions, from my perspective it makes sense to first add this functionality to the plugin. Once that’s in place and validated, we can then look at bringing it into Core.

westonruter · 2026-01-27T16:53:41Z

Yes, this PR can be targeted at the frontend only.

Any post list table navigation can be considered later, but it seems what is currently in the admin is fine for this.

…ansition-support

github-actions · 2026-01-27T16:58:29Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: b1ink0 <b1ink0@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

plugins/view-transitions/js/view-transitions.js

Copilot

Pull request overview

Adds support for choosing transition types based on navigation direction/context (chronological and pagination), and exposes new “Chronological and Pagination” options in the plugin’s default transition animation setting.

Changes:

Introduces JS logic to determine and apply a view-transition “type” (default/chronological/pagination; forwards/backwards) during navigation.
Extends theme support/config to include additional transition-type-specific animations and attempts to scope CSS to those transition types.
Adds new settings UI options to enable chronological + pagination transitions for Slide/Swipe/Wipe.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.

File	Description
`plugins/view-transitions/js/view-transitions.js`	Adds transition-type detection and assigns the computed type during `pageswap`/`pagereveal`.
`plugins/view-transitions/js/types.ts`	Adds a `NavigationHistoryEntry` type used by the JS transition-type logic.
`plugins/view-transitions/includes/theme.php`	Adds theme support defaults and loads/scopes additional per-type animation CSS and JS config.
`plugins/view-transitions/includes/settings.php`	Adds new “Chronological and Pagination” animation options and maps them to per-type animation settings.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

plugins/view-transitions/includes/theme.php

Copilot · 2026-01-27T17:10:04Z

plugins/view-transitions/includes/theme.php

+			$additional_animation_args       = isset( $theme_support[ $transition_type . '-animation-args' ] ) ? (array) $theme_support[ $transition_type . '-animation-args' ] : array();
+			$additional_animation_stylesheet = $animation_registry->get_animation_stylesheet( $theme_support[ $transition_type . '-animation' ], $additional_animation_args );
+			if ( '' !== $additional_animation_stylesheet ) {
+				wp_add_inline_style(
+					'plvt-view-transitions',
+					plvt_scope_animation_stylesheet_to_transition_type( $additional_animation_stylesheet, $transition_type )
+				);


The additional transition animation stylesheet is not passed through plvt_inject_animation_duration(), so chronological/pagination animations will ignore the configured default-animation-duration and instead use the CSS file’s default (typically 1s). Apply the same duration injection used for the default animation to each additional transition stylesheet before scoping/adding it.

plugins/view-transitions/includes/theme.php

Copilot · 2026-01-27T17:10:05Z

plugins/view-transitions/includes/settings.php

+	if ( isset( $chronological_pagination_animations[ $args['default-animation'] ] ) ) {
+		$base_animation                            = $chronological_pagination_animations[ $args['default-animation'] ];
+		$args['chronological-forwards-animation']  = $base_animation . '-from-right';
+		$args['chronological-backwards-animation'] = $base_animation . '-from-left';
+		$args['pagination-forwards-animation']     = $base_animation . '-from-right';
+		$args['pagination-backwards-animation']    = $base_animation . '-from-left';
+	}


When the special *-chronological-pagination option is selected, $args['default-animation'] remains set to that value, but it is not a registered animation slug/alias in the animation registry. As a result, the default transition falls back to the browser default (fade) instead of the intended slide/swipe/wipe. Map $args['default-animation'] to a real registry alias/slug (e.g. the base animation or a concrete direction) when enabling these special options.

Copilot · 2026-01-27T17:10:05Z

plugins/view-transitions/js/types.ts

+export type NavigationHistoryEntry = {
+	url: string;
+};


While adding NavigationHistoryEntry, note that the runtime config.animations now includes values that aren’t represented in the TS types: plvt_load_view_transitions() can emit false for disabled transition types and currently also emits a targetName field. Update ViewTransitionsConfig.animations / ViewTransitionAnimationConfig accordingly (or remove unused fields from the JS config) so the typings match actual data.

Copilot · 2026-01-27T17:10:05Z

plugins/view-transitions/includes/theme.php

+	$additional_transition_types = array(
+		'chronological-forwards',
+		'chronological-backwards',
+		'pagination-forwards',
+		'pagination-backwards',
+	);
+


New behavior is introduced for additional transition types (chronological/pagination) and CSS scoping, but the existing PHP unit tests in plugins/view-transitions/tests/test-theme.php don’t cover any of this (e.g. ensuring disabled types remain disabled, and enabled types enqueue scoped CSS). Please add/update tests around the additional transition type handling to prevent regressions.

Copilot · 2026-01-27T17:10:05Z

plugins/view-transitions/includes/theme.php

+	foreach ( $additional_transition_types as $transition_type ) {
+		if ( isset( $theme_support[ $transition_type . '-animation' ] ) ) {
+			$additional_animation_args       = isset( $theme_support[ $transition_type . '-animation-args' ] ) ? (array) $theme_support[ $transition_type . '-animation-args' ] : array();
+			$additional_animation_stylesheet = $animation_registry->get_animation_stylesheet( $theme_support[ $transition_type . '-animation' ], $additional_animation_args );
+			if ( '' !== $additional_animation_stylesheet ) {
+				wp_add_inline_style(
+					'plvt-view-transitions',
+					plvt_scope_animation_stylesheet_to_transition_type( $additional_animation_stylesheet, $transition_type )
+				);
+			}
+
+			$animations_js_config[ $transition_type ] = array(
+				'useGlobalTransitionNames' => $animation_registry->use_animation_global_transition_names( $theme_support[ $transition_type . '-animation' ], $additional_animation_args ),
+				'usePostTransitionNames'   => $animation_registry->use_animation_post_transition_names( $theme_support[ $transition_type . '-animation' ], $additional_animation_args ),
+				'targetName'               => isset( $additional_animation_args['target-name'] ) ? $additional_animation_args['target-name'] : '*', // Special argument.
+			);
+		} else {
+			$animations_js_config[ $transition_type ] = false;
+		}
+	}


In the additional transition types loop, isset( $theme_support[ $transition_type . '-animation' ] ) will be true even when the value is false (default), so disabled transition types get treated as enabled and produce a truthy JS config entry. This causes determineTransitionType() to select e.g. chronological-forwards even when the theme support explicitly disables it. Use a truthiness/type check (e.g., non-empty string) rather than isset() and only build $animations_js_config[$transition_type] when an actual animation alias is configured; otherwise set it to false.

…ansition-support

westonruter · 2026-02-27T06:36:52Z

@b1ink0 I'm not sure if I'm testing this right, but I don't see any difference with this PR versus this branch?

`trunk`	this branch
Screen.Recording.2026-02-26.at.22.30.55.mov	Screen.Recording.2026-02-26.at.22.31.34.mov

b1ink0 · 2026-02-27T07:01:57Z

@westonruter Make sure pretty permalinks are turned on and chronological and pagination transition animation is selected in admin.

This branch:

Screen.Recording.2026-02-27.at.12.27.09.PM.mov

trunk:

Screen.Recording.2026-02-27.at.12.28.36.PM.mov

westonruter · 2026-02-27T07:05:25Z

@b1ink0 I guess I'm confused. Shouldn't I be able to leave the default transition animations to fade? I guess I assumed that the Swipe animation would automatically be selected just for the chronological pagination transitions?

I'm also not sure exactly what to expect, as I haven't worked much on this plugin or with view transitions generally.

b1ink0 · 2026-02-27T07:22:57Z

@b1ink0 I guess I'm confused. Shouldn't I be able to leave the default transition animations to fade?

Currently, my understanding and how the WordPress develop PR version works is that only one animation type can be selected at a time. For example, if fade is selected, it will apply everywhere. Other animations like swipe and slide have different direction types, so if a user selects one of those, they would expect it to work on all pages.

With the current implementation of chronological pagination transitions, these are only supported for some animation types, such as slide, wipe, or swipe, since they require an animation type that supports direction. That’s why I thought about adding a new type to the existing types to support this transition.

I guess I assumed that the Swipe animation would automatically be selected just for the chronological pagination transitions?

We can consider this to give users more control. There could be a checkbox to enable chronological pagination transitions, and by default, it could select swipe, which will only apply to chronological pagination–supported pages. All other pages will use the selected normal transition type. Then there could also be a dropdown to select other supported chronological pagination transition types.

I'm also not sure exactly what to expect, as I haven't worked much on this plugin or with view transitions generally.

I think we should implement this in a way that aligns with user expectations. You can outline what you expect and how it should behave when this is turned on.

What do you think about this @westonruter ?

westonruter · 2026-02-27T07:34:59Z

I'll have to study this some more.

In the meantime, @mukeshpanchal27 What are your thoughts?

b1ink0 and others added 2 commits January 9, 2026 02:03

Add support for chronological and pagination transitions

08e7cae

Co-authored-by: Felix Arntz <felixarntz@google.com>

Add options to settings for chronological and pagination transitions

f518306

b1ink0 added this to the view-transitions n.e.x.t milestone Jan 8, 2026

b1ink0 requested a review from westonruter January 8, 2026 21:27

b1ink0 added [Type] Enhancement A suggestion for improvement of an existing feature [Plugin] View Transitions Issues for the View Transitions plugin labels Jan 8, 2026

Merge branch 'trunk' into enhancement/add-chronological-pagination-tr…

e1d07ae

…ansition-support

Merge branch 'trunk' into enhancement/add-chronological-pagination-tr…

0bcdbc1

…ansition-support

b1ink0 marked this pull request as ready for review January 27, 2026 16:58

b1ink0 requested a review from felixarntz as a code owner January 27, 2026 16:58

westonruter requested a review from Copilot January 27, 2026 16:58

Copilot started reviewing on behalf of westonruter January 27, 2026 16:59 View session

westonruter reviewed Jan 27, 2026

View reviewed changes

plugins/view-transitions/js/view-transitions.js Outdated Show resolved Hide resolved

Copilot AI reviewed Jan 27, 2026

View reviewed changes

Merge branch 'trunk' into enhancement/add-chronological-pagination-tr…

431e777

…ansition-support

b1ink0 requested a review from mukeshpanchal27 as a code owner February 25, 2026 18:37

b1ink0 and others added 4 commits February 26, 2026 00:12

Wrap animation stylesheet in media query for reduced motion preference

d3b4785

Merge branch 'trunk' into enhancement/add-chronological-pagination-tr…

f2ce961

…ansition-support

Apply some static analysis improvements

5c43cc2

Export pagination_base from PHP

b6dfded

westonruter modified the milestones: view-transitions 1.2.0, view-transitions n.e.x.t Feb 27, 2026

Conversation

b1ink0 commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Relevant technical choices

TODO:

Uh oh!

codecov bot commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

westonruter commented Jan 27, 2026

Uh oh!

b1ink0 commented Jan 27, 2026

Uh oh!

westonruter commented Jan 27, 2026

Uh oh!

github-actions bot commented Jan 27, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

westonruter commented Feb 27, 2026

Uh oh!

b1ink0 commented Feb 27, 2026

Uh oh!

westonruter commented Feb 27, 2026

Uh oh!

b1ink0 commented Feb 27, 2026

Uh oh!

westonruter commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

b1ink0 commented Jan 8, 2026 •

edited

Loading

codecov bot commented Jan 8, 2026 •

edited

Loading

westonruter commented Feb 27, 2026 •

edited

Loading