WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 10 months ago

#45186 new defect (bug)

Admin notice jumps from above the H1 to below it when created.

Reported by: dschalk Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.9.8
Component: Administration Keywords: needs-patch
Focuses: ui, administration Cc:

Description

Admin notices first appear above the H1 of a page, and then jump to just below it one second later. It is easy to reproduce by going to Settings->General-> Click "Save changes". You will see the "Settings Saved" notice jump from above the H1 to below it. You can see it in the gif below:
https://www.dropbox.com/s/438bwkztew9349s/admin_notice.gif
This also happens for custom notices, for example any class="notice notice-warning" will also jump.

Attachments (1)

admin_notice.gif (857.2 KB) - added by dschalk 3 years ago.
gif that shows how notification jumps

Download all attachments as: .zip

Change History (5)

@dschalk
3 years ago

gif that shows how notification jumps

#1 @swissspidy
3 years ago

Hi and welcome to WordPress Trac!

That's an interesting report, because notices are moved below the heading on purpose to make for a better and more accessible site structure. Since this happens using JavaScript, there's a short period of time where the notice is visible before the heading until the JavaScript is loaded and executed.

#2 @SergeyBiryukov
3 years ago

  • Component changed from General to Administration

#3 @dschalk
3 years ago

Hi @swissspidy, thank you for your quick response and explanation. It was my guess as well that it had something to do with the timing of elements being loaded on the page. I hope it does not mean it would be complicated to fix. I understand it is a very minor issue.

#4 @miyarakira
10 months ago

This issue still exists in WP 5.5.3. Admin notices "jump" upon page load, as they're moved from above H1 to below it.

It makes the initial impression of the admin screen feel clunky. This is classic "flash of unstyled content" (https://en.wikipedia.org/wiki/Flash_of_unstyled_content), which deserves a resolution for improved user experience.


The JavaScript that performs this move is in wp-admin/js/common.js (https://github.com/WordPress/wordpress-develop/blob/78f451030b75a5c55c6cc1a4dae5b833ce9e003e/src/js/_enqueues/admin/common.js#L1083).

There must be a historical reason why this was implemented in the first place - probably to solve the fact that the admin_notices action is performed earlier in wp-admin/admin-header.php, before any page-specific template is loaded.


To solve this properly, I believe there needs to be a new action after the H1 element, for users to opt-in to outputting the admin notices in the correct place.

That means every existing admin screen should implement the action after the title, even custom admin screens added by users. By making the new action opt-in, it should be possible to gradually transition everyone to the new convention, and eventually the existing JavaScript "hack" of moving notices after page load can be deprecated.


For example, in the admin dashboard screen wp-admin/index.php, it would be implemented here after the H1 element: https://github.com/WordPress/wordpress-develop/blob/78f451030b75a5c55c6cc1a4dae5b833ce9e003e/src/wp-admin/_index.php#L118-L120

Following the existing logic for the admin_notices action in admin-header.php, it would look like:

<?php

if ( is_network_admin() ) {
        do_action( 'network_admin_notices_after_title' );
} elseif ( is_user_admin() ) {
        do_action( 'user_admin_notices_after_title' );
} else {
        do_action( 'admin_notices_after_title' );
}

?>

Here the new action is tentatively named admin_notices_after_title.

Since every admin screen needs to opt-in to running the action, I suppose the above logic should be wrapped in a function, i.e., admin_notices_after_title().


Well, I can see why this issue has been left unsolved. It requires a long-term approach of adopting a new convention, for everyone including WP core to output admin notices in the correct place.

In my opinion the effort will be worth it for the peace of mind, to once and for all remove this UX issue which happens on every page load in the admin.

Version 1, edited 10 months ago by miyarakira (previous) (next) (diff)
Note: See TracTickets for help on using tickets.