plugin install button text is too large for display

[mehulkaklotar]

When updating or installing plugin on plugin-install.php file and some error occurs then the button text is filled with error message and that text is too large to display.

[mehulkaklotar]

it should be only update failed on button and to show error message make use of title attribute.

[SergeyBiryukov]

Seems like the title attribute should only be added in case of an error, otherwise it just duplicates the aria-label attribute and is redundant.

[mehulkaklotar]

If we are using anchor tag then it should have title attribute too. aria-label won't be able to open a tool tip for anchor tag. And if plugin has changed actions then title attribute should change accordingly to show correct tool tips.

[SergeyBiryukov]

Could you take a look?

[afercia]

While we should certainly find a proper way to display long error messages, I think using title attributes won't go in the right direction. In recent releases, WordPress has begun to actively discourage the use of title attributes, see #24766. Please also consider relying on the title attribute is currently discouraged in HTML5 ​http://www.w3.org/TR/html5/dom.html#the-title-attribute
Maybe we should display a notice inside the plugin cards to expand the "Update Failed" message displayed inside the "button", or something like that. This would need some UI and design feedback though cc @helen :)

[afercia]

Just an example to show how these error messages get displayed in other admin screen, i.e. like standard notices. Maybe we should reconsider the current implementation in the Plugin cards in the first place.

[dd32]

FWIW; The original mockups for this screen showed a "admin notice" styled paragraph at the end of the plugin card for the error message.

[helen]

"Updated Failed" + adding a notice inside the card seems like it could be a good combo, can we get a mockup/screenshot of that for ease of feedback?

[afercia]

@dd32 (hi) any chance to retrieve the original mockups?

[dd32]

@afercia Unfortunately I have no idea where what I'm thinking of was posted. #28785 doesn't appear to contain anything related to errors in the screenshots.

[afercia]

New patch, first pass. Tried a new approach, using a notice area at the bottom of the plugin card like in the original mockups (?), see screenshot below. Also, the message is now correctly dispatched to wp.a11y.speak() and uses the "assertive" live region.
We should make a decision about:

• styling: the notice style with the red left border seems a logical choice to me
• should the message be dismissible? e.g. click on X dismiss and the card footer reappears

cc @helen

[afercia]

Refreshed patch. I went ahead and styled the notice, which is also dismissible now: click on the dismiss "X" button and the notice will be removed making the plugin card footer reappear.
Uses a custom event and wraps the dismissible-notice JavaScript in a named function.

[afercia]

Patch still applies. Needs UI feedback.

[melchoyce]

Replying to afercia:

Refreshed patch. I went ahead and styled the notice, which is also dismissible now: click on the dismiss "X" button and the notice will be removed making the plugin card footer reappear.
Uses a custom event and wraps the dismissible-notice JavaScript in a named function.

This is a good approach. More consistent with the rest of the admin UI than my original mockup: ​https://cloudup.com/c8KfL55uGqo

Some notes:

1. Is the error notice using border-left for the red border? Can it use box-shadow instead so the corner doesn't indent into a triangle?
2. It looks like the close dashicon is being cut off on the top and bottom
3. Can we bold "Update Failed?"
4. Might be worth trying the notice styling from #32244.

[afercia]

@melchoyce thanks for your feedback :) In the refreshed patch, tried to address some of your points.

1. Is the error notice using border-left for the red border? Can it use box-shadow instead so the corner doesn't indent into a triangle?

It uses the default .notice-error class but I've changed the notice top border which now it's done with box-shadow so the left border corner should have "squared" angles

2. It looks like the close dashicon is being cut off on the top and bottom

Unfortunately this is because the .is-dismissible class sets the dashicon font size to 16px and as you know dashicons don't render in an optimal way when they're not set to their default font size (20px)

3. Can we bold "Update Failed?"

Sure.

4. Might be worth trying the notice styling from #32244.

Oh yes the white on white thing. Added the notice-alt class.

Also, I missed to remove the notice when clicking again on the button. The previous patch appended multiple notice below the card when clicking again the button after the first error :)

Screenshot with the refreshed patch applied:

[melchoyce]

It uses the default .notice-error class but I've changed the notice top border which now it's done with box-shadow so the left border corner should have "squared" angles

Thanks!

Unfortunately this is because the .is-dismissible class sets the dashicon font size to 16px and as you know dashicons don't render in an optimal way when they're not set to their default font size (20px)

Bummer :(

Oh yes the white on white thing. Added the notice-alt class.

Looking at it, I think the white background does work better here — the pink clashes with all the grey around it.

[afercia]

Replying to melchoyce:

Unfortunately this is because the .is-dismissible class sets the dashicon font size to 16px and as you know dashicons don't render in an optimal way when they're not set to their default font size (20px)

Bummer :(

Maybe a new dashicons-dismiss-alt with a native 16px size? As far as I see, the current one is always set to a 16px font-size except in one case, the Storage Space warning in the Network Dashboard where it's 20px:

[afercia]

Replying to melchoyce:

Looking at it, I think the white background does work better here — the pink clashes with all the grey around it.

Agreed. The refreshed patch removes the pink background.

[afercia]

How to test this patch:

• install the patch :)
• manually change one of your installed plugin version one number back, I always use the "RTL Tester" plugin, edit its main file and change 1.0.5 to 1.0.4
• to actually trigger an update error, edit wp-admin/includes/class-wp-upgrader.php and change this line

  if ( ! empty( $unwritable_files ) ) {
  

  in

  if ( empty( $unwritable_files ) ) {
  

• in the Add Plugins screen, do a search for "RTL Tester"
• since the plugin is already installed, the button in the plugin card will say "Update Now"
• press the "Update Now" button and wait for the error message to appear

[wonderboymusic]

In 35681:

Plugins: add dismissible notices to update failures.

Adds unit test.

Props afercia, mehulkaklotar.
Fixes #33465.