[wp-trac] [WordPress Trac] #45186: Admin notice jumps from above the H1 to below it when created.

[WordPress Trac]

#45186: Admin notice jumps from above the H1 to below it when created.
----------------------------+---------------------------------
 Reporter:  dschalk         |       Owner:  (none)
     Type:  defect (bug)    |      Status:  new
 Priority:  normal          |   Milestone:  Awaiting Review
Component:  Administration  |     Version:  4.9.8
 Severity:  normal          |  Resolution:
 Keywords:  needs-patch     |     Focuses:  ui, administration
----------------------------+---------------------------------

Comment (by miyarakira):

 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
 <?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 include 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/45186#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform