Administration: Add view transitions throughout WP Admin.

This changeset enables smooth transitions between the different admin screens. For the admin menu items, distinct view transition names are used to facilitate a simple visual slide effect when the active submenu changes between screens.

Props westonruter, mukesh27, joedolson.
Fixes #64470.


git-svn-id: https://develop.svn.wordpress.org/trunk@61491 602fd350-edb4-49c9-b593-d223f7449a82

Author: felixarntz

src/wp-admin/css/view-transitions.css

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

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 );

src/wp-includes/script-loader.php

@@ -1744,6 +1744,9 @@ function wp_default_styles( $styles ) {
 		$wp_edit_blocks_dependencies
 	);
 
+	$styles->add( 'wp-view-transitions-admin', false );
+	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' ),
 		'block-library'        => array(),

src/wp-includes/view-transitions.php

@@ -0,0 +1,30 @@
+<?php
+/**
+ * View Transitions API.
+ *
+ * @package WordPress
+ * @subpackage View Transitions
+ * @since 7.0.0
+ */
+
+/**
+ * Enqueues View Transitions CSS for the admin.
+ *
+ * @since 7.0.0
+ */
+function wp_enqueue_view_transitions_admin_css(): void {
+	wp_enqueue_style( 'wp-view-transitions-admin' );
+}
+
+/**
+ * Gets the CSS for View Transitions in the admin.
+ *
+ * @since 7.0.0
+ *
+ * @return string The CSS.
+ */
+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 );
+}

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' ) );

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

@@ -0,0 +1,66 @@
+<?php
+/**
+ * Tests for the wp_enqueue_view_transitions_admin_css() function.
+ *
+ * @package WordPress
+ * @subpackage View Transitions
+ */
+
+/**
+ * @group view-transitions
+ * @covers ::wp_enqueue_view_transitions_admin_css
+ */
+class Tests_View_Transitions_wpEnqueueViewTransitionsAdminCss extends WP_UnitTestCase {
+
+	private ?WP_Styles $original_wp_styles = null;
+
+	public function set_up() {
+		global $wp_styles;
+
+		parent::set_up();
+		$this->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
+	 *
+	 * @covers ::wp_get_view_transitions_admin_css
+	 */
+	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 );
+	}
+
+	/**
+	 * 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' ) );
+	}
+}