Add view transitions in WP Admin #10699

felixarntz · 2026-01-08T19:44:27Z

Adds "virtual" CSS asset wp-view-transitions-admin with inline CSS for basic view transitions in WP Admin, including smooth transitions between admin menu items.
Enqueues the asset on admin_enqueue_scripts by default.
Provides a function with the inline CSS so that it lives in the view-transitions.php file rather than the generic script-loader.php file.
CSS is exactly the same as in https://github.com/WordPress/performance/blob/trunk/plugins/view-transitions/includes/admin.php.
Tests included.

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

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.

github-actions · 2026-01-08T19:44:38Z

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 flixos90, westonruter, mukesh27.

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

github-actions · 2026-01-08T19:55:38Z

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

The Plugin and Theme Directories cannot be accessed within Playground.
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.

src/wp-includes/view-transitions.php

westonruter · 2026-01-08T19:57:08Z

src/wp-includes/view-transitions.php

+ * @return string The CSS.
+ */
+function wp_get_view_transitions_admin_css(): string {
+	$css = <<<CSS


Would it be better to have this CSS in a file and then load it? See what is being merged soon in #10676

This would enable CSS linting as well as minification.

Great point! Will update to move this to a CSS file. Just would want to make sure that that file never gets loaded as its own HTTP request since that would be somewhat pointless with its 2 lines or so :)

I started working on this locally, but I think because this is "very" modern CSS, I think Core's linters don't like it because they're probably outdated.

I'm not familiar with that tooling, so I'm unsure whether we can simply update it or whether that would introduce a new set of problems to address. Do you have any insights on this?

Specifically, it's complaining about the <custom-ident> bit: ") expected" 🤔

Yeah, CSS validation in the Customizer and Site Editor are outdated I know. See Core-64418. With the CSS linter, can it be suppressed with a comment? Which tool is failing? Maybe we can update the dependency.

Humm, I tried adding a src/wp-admin/css/view-transitions.css file containing:

@view-transition { navigation: auto; } #adminmenu > .menu-top { view-transition-name: attr( id type(<custom-ident>), none ); }

Then I ran npm run build:dev and it successfully emitted a src/wp-admin/css/view-transitions.min.css containing:

/*! This file is auto-generated */ @view-transition{navigation:auto}#adminmenu>.menu-top{view-transition-name:attr(id type(<custom-ident>),none)}

So it seems to be working fine.

felixarntz · 2026-01-10T20:50:09Z

@westonruter Do you have an idea how to best fix https://github.com/WordPress/wordpress-develop/actions/runs/20884023219/job/60004547145?pr=10699 or why it fails? My hunch is that it's because the .min file that's created as part of the build doesn't exist maybe and then it causes a fatal error?

westonruter · 2026-01-10T21:03:50Z

@felixarntz That's strange, because for the E2E test it does a full build, right? For running PHPUnit tests, I know a build isn't done, and this causes all kinds of headaches when SCRIPT_DEBUG is off. We have to touch files to make sure they exist so errors don't happen, for example:

wordpress-develop/tests/phpunit/tests/formatting/emoji.php

Lines 18 to 19 in 376539e

    
           // `_print_emoji_detection_script()` assumes `wp-includes/js/wp-emoji-loader.js` is present: 
        
           self::touch( ABSPATH . WPINC . '/js/wp-emoji-loader.js' );

But I don't see how this would be needed for E2E tests if they were working correctly with SCRIPT_DEBUG was off previously. If SCRIPT_DEBUG was off and a build isn't done, then none of the minified JS/CSS files would exist, and nothing would work.

westonruter · 2026-01-10T21:08:59Z

To debug whether the build is the problem, maybe temporarily change:

$affix = SCRIPT_DEBUG ? '' : '.min';

To:

$affix = '';

mukeshpanchal27

Thanks @felixarntz for the PR! Overall look solid to me. Left some feedback/Questions.

mukeshpanchal27 · 2026-01-11T06:37:10Z

src/wp-includes/view-transitions.php

+	$path  = ABSPATH . "wp-admin/css/view-transitions{$affix}.css";
+	return file_get_contents( $path );


Suggested change

$path = ABSPATH . "wp-admin/css/view-transitions{$affix}.css";

return file_get_contents( $path );

$path = ABSPATH . "wp-admin/css/view-transitions{$affix}.css";

if ( ! file_exists( $path ) || ! is_readable( $path ) ) {

return '';

}

