Make WordPress Core

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)

#1 @westonruter
3 weeks ago

  • Keywords reporter-feedback added
  • Type feature requestdefect (bug)

@rogierlegit What plugins are adding these notifications?

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 .wrap by admin-header.php's admin_notices action hook.
  • Preserves notices already positioned within .wrap or specific sub-containers, preventing redundant DOM repositioning and mitigating layout shift.

Fixes #65877.

#3 @sadmansakibnadvi
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.

#5 @westonruter
3 weeks ago

Is this not a duplicate of #45186?

Note: See TracTickets for help on using tickets.