From 017ad4dd8f5d1f99dce456c854a89f8430656d6c Mon Sep 17 00:00:00 2001 From: Felix Arntz Date: Thu, 8 Jan 2026 11:41:51 -0800 Subject: [PATCH 1/7] Add view transitions in WP Admin. --- src/wp-includes/default-filters.php | 1 + src/wp-includes/script-loader.php | 3 + src/wp-includes/view-transitions.php | 33 ++++++++++ src/wp-settings.php | 1 + .../wpEnqueueViewTransitionsAdminCss.php | 62 +++++++++++++++++++ 5 files changed, 100 insertions(+) create mode 100644 src/wp-includes/view-transitions.php create mode 100644 tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php diff --git a/src/wp-includes/default-filters.php b/src/wp-includes/default-filters.php index db3748c5265c8..de0b374ef4b56 100644 --- a/src/wp-includes/default-filters.php +++ b/src/wp-includes/default-filters.php @@ -599,6 +599,7 @@ add_action( 'admin_enqueue_scripts', 'wp_localize_jquery_ui_datepicker', 1000 ); add_action( 'admin_enqueue_scripts', 'wp_common_block_scripts_and_styles' ); add_action( 'admin_enqueue_scripts', 'wp_enqueue_command_palette_assets' ); +add_action( 'admin_enqueue_scripts', 'wp_enqueue_view_transitions_admin_css' ); add_action( 'enqueue_block_assets', 'wp_enqueue_classic_theme_styles' ); add_action( 'enqueue_block_assets', 'wp_enqueue_registered_block_scripts_and_styles' ); add_action( 'enqueue_block_assets', 'enqueue_block_styles_assets', 30 ); diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 2d1f49ff95f0d..69767cbd3ba47 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1696,6 +1696,9 @@ function wp_default_styles( $styles ) { $wp_edit_blocks_dependencies ); + $styles->add( 'wp-view-transitions-admin', false ); + $styles->add_inline_style( 'wp-view-transitions-admin', wp_get_view_transitions_admin_css() ); + $package_styles = array( 'block-editor' => array( 'wp-components', 'wp-preferences' ), 'block-library' => array(), diff --git a/src/wp-includes/view-transitions.php b/src/wp-includes/view-transitions.php new file mode 100644 index 0000000000000..c5bb14d123f9e --- /dev/null +++ b/src/wp-includes/view-transitions.php @@ -0,0 +1,33 @@ + .menu-top { view-transition-name: attr(id type(), none); } +CSS; + + return $css; +} diff --git a/src/wp-settings.php b/src/wp-settings.php index adaa0b161c3f6..653160f6784fc 100644 --- a/src/wp-settings.php +++ b/src/wp-settings.php @@ -429,6 +429,7 @@ require ABSPATH . WPINC . '/class-wp-url-pattern-prefixer.php'; require ABSPATH . WPINC . '/class-wp-speculation-rules.php'; require ABSPATH . WPINC . '/speculative-loading.php'; +require ABSPATH . WPINC . '/view-transitions.php'; add_action( 'after_setup_theme', array( wp_script_modules(), 'add_hooks' ) ); add_action( 'after_setup_theme', array( wp_interactivity(), 'add_hooks' ) ); diff --git a/tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php b/tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php new file mode 100644 index 0000000000000..f1338046cda28 --- /dev/null +++ b/tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php @@ -0,0 +1,62 @@ +original_wp_styles = $wp_styles; + } + + public function tear_down() { + global $wp_styles; + + $wp_styles = $this->original_wp_styles; + parent::tear_down(); + } + + /** + * Tests that the hook for enqueuing admin view transitions CSS is set up. + * + * @ticket 64470 + */ + public function test_hook() { + $this->assertSame( 10, has_action( 'admin_enqueue_scripts', 'wp_enqueue_view_transitions_admin_css' ) ); + } + + /** + * Tests that the admin view transitions style handle includes the inline CSS. + * + * @ticket 64470 + */ + public function test_inline_css_included() { + $inline_css = wp_styles()->get_data( 'wp-view-transitions-admin', 'after' ); + $this->assertIsArray( $inline_css ); + $this->assertContains( wp_get_view_transitions_admin_css(), $inline_css ); + } + + /** + * Tests enqueuing admin view transitions CSS. + * + * @ticket 64470 + */ + public function test_wp_enqueue_view_transitions_admin_css() { + $this->assertFalse( wp_style_is( 'wp-view-transitions-admin' ) ); + + wp_enqueue_view_transitions_admin_css(); + $this->assertTrue( wp_style_is( 'wp-view-transitions-admin' ) ); + } +} From 291cba69145d806e670a7527edce1682450f67ec Mon Sep 17 00:00:00 2001 From: Felix Arntz Date: Sat, 10 Jan 2026 12:34:09 -0800 Subject: [PATCH 2/7] Use CSS file. --- src/wp-admin/css/view-transitions.css | 7 +++++++ src/wp-includes/view-transitions.php | 9 +++------ 2 files changed, 10 insertions(+), 6 deletions(-) create mode 100644 src/wp-admin/css/view-transitions.css diff --git a/src/wp-admin/css/view-transitions.css b/src/wp-admin/css/view-transitions.css new file mode 100644 index 0000000000000..bfb556769495b --- /dev/null +++ b/src/wp-admin/css/view-transitions.css @@ -0,0 +1,7 @@ +@view-transition { + navigation: auto; +} + +#adminmenu > .menu-top { + view-transition-name: attr(id type(), none); +} diff --git a/src/wp-includes/view-transitions.php b/src/wp-includes/view-transitions.php index c5bb14d123f9e..2d2ad61e0b431 100644 --- a/src/wp-includes/view-transitions.php +++ b/src/wp-includes/view-transitions.php @@ -24,10 +24,7 @@ function wp_enqueue_view_transitions_admin_css(): void { * @return string The CSS. */ function wp_get_view_transitions_admin_css(): string { - $css = << .menu-top { view-transition-name: attr(id type(), none); } -CSS; - - return $css; + $affix = SCRIPT_DEBUG ? '' : '.min'; + $path = ABSPATH . "wp-admin/css/view-transitions{$affix}.css"; + return file_get_contents( $path ); } From 8ff0383bb5c056ae1cace5525f3812a8b8369f6d Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Tue, 13 Jan 2026 09:10:49 -0800 Subject: [PATCH 3/7] Debug: Try serving unminified CSS during SCRIPT_DEBUG --- src/wp-includes/view-transitions.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-includes/view-transitions.php b/src/wp-includes/view-transitions.php index 2d2ad61e0b431..fc265413eaea5 100644 --- a/src/wp-includes/view-transitions.php +++ b/src/wp-includes/view-transitions.php @@ -24,7 +24,7 @@ function wp_enqueue_view_transitions_admin_css(): void { * @return string The CSS. */ function wp_get_view_transitions_admin_css(): string { - $affix = SCRIPT_DEBUG ? '' : '.min'; + $affix = ''; // TODO: Restore to `$affix = SCRIPT_DEBUG ? '' : '.min';`. $path = ABSPATH . "wp-admin/css/view-transitions{$affix}.css"; return file_get_contents( $path ); } From ee75b335b66a89452d944689c65d877119713625 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Tue, 13 Jan 2026 10:01:43 -0800 Subject: [PATCH 4/7] Revert "Debug: Try serving unminified CSS during SCRIPT_DEBUG" This reverts commit 8ff0383bb5c056ae1cace5525f3812a8b8369f6d. --- src/wp-includes/view-transitions.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-includes/view-transitions.php b/src/wp-includes/view-transitions.php index fc265413eaea5..2d2ad61e0b431 100644 --- a/src/wp-includes/view-transitions.php +++ b/src/wp-includes/view-transitions.php @@ -24,7 +24,7 @@ function wp_enqueue_view_transitions_admin_css(): void { * @return string The CSS. */ function wp_get_view_transitions_admin_css(): string { - $affix = ''; // TODO: Restore to `$affix = SCRIPT_DEBUG ? '' : '.min';`. + $affix = SCRIPT_DEBUG ? '' : '.min'; $path = ABSPATH . "wp-admin/css/view-transitions{$affix}.css"; return file_get_contents( $path ); } From 8bd163331a7aae45956c74839842b9499e88f2a4 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Tue, 13 Jan 2026 10:34:35 -0800 Subject: [PATCH 5/7] Add init action check prior to adding inline style --- src/wp-includes/script-loader.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 14533c7dc9807..ca99c8cd9274c 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1700,7 +1700,7 @@ function wp_default_styles( $styles ) { ); $styles->add( 'wp-view-transitions-admin', false ); - $styles->add_inline_style( 'wp-view-transitions-admin', wp_get_view_transitions_admin_css() ); + did_action( 'init' ) && $styles->add_inline_style( 'wp-view-transitions-admin', wp_get_view_transitions_admin_css() ); $package_styles = array( 'block-editor' => array( 'wp-components', 'wp-preferences' ), From d2b34370288695dbfd84913dc284d06087f9d14d Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Tue, 13 Jan 2026 10:44:11 -0800 Subject: [PATCH 6/7] Add assertion for wp_get_view_transitions_admin_css() --- .../wpEnqueueViewTransitionsAdminCss.php | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php b/tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php index f1338046cda28..e3c2a0b14c0cd 100644 --- a/tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php +++ b/tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php @@ -41,11 +41,15 @@ public function test_hook() { * Tests that the admin view transitions style handle includes the inline CSS. * * @ticket 64470 + * + * @covers ::wp_get_view_transitions_admin_css */ public function test_inline_css_included() { - $inline_css = wp_styles()->get_data( 'wp-view-transitions-admin', 'after' ); - $this->assertIsArray( $inline_css ); - $this->assertContains( wp_get_view_transitions_admin_css(), $inline_css ); + $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 ); } /** From 53f94055ee1d07da5b17fb4faf979db21e9fe4aa Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Tue, 13 Jan 2026 10:44:55 -0800 Subject: [PATCH 7/7] Add class typed property, courtesy of PHP 7.4 --- .../tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php b/tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php index e3c2a0b14c0cd..0e977e69606f9 100644 --- a/tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php +++ b/tests/phpunit/tests/view-transitions/wpEnqueueViewTransitionsAdminCss.php @@ -12,7 +12,7 @@ */ class Tests_View_Transitions_wpEnqueueViewTransitionsAdminCss extends WP_UnitTestCase { - private $original_wp_styles = null; + private ?WP_Styles $original_wp_styles = null; public function set_up() { global $wp_styles;