Refine the admin menu view transition animation by westonruter · Pull Request #11912 · WordPress/wordpress-develop

westonruter · 2026-05-20T22:42:04Z

Trac ticket: https://core.trac.wordpress.org/ticket/65032

When view transitions were enabled throughout wp-admin in 7.0, each top-level admin menu item was given a stable view-transition-name, so navigating between sections animates them into place (the "accordion" effect). Three rough edges remained:

The accordion failed intermittently. A cross-document view transition snapshots the incoming page at its first render, which can occur before the <body> has finished parsing. The snapshot then captures a half-built admin menu, so the menu items have no height delta and the accordion silently degrades to a plain cross-fade. It reproduces most easily with DevTools closed; pagereveal instrumentation confirmed the snapshot being taken at readyState: "loading" with an incomplete menu.
A newly-current section's submenu was captured at its full intrinsic height, so it painted at full height from the first frame and overlapped the menu items below while they were still sliding down into place.
The collapse button (#collapse-menu) was not named, so it cross-faded as part of the page root instead of moving with the rest of the menu.

Changes

Print a render-blocking <link rel="expect" href="#wpfooter" blocking="render" media="(prefers-reduced-motion: no-preference)"> in the admin <head>, so the first render — and therefore the transition's snapshot — waits until the page is fully parsed. The snapshot then always captures a complete menu and the accordion runs reliably. The media query scopes the small first-render delay to when view transitions actually run.
Add a shared view-transition-class (wp-menu-top) to every top-level menu item and set overflow: clip on ::view-transition-image-pair(.wp-menu-top). This clips each menu-top's snapshot to its animating group box, so an expanding submenu wipes open from the link row to full height — and wipes closed in reverse — in step with the items below it, instead of overlapping them.
Give #collapse-menu its own view-transition-name so it slides into place with the menu items rather than cross-fading via the root.

Files changed: src/wp-admin/css/view-transitions.css, src/wp-includes/view-transitions.php, src/wp-includes/default-filters.php.

Testing instructions

In Chrome, with the OS "reduced motion" setting off, log in to wp-admin.
Navigate repeatedly between sections whose submenus differ — e.g. Settings ↔ Users — including with DevTools closed. The section accordion (the previous submenu wiping closed, the new one wiping open) should play on every navigation, never degrading to a plain cross-fade.
Confirm the expanding submenu wipes open in step with the surrounding menu items, rather than briefly overlapping the items beneath it.
Confirm the "Collapse menu" button slides with the menu rather than fading.

Clip each top-level menu item's view transition snapshot to its animating group box. By default a captured snapshot keeps its full intrinsic height, so a newly expanded submenu painted at full height from the first frame and overlapped the menu items below while they were still sliding into place. Setting `overflow: clip` on the image pair makes the submenu wipe open, and closed in reverse, in step with those items. Also name the collapse button so it slides into place with the menu items rather than cross-fading via the page root, and add comments explaining each rule. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

github-actions · 2026-05-20T22:42:12Z

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.

Core Committers: Use this line as a base for the props when committing in SVN:

Props westonruter.

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

github-actions · 2026-05-20T22:46:39Z

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

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.

westonruter · 2026-05-20T23:30:01Z

In the following videos, I have a plugin active which slows down the animations to make them more observable:

add_action(
	'admin_print_styles',
	function () {
		?>
		<style>
			/* TEMP DEBUG: slow every view transition animation down to 2s. Remove before shipping. */
			::view-transition-group(*),
			::view-transition-old(*),
			::view-transition-new(*) {
				animation-duration: 1s;
			}
		</style>
		<?php
	}
);

Before:

Screen.Recording.2026-05-20.at.16.26.37.mov

After:

Screen.Recording.2026-05-20.at.16.28.04.mov

A cross-document view transition snapshots the incoming page at its first render, which can occur before the body has finished parsing. When that happens the admin menu is only partially built in the snapshot, so the menu-top elements have no height delta and the section accordion silently degrades to a plain cross-fade. Print a render-blocking `<link rel="expect">` pointed at the end of the body, so the first render — and therefore the transition's snapshot — waits until the page is fully parsed. The media query scopes the small first-render delay to when view transitions run. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

westonruter · 2026-05-21T00:23:53Z

🤖 From Claude Code — paired with @westonruter on this branch. Posting this to document how the root cause was found, since the render-blocking fix isn't obvious without the backstory.

Diagnosing the intermittent accordion failure

Symptom. Navigating between admin sections, the menu "accordion" (one section's submenu collapsing as the next expands) usually played, but intermittently degraded to a plain cross-fade with no movement. It was hard to reproduce — and, crucially, it happened more often with DevTools closed.

Ruled out along the way:

Scroll position. The admin menu scrolls with the page when it is taller than the viewport, so a scroll delta between two loads can translate the whole menu. This was confirmed as a real mechanism via a controlled same-document transition — but the bug also occurs with a fixed, top-aligned menu, so it was not the cause here.
Overlapping navigations. Clicking again before the previous (~0.25s) transition finished could interrupt it. Instrumentation ruled this out: the failing navigations were clean push navigations with priorTransitionStillRunning: false.

Instrumentation. A temporary pagereveal / pageswap logger recorded, for every navigation, each menu item's captured old/new view-transition snapshot heights plus context (readyState, navigation type, whether a prior transition was still running). Because the bug reproduced best with DevTools closed, each failing navigation was persisted to localStorage so it could be captured without DevTools open and inspected afterward.

Root cause. Every captured failure showed the same two things: readyState: "loading", and an incomplete admin menu — e.g. only 7 of the 11 .menu-top items existed, or none at all.

A cross-document view transition snapshots the incoming page at its first render, and the browser paints incrementally — so first paint (and therefore the snapshot) can happen before the <body> has finished parsing. When it does, the admin menu is only half-built in the snapshot; the items that should change height are not there yet, so there is no geometry delta to animate and the transition falls back to a plain cross-fade. "More often with DevTools closed" fits exactly: a faster load lets first paint beat the body parse.

Fix. A render-blocking expectation in the admin <head>:

<link rel="expect" href="#wpfooter" blocking="render" media="(prefers-reduced-motion: no-preference)">

This holds the first render — and so the view transition's snapshot — until #wpfooter (the end of the body) has parsed, guaranteeing the snapshot captures a fully-built page. The media query confines the small first-render delay to when view transitions actually run.

The two CSS refinements in the first commit — clipping each menu item's snapshot so a submenu wipes open/closed instead of overlapping the items below, and naming #collapse-menu so it moves with the menu — were found and fixed during the same investigation.

…hould return string but returns string|false.

Copilot

Pull request overview

This PR refines wp-admin view-transition behavior so the admin menu accordion animation is captured after the page is fully parsed, clips submenu snapshots during expansion/collapse, and includes the collapse button in the menu transition.

Changes:

Adds a render-blocking rel="expect" link in admin head for complete-page transition snapshots.
Adds CSS transition grouping/clipping for top-level admin menu items.
Names the collapse menu item for independent view-transition animation.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
`src/wp-includes/view-transitions.php`	Adds the render-blocking link printer and hardens CSS file reading to return a string.
`src/wp-includes/default-filters.php`	Hooks the new render-blocking link output into `admin_head`.
`src/wp-admin/css/view-transitions.css`	Adds menu item transition classes, collapse button naming, and snapshot clipping.

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

westonruter · 2026-06-02T11:28:10Z

@mukeshpanchal27 How's this look to you?

@SInCE

…sition-improvements * origin/trunk: (53 commits) REST API: Allow-list ability schema response keywords Plugins: Fix plugin card width calculation on the Add Plugins screen. Build/Test Tools: Remove unused reusable workflow. Editor: add responsive global styles for blocks. Build/Test Tools: Configure Composer caching with input where possible. Twenty Eleven: Add missing documentation for some global variables. Abilities API: Add coverage for top-level `required` in input validation Abilities API: Add coverage for ignored schema `validate_callback`/`sanitize_callback` HTML API: Fixes for issues discovered while fuzzing. Twenty Ten: Add missing documentation for some global variables. Privacy: Correct type of `WP_User_Request::$user_id` from `int` to `string`/`numeric-string`. Charset: Add missing `return` statement to `_mb_ord()`. Docs: Add missing @SInCE tags to WP_REST_Icons_Controller. Docs: Add missing @SInCE tags to `WP_Icons_Registry`. KSES: Decode style attribute before sending to safecss_filter_attr(). Twenty Sixteen: Correct display of italics in citations. Docs: Correct some typos in JS inline comments and DocBlocks. Docs: Remove duplicate documentation for the `rest_block_hooks_post_types` hook. Docs: Fix typo in `WP_Query` post-loading comment. Media: Re-introduce client-side media processing feature. ...

…link()`. Covers that the function is hooked at `admin_head` and that it prints a single render-blocking `<link rel="expect">` tag with the expected attributes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Address PHPStan error: Function wp_get_view_transitions_admin_css() s…

b5abf8d

…hould return string but returns string|false.

westonruter requested a review from adamziel May 21, 2026 00:40

westonruter requested a review from Copilot May 31, 2026 18:05

Copilot started reviewing on behalf of westonruter May 31, 2026 18:05 View session

Copilot AI reviewed May 31, 2026

View reviewed changes

Comment thread src/wp-includes/view-transitions.php

westonruter and others added 2 commits June 2, 2026 13:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refine the admin menu view transition animation#11912

Refine the admin menu view transition animation#11912
westonruter wants to merge 5 commits into
WordPress:trunkfrom
westonruter:trac-65032-view-transition-improvements

westonruter commented May 20, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 20, 2026

Uh oh!

github-actions Bot commented May 20, 2026

Uh oh!

westonruter commented May 20, 2026

Uh oh!

westonruter commented May 21, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

westonruter commented Jun 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

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

Uh oh!

Changes

Testing instructions

Uh oh!

github-actions Bot commented May 20, 2026

Uh oh!

github-actions Bot commented May 20, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

westonruter commented May 20, 2026

Before:

After:

Uh oh!

westonruter commented May 21, 2026

Diagnosing the intermittent accordion failure

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

westonruter commented Jun 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

westonruter commented May 20, 2026 •

edited

Loading