WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 2 months ago

Last modified 2 months ago

#53275 closed enhancement (fixed)

Wrap options on plugin page to second line

Reported by: NekoJonez Owned by: hellofromTonya
Milestone: 5.9 Priority: normal
Severity: normal Version: 5.7.2
Component: Administration Keywords: has-patch has-testing-info commit
Focuses: ui, css, administration Cc:

Description

https://ibb.co/m0HF1gs

When translated into Dutch, the amount of options in for example the All in One SEO plugin (combined with the WP Rollback plugin & Loco Translate) has all the options next to each other which is extremely long and which makes all the other columns on the plugin page way to small....

I think it would be a great idea if there is a way to wrap them or split them in a second line when there are too much. It would also make this a bit more responsive as well :)

Attachments (2)

afbeelding-2021-05-25-161711.png (38.0 KB) - added by SergeyBiryukov 6 months ago.
53275.patch (426 bytes) - added by sabernhardt 3 months ago.
setting white-space to normal for plugin action links

Download all attachments as: .zip

Change History (17)

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.


6 months ago

#2 follow-up: @sabernhardt
6 months ago

  • Focuses css added; accessibility removed
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

The plugin name's column has white-space: nowrap (on larger screens), which does not work well when there are several links under the Name.

I considered editing that rule so it only applies when the plugin is inactive, but most public sites should avoid keeping inactive plugins installed (so that idea is not a good option).

#3 in reply to: ↑ 2 @NekoJonez
6 months ago

Replying to sabernhardt:

The plugin name's column has white-space: nowrap (on larger screens), which does not work well when there are several links under the Name.

I considered editing that rule so it only applies when the plugin is inactive, but most public sites should avoid keeping inactive plugins installed (so that idea is not a good option).

Thanks for editing the tags and such mate :)

@sabernhardt
3 months ago

setting white-space to normal for plugin action links

#4 follow-up: @sabernhardt
3 months ago

  • Keywords has-patch needs-testing added; needs-patch removed
  • Milestone changed from Future Release to 5.9

This ticket was mentioned in Slack in #polyglots by nekojonez. View the logs.


3 months ago

#6 in reply to: ↑ 4 @NekoJonez
2 months ago

Replying to sabernhardt:
How can I help test this?

#7 follow-up: @sabernhardt
2 months ago

  • Keywords has-testing-info added

One procedure would be:

  1. Before applying the patch, install and activate a plugin that makes the Plugin name column too wide on the Plugins screen in some situation. (You already found All in One SEO and others that add action links.)
  2. Apply the patch to your installation.
  3. Refresh the browser (clear cache if necessary) and/or open in a private/incognito window.
  4. Verify whether the change fixes the column width in that situation.
  5. As much as you can or want: Continue testing whether the patch helps with additional browsers or devices, various viewport sizes, different columns showing (adjust screen options), different languages, etc.

I would do well to document my testing here, too :)

#8 in reply to: ↑ 7 @NekoJonez
2 months ago

Replying to sabernhardt:

One procedure would be:

  1. Before applying the patch, install and activate a plugin that makes the Plugin name column too wide on the Plugins screen in some situation. (You already found All in One SEO and others that add action links.)
  2. Apply the patch to your installation.
  3. Refresh the browser (clear cache if necessary) and/or open in a private/incognito window.
  4. Verify whether the change fixes the column width in that situation.
  5. As much as you can or want: Continue testing whether the patch helps with additional browsers or devices, various viewport sizes, different columns showing (adjust screen options), different languages, etc.

I would do well to document my testing here, too :)

I have to admit, that it's going above my head a bit in applying the patch...

#9 @sabernhardt
2 months ago

@NekoJonez If it helps, another tutorial lists additional methods to apply a patch. If you specifically would like a pull request, perhaps someone else could create one from the patch I uploaded (I use TortoiseSVN). You could also ask for help on Slack, either in the #core-test channel or #core (after devchat).

#10 follow-up: @Ankit K Gupta
2 months ago

Test Report

