WordPress.org

Make WordPress Core

Opened 16 months ago

Closed 16 months ago

Last modified 13 months ago

#46651 closed defect (bug) (fixed)

Site Health: no room for the admin notices

Reported by: afercia Owned by: afercia
Milestone: 5.2 Priority: normal
Severity: normal Version: 5.2
Component: Site Health Keywords: has-screenshots site-health has-patch
Focuses: Cc:

Description

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:

http://cldup.com/es0xsByATl.png

This is how the "update nag" gets displayed:

http://cldup.com/C10XvekPZU.png

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:

http://cldup.com/pCNGM3LSOq.png

See #46650 and #46573

Attachments (5)

46651.diff (1.4 KB) - added by afercia 16 months ago.
46651.2.diff (1.6 KB) - added by afercia 16 months ago.
test_inline.jpg (53.3 KB) - added by xkon 16 months ago.
large-admin-notice.PNG (63.4 KB) - added by Clorith 16 months ago.
46651.3.diff (1.6 KB) - added by afercia 16 months ago.

Download all attachments as: .zip

Change History (31)

@afercia
16 months ago

#1 @afercia
16 months ago

  • Keywords has-patch needs-design-feedback added; needs-design removed

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:

http://cldup.com/dMWeGlY_2W.png

#2 @afercia
16 months ago

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
16 months ago

#3 @afercia
16 months ago

46651.2.diff adjusts the CSS for mobile.

@xkon
16 months ago

#4 @xkon
16 months ago

@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 ).

#5 @afercia
16 months ago

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:

http://cldup.com/fDr16m8wuP.png

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?

#6 @hedgefield
16 months ago

  • Keywords needs-design-feedback removed

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.

#7 @afercia
16 months ago

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.

#8 @Clorith
16 months ago

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.

#9 @afercia
16 months ago

  • Keywords needs-design-feedback added

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.

http://cldup.com/NKxLuTWTix.png

#10 @Clorith
16 months ago

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).

This ticket was mentioned in Slack in #forums by clorith. View the logs.


16 months ago

#12 @hedgefield
16 months ago

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.

#13 @Clorith
16 months ago

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

#14 @afercia
16 months ago

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.

#15 @Clorith
16 months ago

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

http://cldup.com/pCNGM3LSOq.png

#16 @mapk
16 months ago

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.

#17 @afercia
16 months ago

  • Keywords needs-refresh added

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.

#18 @afercia
16 months ago

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:

http://cldup.com/Y2nXv0OBZV.png

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


16 months ago

#20 @karmatosed
16 months ago

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.

#21 @karmatosed
16 months ago

  • Keywords has-needs-design-feedback added; needs-design-feedback removed

#22 @karmatosed
16 months ago

  • Keywords has-needs-design-feedback removed

@afercia
16 months ago

#23 @afercia
16 months ago

  • Owner set to afercia
  • Status changed from new to assigned

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

http://cldup.com/ghGQnbh_Ps.png

#24 @afercia
16 months ago

  • Keywords needs-refresh removed

#25 @afercia
16 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 45091:

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

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

#26 @spacedmonkey
13 months ago

  • Component changed from Administration to Site Health
Note: See TracTickets for help on using tickets.