Opened 4 weeks ago
Last modified 3 weeks ago
#65877 new defect (bug)
Limit page jumping on blog and post overview pages
| Reported by: | rogierlegit | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | Awaiting Review |
| Component: | Administration | Version: | |
| Severity: | normal | Keywords: | reporter-feedback has-patch |
| Cc: | Focuses: | ui, administration |
Description
Recently I've had problems with plugins popping notifications at the top of the edit.php and edit.php?post_type=page
At the moment I wanted to open a post or page the page jumped down to show a notification which caused me to click the trash instead. Which is kind of unwanted and stressful on live sites.
Maybe these notifications can be limited to not show on these pages, or some default space could be reserved so the page doesn't jump?
Change History (5)
This ticket was mentioned in PR #13218 on WordPress/wordpress-develop by @wprashed.
3 weeks ago
#2
- Keywords has-patch added
## Trac Ticket
https://core.trac.wordpress.org/ticket/65877
See also https://core.trac.wordpress.org/ticket/45186
## Description
In src/js/_enqueues/admin/common.js, notice relocation after .wp-header-end previously used an un-scoped selector:
.not('.inline, .below-h2').insertAfter();
This matched and moved every notice found anywhere in the DOM—including contextual notices rendered inside .wrap, list tables, metaboxes, or forms—ripping them out of their authored positions and re-inserting them under .wp-header-end. On pages like edit.php, this resulted in unnecessary DOM mutation, reverse ordering, and sudden layout shifts (page jumping) as the user interacts with the post list.
### The Fix
Scopes the selector to only move notices that are direct children of #wpbody-content:
.not('.inline, .below-h2') .insertAfter();
- Only moves top-level notices that were rendered before
.wrapbyadmin-header.php'sadmin_noticesaction hook. - Preserves notices already positioned within
.wrapor specific sub-containers, preventing redundant DOM repositioning and mitigating layout shift.
Fixes #65877.
#3
@
3 weeks ago
Test Report
Patch tested: https://github.com/WordPress/wordpress-develop/pull/13218
Environment:
- WordPress: 7.2-alpha-63334 (nightly, unpatched baseline) and the PR build of trunk, 7.2-alpha-20260821.094119
- Browser: Chrome 151, macOS
- Theme: default
- Plugins: one small test plugin, code below
Method: the test plugin registers a settings page containing a notice nested inside a bordered panel (#nst-nested inside #nst-panel), plus a normal top-level notice printed via admin_notices (#nst-top). Same plugin on both builds, then checked where each notice ends up after the page loads.
Unpatched: both notices get relocated under the page heading. The nested notice is pulled out of its panel, which is the behaviour this ticket describes. document.getElementById('nst-nested').closest('#nst-panel') returns null.
Patched: the nested notice stays inside its panel (closest('#nst-panel') returns the panel element) and the top-level notice still relocates under the heading, sitting inside div.wrap exactly as on the unpatched build. So standard admin notices are unaffected and only nested ones change behaviour.
Result: works as described. No regression found on top-level notices.
Test plugin used, for anyone who wants to reproduce:
<?php
/**
* Plugin Name: Notice Scope Test
*/
add_action( 'admin_menu', function () {
add_options_page( 'Notice Scope Test', 'Notice Scope Test', 'manage_options', 'notice-scope-test', function () {
echo '<div class="wrap">';
echo '<h1>Notice Scope Test</h1>';
echo '<div id="nst-panel" style="border:2px solid #999; padding:20px; margin-top:60px;">';
echo '<h2>Fake settings panel</h2>';
echo '<div class="notice notice-warning" id="nst-nested"><p>NESTED notice.</p></div>';
echo '<p>Panel content.</p>';
echo '</div></div>';
} );
} );
add_action( 'admin_notices', function () {
$screen = function_exists( 'get_current_screen' ) ? get_current_screen() : null;
if ( $screen && 'settings_page_notice-scope-test' === $screen->id ) {
echo '<div class="notice notice-success" id="nst-top"><p>TOP-LEVEL notice.</p></div>';
}
} );
@sadmansakibnadvi commented on PR #13218:
3 weeks ago
#4
Tested this on the Playground build for the PR with a small test plugin (a notice nested inside a settings panel plus a normal admin_notices notice) and posted a full test report including the plugin code on the ticket. Short version: the nested notice now keeps its position inside the panel, and top-level admin notices still relocate under the page heading exactly as before.
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
@rogierlegit What plugins are adding these notifications?