From 76cf11f728a5ffc68b4ebc26adb8869c84330d96 Mon Sep 17 00:00:00 2001 From: Abhishek Kumar Date: Mon, 12 Oct 2026 07:21:25 +0000 Subject: [PATCH] Administration: Remove the admin menu auto-fold and show the responsive menu below 961px. The admin menu no longer collapses automatically to the icon-only state between 783px and 960px. Instead, the responsive admin menu, opened from the toolbar menu toggle, is now used at 960px and below. Folding the menu remains available as a user choice through the collapse button and the `mfold` user setting. The `auto-fold` body class is kept and is now always added, as it scopes the responsive admin menu styles and is used by plugins and the block editor. The `unfold` user setting is no longer read or written. Only the admin menu breakpoint moves. The toolbar height, content padding and metabox sortables keep their existing 782px breakpoint. See #66018. --- src/js/_enqueues/admin/common.js | 41 ++++++------------ src/wp-admin/admin-header.php | 9 ++-- src/wp-admin/css/admin-menu.css | 74 ++++++++++++++------------------ 3 files changed, 53 insertions(+), 71 deletions(-) diff --git a/src/js/_enqueues/admin/common.js b/src/js/_enqueues/admin/common.js index 757df6b28b513..04a06e3fe4296 100644 --- a/src/js/_enqueues/admin/common.js +++ b/src/js/_enqueues/admin/common.js @@ -874,32 +874,17 @@ $( function() { * @return {void} */ $( '#collapse-button' ).on( 'click.collapse-menu', function() { - var viewportWidth = getViewportWidth() || 961; - // Reset any compensation for submenus near the bottom of the screen. $('#adminmenu div.wp-submenu').css('margin-top', ''); - if ( viewportWidth <= 960 ) { - if ( $body.hasClass('auto-fold') ) { - $body.removeClass('auto-fold').removeClass('folded'); - setUserSetting('unfold', 1); - setUserSetting('mfold', 'o'); - menuState = 'open'; - } else { - $body.addClass('auto-fold'); - setUserSetting('unfold', 0); - menuState = 'folded'; - } + if ( $body.hasClass('folded') ) { + $body.removeClass('folded'); + setUserSetting('mfold', 'o'); + menuState = 'open'; } else { - if ( $body.hasClass('folded') ) { - $body.removeClass('folded'); - setUserSetting('mfold', 'o'); - menuState = 'open'; - } else { - $body.addClass('folded'); - setUserSetting('mfold', 'f'); - menuState = 'folded'; - } + $body.addClass('folded'); + setUserSetting('mfold', 'f'); + menuState = 'folded'; } $document.trigger( 'wp-collapse-menu', { state: menuState } ); @@ -1886,9 +1871,11 @@ $( function() { * Changes properties of body and admin menu. * * Pins and unpins the menu and adds the auto-fold class to the body. - * Makes the admin menu responsive and disables the metabox sortables. + * Makes the admin menu responsive and disables the metabox sortables + * when the viewport is narrow enough. * * @since 3.8.0 + * @since 7.2.0 Metabox sortables are only disabled at 782px and below. * * @return {void} */ @@ -1900,7 +1887,7 @@ $( function() { } $adminmenu.data( 'wp-responsive', 1 ); - this.disableSortables(); + this.maybeDisableSortables(); }, /** @@ -1963,7 +1950,7 @@ $( function() { return; } - if ( viewportWidth <= 782 ) { + if ( viewportWidth <= 960 ) { if ( ! wpResponsiveActive ) { $document.trigger( 'wp-responsive-activate' ); wpResponsiveActive = true; @@ -2099,9 +2086,9 @@ $( function() { function setMenuState() { var viewportWidth = getViewportWidth() || 961; - if ( viewportWidth <= 782 ) { + if ( viewportWidth <= 960 ) { menuState = 'responsive'; - } else if ( $body.hasClass( 'folded' ) || ( $body.hasClass( 'auto-fold' ) && viewportWidth <= 960 && viewportWidth > 782 ) ) { + } else if ( $body.hasClass( 'folded' ) ) { menuState = 'folded'; } else { menuState = 'open'; diff --git a/src/wp-admin/admin-header.php b/src/wp-admin/admin-header.php index 055d801533701..4776d77a5d6a5 100644 --- a/src/wp-admin/admin-header.php +++ b/src/wp-admin/admin-header.php @@ -202,9 +202,12 @@ function addLoadEvent( func ) { $admin_body_class .= ' folded'; } -if ( ! get_user_setting( 'unfold' ) ) { - $admin_body_class .= ' auto-fold'; -} +/* + * The admin menu no longer folds automatically. The `auto-fold` class is kept + * because it scopes the responsive admin menu styles and is relied on by + * plugins and the block editor. + */ +$admin_body_class .= ' auto-fold'; if ( is_admin_bar_showing() ) { $admin_body_class .= ' admin-bar'; diff --git a/src/wp-admin/css/admin-menu.css b/src/wp-admin/css/admin-menu.css index 7889a3e76008c..a8e494a46b1c2 100644 --- a/src/wp-admin/css/admin-menu.css +++ b/src/wp-admin/css/admin-menu.css @@ -535,18 +535,16 @@ li#wp-admin-bar-menu-toggle { display: none; } -/* Auto-folding of the admin menu */ +/* + * Responsive admin menu. + * + * The `auto-fold` body class is always present and is used here to scope the + * responsive menu styles. Below 961px the admin menu is hidden behind the + * toolbar menu toggle instead of being automatically folded. + */ @media only screen and (max-width: 960px) { - .auto-fold #wpcontent, - .auto-fold #wpfooter { - margin-left: 36px; - } - - .auto-fold #adminmenuback, - .auto-fold #adminmenuwrap, - .auto-fold #adminmenu, - .auto-fold #adminmenu li.menu-top { - width: 36px; + #collapse-menu { + display: none; } .auto-fold #adminmenu .wp-submenu.sub-open, @@ -636,27 +634,10 @@ li#wp-admin-bar-menu-toggle { z-index: 10000; } - .auto-fold #collapse-menu .collapse-button-label { - display: none; - } - - /* rtl:ignore */ - .auto-fold #collapse-button .collapse-button-icon::after { - transform: rotate(180deg); - } - - .rtl.auto-fold #collapse-button .collapse-button-icon::after { - transform: none; - } - -} - -@media screen and (max-width: 782px) { .auto-fold #wpcontent, .auto-fold #wpfooter { position: relative; margin-left: 0; - padding-left: 10px; } .sticky-menu #adminmenuwrap { @@ -772,6 +753,30 @@ li#wp-admin-bar-menu-toggle { } /* Toolbar menu toggle */ + li#wp-admin-bar-menu-toggle { + display: block; + } + + #wpadminbar #wp-admin-bar-menu-toggle .ab-icon::before { + content: "\f228"; + } + + .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { + background: #2c3338; + } + + .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon::before { + color: #72aee6; + } +} + +@media screen and (max-width: 782px) { + .auto-fold #wpcontent, + .auto-fold #wpfooter { + padding-left: 10px; + } + + /* Toolbar menu toggle, sized for the taller touch toolbar. */ #wp-responsive-toggle { position: fixed; top: 5px; @@ -794,20 +799,11 @@ li#wp-admin-bar-menu-toggle { margin-left: -1px; } - .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle a { - background: #2c3338; - } - - li#wp-admin-bar-menu-toggle { - display: block; - } - #wpadminbar #wp-admin-bar-menu-toggle a:hover { border: 1px solid transparent; } #wpadminbar #wp-admin-bar-menu-toggle .ab-icon::before { - content: "\f228"; display: inline-block; float: left; font: 400 40px/45px dashicons; @@ -824,10 +820,6 @@ li#wp-admin-bar-menu-toggle { text-decoration: none; box-sizing: border-box; } - - .wp-responsive-open #wpadminbar #wp-admin-bar-menu-toggle .ab-icon::before { - color: #72aee6; - } } /* Smartphone */