[wp-trac] [WordPress Trac] #44070: Avoid flickering of admin notices

[WordPress Trac]

#44070: Avoid flickering of admin notices
----------------------------+-----------------------------
 Reporter:  birgire         |      Owner:  (none)
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  General         |    Version:
 Severity:  normal          |   Keywords:  has-screenshots
  Focuses:  administration  |
----------------------------+-----------------------------
 Here's an example:

 - Save settings on the ''General Settings'' page ({{{wp-admin/options-
 general.php}}})
 - Then the "Saved settings" admin notice displays first above the page
 header.
 - Then it moves below it, causing flickering.

 The admin notices are moved with Javascript in {{{wp-admin/js/common.js}}}

 {{{
 /*
  * The `.below-h2` class is here just for backward compatibility with
 plugins
  * that are (incorrectly) using it. Do not use. Use `.inline` instead. See
 #34570.
  * If '.wp-header-end' is found, append the notices after it otherwise
  * after the first h1 or h2 heading found within the main content.
  */
  if ( ! $headerEnd.length ) {
      $headerEnd = $( '.wrap h1, .wrap h2' ).first();
  }
  $( 'div.updated, div.error, div.notice' ).not( '.inline, .below-h2'
 ).insertAfter( $headerEnd );

 }}}

 See ticket #35047 and changeset [36134]. Also ticket #34570 and changeset
 [35516].


 The same happens for notices on the other admin ''Settings'' screens,
 like:

 - {{{wp-admin/options-writing.php}}}
 - {{{wp-admin/options-reading.php}}}
 - {{{wp-admin/options-discussion.php}}}
 - {{{wp-admin/options-permalink.php}}}
 - {{{wp-admin/profile.php}}}
 - {{{wp-admin/user-edit.php?user_id=123}}}
 - ... etc ...

 We should avoid this flickering, e.g. hide it with CSS and display it with
 Javascript?

 I guess we should also consider the case if Javascript is turned off?

 Related #43978 [https://core.trac.wordpress.org/ticket/43978 Avoid
 flickering on the Tools / Export page]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/44070>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform