Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#53275 closed enhancement (fixed)

Wrap options on plugin page to second line

Reported by: nekojonez's profile NekoJonez Owned by: hellofromtonya's profile 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 3 years ago.
53275.patch (426 bytes) - added by sabernhardt 3 years 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.


3 years ago

#2 follow-up: @sabernhardt
3 years 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
3 years 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 years ago

setting white-space to normal for plugin action links

#4 follow-up: @sabernhardt
3 years 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 years ago

#6 in reply to: ↑ 4 @NekoJonez
3 years ago

Replying to sabernhardt:
How can I help test this?

#7 follow-up: @sabernhardt
3 years 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
3 years 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
3 years 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
3 years 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
3 years 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
3 years 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.


3 years ago

#14 @hellofromTonya
3 years 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.


3 years ago

Note: See TracTickets for help on using tickets.