return file_get_contents( $path );

Should we check whether the file exists and return an empty string if it doesn’t?

Do we needs to add filter so we can extend the CSS? Something like:

return apply_filters( 'wp_view_transitions_admin_css', file_get_contents( $path ) );

Should we check whether the file exists and return an empty string if it doesn’t?

It should exist. If not, it's an error. We don't do a file_exists() check in _print_emoji_detection_script(), for example.

src/wp-includes/view-transitions.php

Copilot

Pull request overview

This PR adds View Transitions support for the WordPress admin interface. It introduces a new view-transitions.php file with functions to enqueue view transitions CSS, registers a virtual CSS asset wp-view-transitions-admin with inline CSS for smooth transitions between admin menu items, and automatically enqueues this asset on admin pages via the admin_enqueue_scripts hook.

Changes:

New view-transitions.php file with helper functions for view transitions CSS
Virtual CSS asset registration with inline CSS in script-loader.php
Hook to auto-enqueue on admin_enqueue_scripts in default-filters.php
New CSS file with view transition rules for admin menu items

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
`src/wp-includes/view-transitions.php`	New file containing functions to enqueue and retrieve view transitions CSS for admin
`src/wp-includes/script-loader.php`	Registers the `wp-view-transitions-admin` virtual CSS asset with inline styles
`src/wp-includes/default-filters.php`	Adds hook to auto-enqueue view transitions CSS on admin pages
`src/wp-settings.php`	Includes the new view-transitions.php file during WordPress initialization
`src/wp-admin/css/view-transitions.css`	CSS rules for view transitions on admin menu items
`tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php`	Tests for view transitions functionality

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

Copilot · 2026-01-13T16:25:46Z

src/wp-includes/view-transitions.php

+function wp_get_view_transitions_admin_css(): string {
+	$affix = SCRIPT_DEBUG ? '' : '.min';
+	$path  = ABSPATH . "wp-admin/css/view-transitions{$affix}.css";
+	return file_get_contents( $path );


The file_get_contents() call lacks error handling. If the file doesn't exist or can't be read (e.g., file permissions issue), this will generate a PHP warning and return false, which could cause issues when the CSS is added inline. Consider adding error handling with is_readable() check before reading the file, similar to the pattern used in script-loader.php line 3026.

Suggested change

return file_get_contents( $path );

$contents = '';

if ( is_readable( $path ) ) {

$contents = file_get_contents( $path );

}

return is_string( $contents ) ? $contents : '';

The file will always exist. So this isn't necessary.

tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php

westonruter · 2026-01-13T18:01:20Z

Alas, E2E tests are still failing after 8ff0383:

> WordPress@7.0.0 test:e2e
> wp-scripts test-playwright --config tests/e2e/playwright.config.js

Notice: Could not find @wordpress/env package. Using WP_BASE_URL environment variable or else the default http://localhost:8889 URL for tests.

Failed to load resource: the server responded with a status of 503 (Service Unavailable)
Running 25 tests using 1 worker
··········×±··×±····××F·····××F

  1) [chromium] › tests/e2e/specs/install.test.js:34:6 › WordPress installation process › should install WordPress with pre-existing database credentials 

    Error: expect(locator).toBeVisible() failed

    Locator: getByRole('heading', { name: 'Welcome to WordPress', level: 2 })
    Expected: visible
    Timeout: 5000ms
    Error: element(s) not found

    Call log:
      - Expect "toBeVisible" with timeout 5000ms
      - waiting for getByRole('heading', { name: 'Welcome to WordPress', level: 2 })


      81 | 		await expect(
      82 | 			page.getByRole( 'heading', { name: 'Welcome to WordPress', level: 2 })
    > 83 | 		).toBeVisible();
         | 		  ^
      84 | 	} );
      85 | } );
      86 |
        at /home/runner/work/wordpress-develop/wordpress-develop/tests/e2e/specs/install.test.js:83:5

    attachment #1: screenshot (image/png) ──────────────────────────────────────────────────────────
    artifacts/test-results/install-WordPress-installa-08866-isting-database-credentials-chromium/test-failed-1.png
    ────────────────────────────────────────────────────────────────────────────────────────────────

    attachment #2: trace (application/zip) ─────────────────────────────────────────────────────────
    artifacts/test-results/install-WordPress-installa-08866-isting-database-credentials-chromium/trace.zip
    Usage:

        npx playwright show-trace artifacts/test-results/install-WordPress-installa-08866-isting-database-credentials-chromium/trace.zip

