Make WordPress Core

Opened 7 months ago

Last modified 3 weeks ago

#60943 new defect (bug)

Ensure Consistency in Notice Widths on Plugins Page for Improved UI Cohesion

Reported by: ankit-k-gupta's profile Ankit K Gupta Owned by:
Milestone: 6.8 Priority: normal
Severity: normal Version: 6.5
Component: Plugins Keywords: has-testing-info has-patch
Focuses: ui, administration Cc:

Description

This reported ticket is not a bug but rather an enhancement for a UI cosmetic change to ensure consistency across all notices on the Plugins page.

Currently, most notices displayed on the WordPress dashboard have a full-width layout. However, the recently added notice for plugin requirement information has a narrower width compared to the Plugin update notice.

When both types of notices are displayed on the same screen, as shown in the screenshot provided, there is a noticeable difference in appearance like a huge blank space below the plugin name.

Increasing the width of the newly added notice to match the full width of other notices would result in a more visually cohesive layout.

Steps to Reproduce:

  1. Navigate to the Plugins page of the WordPress dashboard.
  2. Observe the layout of plugin update notices and plugin requirement notices.
  3. Compare the widths of these notices and note the difference in appearance.

Attached screenshot for reference.

Screenshots:

Current Behavior::

https://i.imgur.com/2aJxwYb.jpg

Expected Behavior:

https://i.imgur.com/vLDLQ5F.jpg

Other Notices for Reference:

Header Notice:

https://i.imgur.com/ksVCv5L.jpg

https://i.imgur.com/FfVtN3p.jpg

Happy to discuss if this is intentional design

Attachments (1)

Screenshot 2024-10-18 at 11.40.27 AM.png (46.1 KB) - added by peterwilsoncc 3 weeks ago.

Download all attachments as: .zip

Change History (20)

#1 @SergeyBiryukov
7 months ago

  • Milestone changed from Awaiting Review to 6.6

#2 @Ankit K Gupta
7 months ago

  • Keywords needs-patch has-testing-info added

#3 @mukesh27
7 months ago

  • Keywords 2nd-opinion removed

This ticket was mentioned in PR #6440 on WordPress/wordpress-develop by @khokansardar.


7 months ago
#4

  • Keywords has-patch added; needs-patch removed

Fix plugin dependencies error notice width issues on plugin page.

Trac ticket: #60943

#5 @khokansardar
7 months ago

  • Keywords dev-feedback needs-testing added

#6 @Hitendra Chopda
6 months ago

Test report

I have tested the issue.

Environment

OS: macOS Sonoma 14.4
Web Server: Nginx
PHP: 8.0
WordPress: 6.5.2
Browser: Safari 7.4 (macOS), Chrome Version 123.0.6312.106
Theme: StoreFront - 4.5.5

Screenshot: https://prnt.sc/DWUpjOBbOb9S

Actual Result:

Both warnings and errors should be in one line.

Thank you.

Last edited 6 months ago by Hitendra Chopda (previous) (diff)

#8 follow-up: @khokansardar
6 months ago

@hitendra-chopda have you tested with the patch?

#9 in reply to: ↑ 8 ; follow-up: @Hitendra Chopda
6 months ago

Replying to khokansardar:

@hitendra-chopda have you tested with the patch?

@khokansardar No, I have tested without patch in latest WordPress version.

Last edited 6 months ago by Hitendra Chopda (previous) (diff)

#10 in reply to: ↑ 9 @khokansardar
6 months ago

With this PR https://github.com/WordPress/wordpress-develop/pull/6440, it should resolve the issue.
Replying to Hitendra Chopda:

Replying to khokansardar:

@hitendra-chopda have you tested with the patch?

@khokansardar No, I have tested without patch in latest WordPress version.

#11 @Hitendra Chopda
6 months ago

Test report

I have tested the https://github.com/WordPress/wordpress-develop/pull/6440 PR request.

Environment

OS: macOS Sonoma 14.4
Web Server: Nginx
Platform: playground
PHP: 8.3
WordPress: 6.5
Browser: Safari 7.4 (macOS), Chrome Version 123.0.6312.106
Theme: Twenty Twenty-Four Version: 1.1

Actual Result:

It is working as expected.

https://share.cleanshot.com/14lj4KqKkt56XnVPVjTY

Thank you.

#12 @sumitbagthariya16
6 months ago

  • Keywords needs-testing removed

Test report


I have tested the with the patch https://github.com/WordPress/wordpress-develop/pull/6440 PR request.

Testing Environment

WordPress: 6.5.2
PHP: 8.0.30
Web Server: Nginx 1.20.2
Browser: Chrome
OS: macOS Ventura 13.3

Test Result:
Now the Consistency in Notice Widths on Plugin is the same for all the plugins.

Screenshot:

Before Patch
https://prnt.sc/9448bYtsNp16

After Patch
https://prnt.sc/bqr_2gH1S5U5

Thank you.

#13 @khokansardar
5 months ago

  • Keywords dev-feedback removed

This ticket was mentioned in Slack in #core by oglekler. View the logs.


5 months ago

#15 @hellofromTonya
5 months ago

  • Keywords needs-design-feedback added
  • Milestone changed from 6.6 to 6.7

The notice placements were likely by design during the Plugins Dependency feature's design phase. Pinging some of the feature's contributors for their input and to join the discussion @costdev @afragen @karmatosed.

Thinking this needs more discussion and the patch needs review (such as not using a closure / anonymous function for as the hooked callback).

With the last scheduled 6.6 beta next Tuesday, moving this to 6.7 to give it more time for discussion and design / UX consideration. If consensus on changing it, then more time for patch review and testing.

If however, there is consensus and the patch can be tested and reviewed before next Tuesday's beta, then please move it back into 6.6 milestone.

#16 @afragen
5 months ago

Firstly, the expected behavior is how it currently displays. This was done very intentionally with design feedback. The notice/warning is very explicitly tied to the Requires data displayed directly above in the plugin row. A similar message for Required by is located in the same place but not styled similarly.

Admin notices are fundamentally different from plugin notices and simply because data may or may not be styled as a notice doesn't necessarily make it an actual notice. Plugin update notices occur in the after_plugin_row_{$file} hook and are not present except when an update exists. The message regarding plugin and plugin dependency interaction is present all the time. Placing it full width could potentially be more visually disturbing, my opinion.

If we want to go down the path of making every type of notice, no matter how it may be displayed, full width, then I believe a much broader discussion is needed. Currently all we have is opinion. We also don't know how this might change with the wp-admin redesign.

#17 @helen
7 weeks ago

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

IMO the error (red) banner should remain in the column it's in but at the top, because you want a warning right at the top and alongside the name of the plugin.

This ticket was mentioned in PR #7444 on WordPress/wordpress-develop by @coquardcyr.


6 weeks ago
#18

  • Keywords has-patch added; needs-patch removed

This change is here to move the message for unmet dependencies upward above the description.

Trac ticket: https://core.trac.wordpress.org/ticket/60943

#19 @peterwilsoncc
3 weeks ago

  • Milestone changed from 6.7 to 6.8

I've tested the linked pull request and while it moves the warning per @helen's suggestion, there's a little bit of alignment work that needs to be done prior to commit. See Screenshot 2024-10-18 at 11.40.27 AM.png

As WordPress 6.7 is moving to the RC phase in a few days, I've moved this on to the 6.8 milestone for wrapping up

Note: See TracTickets for help on using tickets.