Site Health: no room for the admin notices

[afercia]

The new design for the Site Health pages doesn't take into account the admin notices.

This is how a normal admin notice gets displayed:

This is how the "update nag" gets displayed:

Worth reminding:

• notices are printed out via PHP at the top of the page
• normal notices are then moved via JavaScript below an element with class .wp-header-end if any, otherwise below the first h1 or h2
• notices with a CSS class inline aren't moved

Possible option: use an <hr class="wp-header-end"> like in other admin pages. However, given the current design and CSS, this would work only if the notices are moved after the whole header, including the navigation. Example:

See #46650 and #46573

[afercia]

46651.diff​

• adds <hr class="wp-header-end"> after the header so notices are moved after the header
• removes a couple of <div class="wp-clearfix"></div> as that's not the intended usage of wp-clearfix (those divs didn't do anything anyways)
• overrides the default "update nag" margins so it's better positioned

Screenshot:

[afercia]

To quickly test an admin notice, you can add the following in your theme's functions.php:

function sample_admin_notice__info() {
	?>
	<div class="notice notice-info">
		<p><?php _e( 'My awesome info notice!', 'sample-text-domain' ); ?></p>
	</div>
	<?php
}
add_action( 'admin_notices', 'sample_admin_notice__info' );

[afercia]

46651.2.diff​ adjusts the CSS for mobile.

[xkon]

@afercia thanks for the quick updates! Maybe it was missed so just pointing out that most likely the .site-health .notice css should be added for bigger screens as well, the inline notices that stay on top of the page look similar to the update-nag on your original description ( test_inline.jpg​ ).

[afercia]

Yep I've considered that and was uncertain on what to do. However, "inline" notices are usually meant to be in the middle of a page, for example:

Not sure we should take into account inline admin notices printed out at the top of the page, that seems to me a "doing it wrong", unless I'm missing something. Are there actual cases where a notice needs to be before the main h1?

[hedgefield]

I like what you did in 46651 @afercia, and thanks for pointing this out! We didn't think about the notices.

I think it makes sense to display the notices at the top of the page, I believe that's what happens in the rest of the admin too right? They're mostly global messages that I think make sense to get to first before you start with the page content. As indeed it does get a little strange to show a global message below a local navigation item.

The styling looks good to me too, so I think we can move ahead with 46651 as the current solution. It's functional and not ugly, we can always iterate later if we end up not liking it.

[afercia]

I think it makes sense to display the notices at the top of the page, I believe that's what happens in the rest of the admin too right?

No. In 99% of the cases, admin notices are displayed after the main h1.

[Clorith]

I'm torn on this one.

On one side, I prefer moving them under the header (it looks weird if the white header suddenly gets pushed down by an inline admin notice for example), heck, I'd even be willing to say there's some admin pages where admin notices via the action should be blocked because they're overly disruptive the way many of them are implemented.

That's a different discussion though, I'm fine with moving them down under as shown in the screenshot above, I wonder if it would be beneficial here to ignore the inline class? If it's added with the admin notice hook, they're all in the same location and inline sounds like a hack to try and give it priority over other entries at that point.

[afercia]

Theoretically, it's also possible to split the header in two parts and place the notices between the heading and the navigation. Tested, can be done with a few adjustments. Not sure it would look so nice :) Your call.

[Clorith]

Tested 46651.2.diff​ with a slightly larger admin notice from a popular plugin (2+ million installs), and it takes up a large amount of screen real estate, this one does have a dismiss button at least, but two of these and the entire site content is more or less lost depending on viewport size.

I'll wait on design input, but I'm thinking there's a valid case for omitting admin notices on this particular page, given the intended purpose of said page (if plugins think their information is this crucial, they could even introduce it as a testable state via the filters).

[hedgefield]

I might agree with @Clorith. This speaks to a larger problem with admin notices being able to do whatever they want and without limit - for which we intend to design a notification center for WP, but that's besides the point. I know Gutenberg struggled with the same problem, and I think their solution was to show a single notice that said "there are notices" and then linked to the WP dashboard? We could do the same here, perhaps specifically as part of the site status page. Or maybe in a v2 group them under a collapsible section as their own thing, though again maybe that should be a WP core-wide thing.

[Clorith]

I say we should follow the Gutenberg routine for this for the initial implementation then.

[afercia]

In Gutenberg, at some point the admin notices were rendered. That was partially reverted in ​https://github.com/WordPress/gutenberg/pull/12444 and now they're visually hidden. There's a follow-up PR to completely revert the original implementation but a final decision on notices still needs to be made.

That said, I'm not sure hiding the admin notices in these Site Health pages is a good idea. Admin notices are a WordPress feature that needs to be supported. Hiding them just because the design didn't take them into consideration is not a great solution :)

I'd agree some admin notices are very intrusive and ugly to see but regardless, what are the criteria for making a decision and determine in which pages the admin notices need to be rendered and in which pages they don't? I'd tend to think this needs to be considered holistically and it's out of the scope of this ticket.

Anyways, at least the "update nag" needs to be rendered.

[Clorith]

Absolutely, I'm just throwing out various concepts for consideration, my favorites is still with them following after the tabs, separated from the header:

[mapk]

While I agree with @Clorith that the admin notices look better below the header, they tend to look like they are part of Site Health which I don't think is the intention. For this reason, I'd vote to keep them above the Site Health header completely.

I really love the concept of a WP notification center in some near future that would remove all these from the interface and allocate them to a notification dropdown or something.

[afercia]

For better accessibility and semantics, the first thing within the main content area should be a h1 heading. The h1 gives context to the main content area and it's also used for content navigation. Having a series of notices before the h1 wouldn't be ideal, for example:

• When using the "skip to main content" link or the ARIA landmarks, users would perceive as first thing one or multiple notices. Instead, they should get the main H1 so they're immediately informed about the main topic of the page.
• When using a screen reader and navigating through headings, all the notices would be "skipped".

This is a long standing issue across the admin pages where other elements are placed before the main h1. For example, the placement of the Screen Options and Help tabs isn't ideal, see ticket:21583#comment:56. It applies also to the "update nag": I do understand it needs to be visually prominent but its placement in the source order isn't ideal.

For these reasons, I wouldn't recommend to keep the notices above the header.

[afercia]

For anyone trying to reproduce this, worth noting [45071] removed the wrap CSS class used on some elements in the Site Health pages: this class is used to move the headings via JavaScript. Therefore, the current state is that the headings are not moved any longer and stay at the top of the page.

Still needs a final decision: as per the previous comment this order in the markup is not ideal for accessibility.

Current state:

[karmatosed]

For 5.2 I think the solution in https://core.trac.wordpress.org/ticket/46651#comment:15 is best with the messages being after navigation tab. I understand this isn't ideal and absolutely iteration should be something considered after release.

[afercia]

46651.3.diff​ implements latest feedback. Update nag at the top (can't be moved). Notices after the header. Screenshot:

[afercia]

In 45091:

Administration: Site Health: reserve some space for the admin notices.

Props xkon, Clorith, hedgefield, mapk, karmatosed, afercia.
Fixes #46651.