I'll revert the debug commit.

This reverts commit 8ff0383.

westonruter · 2026-01-13T18:46:47Z

Looks like 8bd1633 fixed the E2E test! The issue was the lack of checking whether the init action was done as is the pattern other dependencies that add inline data. I'm not entirely sure why that is needed for all of those cases, but it fixes the problem.

westonruter

@felixarntz This looks good!

Copilot

Pull request overview

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

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

Copilot · 2026-01-13T18:55:28Z

tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php

+	public function test_inline_css_included() {
+		$after_data = wp_styles()->get_data( 'wp-view-transitions-admin', 'after' );
+		$this->assertIsArray( $after_data, 'Expected `after` data to be an array.' );
+		$css = wp_get_view_transitions_admin_css();
+		$this->assertStringContainsString( '@view-transition', $css );
+		$this->assertContains( $css, $after_data );


The test doesn't verify that the function handles missing CSS files gracefully. If the file doesn't exist (e.g., minified version), wp_get_view_transitions_admin_css() will throw a fatal error. Add a test case to verify error handling when the CSS file is not found.

It will always exist. This isn't necessary.

westonruter · 2026-01-13T21:46:14Z

As a companion to this core commit, a PR to disable the functionality in the plugin when it is present in core: WordPress/performance#2344

mukeshpanchal27

Go for it 🚀

Add view transitions in WP Admin.

017ad4d

felixarntz requested review from mukeshpanchal27 and westonruter January 8, 2026 19:44

westonruter reviewed Jan 8, 2026

View reviewed changes

felixarntz added 2 commits January 10, 2026 12:34

Use CSS file.

291cba6

Merge branch 'trunk' into add/64470-view-transitions-admin

8fe35f3

mukeshpanchal27 reviewed Jan 11, 2026

View reviewed changes

westonruter reviewed Jan 13, 2026

View reviewed changes

src/wp-includes/view-transitions.php Show resolved Hide resolved

Merge branch 'trunk' into add/64470-view-transitions-admin

1a3bf36

westonruter requested a review from Copilot January 13, 2026 16:20

Copilot started reviewing on behalf of westonruter January 13, 2026 16:21 View session

Copilot AI reviewed Jan 13, 2026

View reviewed changes

Debug: Try serving unminified CSS during SCRIPT_DEBUG

8ff0383

westonruter added 4 commits January 13, 2026 10:01

Revert "Debug: Try serving unminified CSS during SCRIPT_DEBUG"

ee75b33

This reverts commit 8ff0383.

Add init action check prior to adding inline style

8bd1633

Add assertion for wp_get_view_transitions_admin_css()

d2b3437

Add class typed property, courtesy of PHP 7.4

53f9405

westonruter approved these changes Jan 13, 2026

View reviewed changes

westonruter requested a review from Copilot January 13, 2026 18:52

Copilot started reviewing on behalf of westonruter January 13, 2026 18:52 View session

Copilot AI reviewed Jan 13, 2026

View reviewed changes

westonruter mentioned this pull request Jan 13, 2026

Omit admin View Transitions functionality when present in core WordPress/performance#2344

Open

mukeshpanchal27 approved these changes Jan 14, 2026

View reviewed changes

		$path = ABSPATH . "wp-admin/css/view-transitions{$affix}.css";
		return file_get_contents( $path );

-	return file_get_contents( $path );
+	$contents = '';
+	if ( is_readable( $path ) ) {
+		$contents = file_get_contents( $path );
+	}
+	return is_string( $contents ) ? $contents : '';

Add view transitions in WP Admin #10699

Are you sure you want to change the base?

Add view transitions in WP Admin #10699

Conversation

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

github-actions bot commented Jan 8, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

felixarntz commented Jan 10, 2026

Uh oh!

westonruter commented Jan 10, 2026

Uh oh!

westonruter commented Jan 10, 2026

Uh oh!

mukeshpanchal27 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

westonruter commented Jan 13, 2026

Uh oh!

westonruter commented Jan 13, 2026

Uh oh!

westonruter left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 13, 2026

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

westonruter commented Jan 13, 2026

Uh oh!

mukeshpanchal27 left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

felixarntz commented Jan 8, 2026 •

edited

Loading

github-actions bot commented Jan 8, 2026 •

edited

Loading