Commit 04bca4ebca for wordpress.org
commit 04bca4ebca55ac069550dbb3bc967b6df3911145
Author: Felix Arntz <felix-arntz@leaves-and-love.net>
Date: Fri Jan 16 02:49:48 2026 +0000
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.
Built from https://develop.svn.wordpress.org/trunk@61491
git-svn-id: http://core.svn.wordpress.org/trunk@60802 1a063a9b-81f0-0310-95a4-ce76da25c4cd
diff --git a/wp-admin/css/view-transitions.css b/wp-admin/css/view-transitions.css
new file mode 100644
index 0000000000..bfb5567694
--- /dev/null
+++ b/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);
+}
diff --git a/wp-admin/css/view-transitions.min.css b/wp-admin/css/view-transitions.min.css
new file mode 100644
index 0000000000..15470db3c8
--- /dev/null
+++ b/wp-admin/css/view-transitions.min.css
@@ -0,0 +1,2 @@
+/*! This file is auto-generated */
+@view-transition{navigation:auto}#adminmenu>.menu-top{view-transition-name:attr(id type(<custom-ident>),none)}
\ No newline at end of file
diff --git a/wp-includes/css/dist/index.php b/wp-includes/css/dist/index.php
index f0147210d5..d3fc352103 100644
--- a/wp-includes/css/dist/index.php
+++ b/wp-includes/css/dist/index.php
@@ -12,14 +12,19 @@ return array(
'path' => 'preferences/style',
'dependencies' => array('wp-components'),
),
+ array(
+ 'handle' => 'wp-nux',
+ 'path' => 'nux/style',
+ 'dependencies' => array('wp-components'),
+ ),
array(
'handle' => 'wp-list-reusable-blocks',
'path' => 'list-reusable-blocks/style',
'dependencies' => array('wp-components'),
),
array(
- 'handle' => 'wp-nux',
- 'path' => 'nux/style',
+ 'handle' => 'wp-commands',
+ 'path' => 'commands/style',
'dependencies' => array('wp-components'),
),
array(
@@ -27,20 +32,15 @@ return array(
'path' => 'reusable-blocks/style',
'dependencies' => array('wp-block-editor', 'wp-components'),
),
- array(
- 'handle' => 'wp-patterns',
- 'path' => 'patterns/style',
- 'dependencies' => array('wp-block-editor', 'wp-components'),
- ),
array(
'handle' => 'wp-widgets',
'path' => 'widgets/style',
'dependencies' => array('wp-block-editor', 'wp-components'),
),
array(
- 'handle' => 'wp-commands',
- 'path' => 'commands/style',
- 'dependencies' => array('wp-components'),
+ 'handle' => 'wp-patterns',
+ 'path' => 'patterns/style',
+ 'dependencies' => array('wp-block-editor', 'wp-components'),
),
array(
'handle' => 'wp-components',
@@ -52,6 +52,11 @@ return array(
'path' => 'format-library/style',
'dependencies' => array('wp-block-editor', 'wp-components'),
),
+ array(
+ 'handle' => 'wp-media-utils',
+ 'path' => 'media-utils/style',
+ 'dependencies' => array('wp-components'),
+ ),
array(
'handle' => 'wp-block-directory',
'path' => 'block-directory/style',
@@ -62,11 +67,6 @@ return array(
'path' => 'customize-widgets/style',
'dependencies' => array('wp-block-editor', 'wp-block-library', 'wp-components', 'wp-media-utils', 'wp-preferences', 'wp-widgets'),
),
- array(
- 'handle' => 'wp-media-utils',
- 'path' => 'media-utils/style',
- 'dependencies' => array('wp-components'),
- ),
array(
'handle' => 'wp-edit-post',
'path' => 'edit-post/style',
diff --git a/wp-includes/default-filters.php b/wp-includes/default-filters.php
index db3748c526..de0b374ef4 100644
--- a/wp-includes/default-filters.php
+++ b/wp-includes/default-filters.php
@@ -599,6 +599,7 @@ add_action( 'wp_enqueue_scripts', 'wp_enqueue_classic_theme_styles' );
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/wp-includes/js/dist/script-modules/index.php b/wp-includes/js/dist/script-modules/index.php
index d82cd4a4c4..f9741a1cf8 100644
--- a/wp-includes/js/dist/script-modules/index.php
+++ b/wp-includes/js/dist/script-modules/index.php
@@ -7,6 +7,16 @@
*/
return array(
+ array(
+ 'id' => '@wordpress/core-abilities',
+ 'path' => 'core-abilities/index',
+ 'asset' => 'core-abilities/index.min.asset.php',
+ ),
+ array(
+ 'id' => '@wordpress/a11y',
+ 'path' => 'a11y/index',
+ 'asset' => 'a11y/index.min.asset.php',
+ ),
array(
'id' => '@wordpress/interactivity-router',
'path' => 'interactivity-router/index',
@@ -17,16 +27,16 @@ return array(
'path' => 'interactivity-router/full-page',
'asset' => 'interactivity-router/full-page.min.asset.php',
),
+ array(
+ 'id' => '@wordpress/abilities',
+ 'path' => 'abilities/index',
+ 'asset' => 'abilities/index.min.asset.php',
+ ),
array(
'id' => '@wordpress/interactivity',
'path' => 'interactivity/index',
'asset' => 'interactivity/index.min.asset.php',
),
- array(
- 'id' => '@wordpress/a11y',
- 'path' => 'a11y/index',
- 'asset' => 'a11y/index.min.asset.php',
- ),
array(
'id' => '@wordpress/latex-to-mathml',
'path' => 'latex-to-mathml/index',
@@ -37,16 +47,6 @@ return array(
'path' => 'latex-to-mathml/loader',
'asset' => 'latex-to-mathml/loader.min.asset.php',
),
- array(
- 'id' => '@wordpress/core-abilities',
- 'path' => 'core-abilities/index',
- 'asset' => 'core-abilities/index.min.asset.php',
- ),
- array(
- 'id' => '@wordpress/abilities',
- 'path' => 'abilities/index',
- 'asset' => 'abilities/index.min.asset.php',
- ),
array(
'id' => '@wordpress/edit-site-init',
'path' => 'edit-site-init/index',
diff --git a/wp-includes/script-loader.php b/wp-includes/script-loader.php
index 388940e33e..82a306d5fd 100644
--- a/wp-includes/script-loader.php
+++ b/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(),
diff --git a/wp-includes/version.php b/wp-includes/version.php
index 920bb06dfa..bb26de23b8 100644
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
-$wp_version = '7.0-alpha-61490';
+$wp_version = '7.0-alpha-61491';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
diff --git a/wp-includes/view-transitions.php b/wp-includes/view-transitions.php
new file mode 100644
index 0000000000..2d2ad61e0b
--- /dev/null
+++ b/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 );
+}
diff --git a/wp-settings.php b/wp-settings.php
index adaa0b161c..653160f678 100644
--- a/wp-settings.php
+++ b/wp-settings.php
@@ -429,6 +429,7 @@ require ABSPATH . WPINC . '/class-wp-plugin-dependencies.php';
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' ) );