Test Environment


  • WordPress: 5.9-alpha-51272-src
  • Browser: Google Chrome Version 94.0.4606.61 (Official Build) (x86_64)
  • OS: macOS Big Sur V 11.5.1
  • Theme: Twenty Twenty-One
  • Plugins: All in One SEO, Loco Translate, and WP Rollback
  • Web Server: nginx
  • PHP & MySQL: 8.0.0 & 8.0.16
  • Console Log: All fine
  • WP Debug Log: All fine.

Steps to test


  1. Go to WP Dashboard > Plugins
  2. Install and Activate 'All in One SEO, Loco Translate, WP Rollback' etc.
  3. Plugin options of 'All in One SEO' taking a huge space and reducing the width of other columns.(refer https://i.imgur.com/jYQ8CA7.jpg)
  4. Now apply the patch file to cross check fixes.
  5. See, all other columns have proper width now.(Refer https://i.imgur.com/puAgTkb.jpg)

Test Results


Plugins listing is looking better now. Current patch file (53275.patch) fixed the above known issue mentioned in ticket description.

Test Status


Pass

Screen Shots

Before Patch-
https://i.imgur.com/g0lbXTg.jpg

After Patch-
https://i.imgur.com/lIQANFf.jpg

#11 in reply to: ↑ 10 @NekoJonez
2 months ago

Replying to Ankit K Gupta:

Test Report

Test Environment


  • WordPress: 5.9-alpha-51272-src
  • Browser: Google Chrome Version 94.0.4606.61 (Official Build) (x86_64)
  • OS: macOS Big Sur V 11.5.1
  • Theme: Twenty Twenty-One
  • Plugins: All in One SEO, Loco Translate, and WP Rollback
  • Web Server: nginx
  • PHP & MySQL: 8.0.0 & 8.0.16
  • Console Log: All fine
  • WP Debug Log: All fine.

Steps to test


  1. Go to WP Dashboard > Plugins
  2. Install and Activate 'All in One SEO, Loco Translate, WP Rollback' etc.
  3. Plugin options of 'All in One SEO' taking a huge space and reducing the width of other columns.(refer https://i.imgur.com/jYQ8CA7.jpg)
  4. Now apply the patch file to cross check fixes.
  5. See, all other columns have proper width now.(Refer https://i.imgur.com/puAgTkb.jpg)

Test Results


Plugins listing is looking better now. Current patch file (53275.patch) fixed the above known issue mentioned in ticket description.

Test Status


Pass

Screen Shots

Before Patch-
https://i.imgur.com/g0lbXTg.jpg

After Patch-
https://i.imgur.com/lIQANFf.jpg

Amazing! Thanks for this test... I didn't had the time to test it out well enough looking into the test procedure and this test is showing that it works. :) @sabernhardt I think your patch works flawlessly. Thanks @ankit-k-gupta !

#12 @hellofromTonya
2 months ago

  • Keywords commit added; needs-testing removed
  • Owner set to hellofromTonya
  • Status changed from new to reviewing

Great job on the Test Report @ankit-k-gupta! Thanks @sabernhardt for the patch! Marking this for commit. Will get it committed shortly. Thank you @NekoJonez @SergeyBiryukov @sabernhardt and @ankit-k-gupta for your contributions!

This ticket was mentioned in Slack in #polyglots by nekojonez. View the logs.


2 months ago

#14 @hellofromTonya
2 months ago

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

In 51887:

Administration: Allow plugin action links row to wrap.

When there are several action links or the text for these links is long, the plugin name column's width extends causing the other columns to shrink in width. This case is a less than desirable user experience.

The plugin name's column has white-space: nowrap (on larger screens). This commit changes the white-space to normal, allowing the plugin action links row to wrap into more than one line.

Follow-up to [41695].

Props ankit-k-gupta, nekojonez, sabernhardt, sergeybiryukov.
Fixes #53275.

This ticket was mentioned in Slack in #polyglots by amieiro. View the logs.


2 months ago

Note: See TracTickets for help on using tickets.