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 28.28283% with 71 lines in your changes missing coverage. Please review.
✅ Project coverage is 68.75%. Comparing base (509ad26) to head (0bcdbc1).
⚠️ Report is 2 commits behind head on trunk.

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

Additional details and impacted files

@@            Coverage Diff             @@
##            trunk    #2336      +/-   ##
==========================================
- Coverage   69.17%   68.75%   -0.42%     
==========================================
  Files          90       90              
  Lines        7708     7787      +79     
==========================================
+ Hits         5332     5354      +22     
- Misses       2376     2433      +57

Flag	Coverage Δ
multisite	`68.75% <28.28%> (-0.42%)`	⬇️
single	`35.03% <0.00%> (-0.36%)`	⬇️

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.

westonruter · 2026-01-27T17:02:06Z

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

+			oldPageMatches = oldPathname.match( /\/page\/(\d+)\/?$/ );
+			newPageMatches = newPathname.match( /\/page\/(\d+)\/?$/ );


The page slug is configurable via \WP_Rewrite::$pagination_base. That value should be getting exported from PHP to JS for reuse here.

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.

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

plugins/view-transitions/includes/theme.php

+				wp_add_inline_style(
+					'plvt-view-transitions',
+					plvt_scope_animation_stylesheet_to_transition_type( $additional_animation_stylesheet, $transition_type )


Additional transition stylesheets are added without wrapping them in the same @media (prefers-reduced-motion: no-preference) guard used for the default animation (see line 337). This means chronological/pagination animations may run even when users prefer reduced motion. Wrap the scoped additional CSS in that media query as well.

Suggested change

wp_add_inline_style(

'plvt-view-transitions',

plvt_scope_animation_stylesheet_to_transition_type( $additional_animation_stylesheet, $transition_type )

$scoped_additional_animation_stylesheet = plvt_scope_animation_stylesheet_to_transition_type( $additional_animation_stylesheet, $transition_type );

$wrapped_additional_animation_stylesheet = "@media (prefers-reduced-motion: no-preference) {\n" . $scoped_additional_animation_stylesheet . "\n}";

wp_add_inline_style(

'plvt-view-transitions',

$wrapped_additional_animation_stylesheet

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.

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

Copilot AI reviewed Jan 27, 2026

View reviewed changes

		oldPageMatches = oldPathname.match( /\/page\/(\d+)\/?$/ );
		newPageMatches = newPathname.match( /\/page\/(\d+)\/?$/ );

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!

westonruter Jan 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

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!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

b1ink0 commented Jan 8, 2026 •

edited

Loading

codecov bot commented Jan 8, 2026 •

edited

Loading