Make WordPress Core

Opened 22 months ago

Closed 18 months ago

Last modified 15 months ago

#55721 closed enhancement (fixed)

Visually align important data on the add new plugins screen

Reported by: jamesckemp's profile jamesckemp Owned by: audrasjb's profile audrasjb
Milestone: 6.1 Priority: normal
Severity: minor Version:
Component: Plugins Keywords: has-patch has-screenshots commit
Focuses: ui, accessibility, css Cc:

Description

Issue:

Currently, on the add new plugins screen, the important data for each plugin is misaligned, depending on the length of the short description. This makes it hard to quickly scan ratings, last updated dates, etc.

Solution:

Using flexbox, we can easily align the items with little effort, making the user experience much better.

#the-list {
	display: flex;
	flex-wrap: wrap;
}

.plugin-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

Attachments (13)

FSkCP4cUcAAV5wI.jpeg (688.5 KB) - added by jamesckemp 22 months ago.
Before - misaligned plugin data
FSkCQkPUYAQG0s7.jpeg (699.7 KB) - added by jamesckemp 22 months ago.
After - plugin data nicely aligned
screencapture-localhost-8888-552-wordpress-17-wp-admin-plugins-php-2022-05-15-22_55_15.png (734.1 KB) - added by audrasjb 22 months ago.
plugins-new-flex-1280.png (105.8 KB) - added by sabernhardt 21 months ago.
error message inside plugin card (width: 1280px)
plugins-new-flex-768.png (104.6 KB) - added by sabernhardt 21 months ago.
plugin cards stack in one column below 782px breakpoint (width: 768px)
plugins-new-flex-800.png (110.6 KB) - added by sabernhardt 21 months ago.
plugin cards use two columns just above 782px breakpoint (width: 800px)
plugins-new-flex-1600.png (192.6 KB) - added by sabernhardt 21 months ago.
featured plugins, in three columns at 1600px
plugins-new-flex-2300.png (201.1 KB) - added by sabernhardt 21 months ago.
featured plugins, in four columns at 2300px
details-height-difference.png (62.7 KB) - added by sabernhardt 21 months ago.
ratings details sections sometimes have a height difference, and the bottom borders of the cards still line up (width: 860px)
Capture d’écran 2022-09-13 à 23.35.26.png (640.7 KB) - added by audrasjb 18 months ago.
Before patch, zoom 100%
Capture d’écran 2022-09-13 à 23.34.27.png (689.4 KB) - added by audrasjb 18 months ago.
Before patch, zoom 80%
Capture d’écran 2022-09-13 à 23.35.44.png (625.0 KB) - added by audrasjb 18 months ago.
After patch, zoom 100%
Capture d’écran 2022-09-13 à 23.34.55.png (657.5 KB) - added by audrasjb 18 months ago.
After patch, zoom 80%

Change History (37)

@jamesckemp
22 months ago

Before - misaligned plugin data

@jamesckemp
22 months ago

After - plugin data nicely aligned

This ticket was mentioned in PR #2710 on WordPress/wordpress-develop by jamesckemp.


22 months ago
#1

  • Keywords has-patch added

Trac ticket: [](https://core.trac.wordpress.org/ticket/55721)

A simple update to ensure plugin data is visually aligned on the "Add New Plugin" screen.

#2 @mukesh27
22 months ago

  • Keywords needs-testing added
  • Milestone changed from Awaiting Review to 6.1

Hi there!

Thanks for the ticket and patch.

The patch looks good. let's wait for other folks to test it.

I'm also moving this ticket to milestone 6.1.

#3 @audrasjb
22 months ago

  • Milestone changed from 6.1 to Awaiting Review
  • Owner set to audrasjb
  • Status changed from new to reviewing

Hello @jamesckemp and welcome back to Trac,

Thank you for the patch. Self-assigning for test and review.

#4 @joyously
22 months ago

Can you put a screenshot of what happens in a smaller window?

#5 @SergeyBiryukov
22 months ago

Related: #55272 has a similar proposal with a different code.

#6 @jamesckemp
22 months ago

It all stacks up in the same way as before, but keeps everything in line.

https://share.cleanshot.com/XUTceL
https://share.cleanshot.com/ga2JZj

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


22 months ago

#8 @SergeyBiryukov
22 months ago

  • Milestone changed from Awaiting Review to 6.1

Restoring the milestone, as it appears to have been changed accidentally due to commenting at the same time.

#9 @audrasjb
22 months ago

The proposed PR breaks the main Plugin screen on my side, see screenshot below.

#10 @jamesckemp
22 months ago

@audrasjb Good catch! I've updated the PR to make the CSS selector more specific.

@sabernhardt
21 months ago

error message inside plugin card (width: 1280px)

@sabernhardt
21 months ago

plugin cards stack in one column below 782px breakpoint (width: 768px)

@sabernhardt
21 months ago

plugin cards use two columns just above 782px breakpoint (width: 800px)

@sabernhardt
21 months ago

featured plugins, in three columns at 1600px

@sabernhardt
21 months ago

featured plugins, in four columns at 2300px

@sabernhardt
21 months ago

ratings details sections sometimes have a height difference, and the bottom borders of the cards still line up (width: 860px)

#11 @sabernhardt
21 months ago

  • Focuses css added

I searched for a plugin that requires at least PHP 8.0, such as Bring Fraktguiden for WooCommerce, to get the error message.

#12 @sabernhardt
21 months ago

Testing situations

Browsers: My six screenshots use Responsive Design Mode in Firefox/Windows 10, and I also tried Chrome and Edge.
Languages: In addition to English, I looked at French and Arabic.
Environment: I checked local (WAMP) installations, both single site and multisite.

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


19 months ago

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


19 months ago

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


18 months ago

#16 @audrasjb
18 months ago

Self assigning for final testing.

@audrasjb
18 months ago

Before patch, zoom 100%

@audrasjb
18 months ago

Before patch, zoom 80%

@audrasjb
18 months ago

After patch, zoom 100%

@audrasjb
18 months ago

After patch, zoom 80%

#17 @audrasjb
18 months ago

  • Keywords has-screenshots commit added; needs-testing removed
  • Status changed from reviewing to accepted

The patch looks good to me. It works on each browser I tested, with or without zoom (80% to 200%).

Let's ship this change.

#18 @audrasjb
18 months ago

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

In 54149:

Plugins: Visually align plugin cards in Plugin Install screen.

This changeset adds a flexible CSS columns layout to plugin cards in the Plugin Install screen, to ensure plugin cards all have the same height.

Props jamesckemp, audrasjb, joyously, sabernhardt, sharjeelkhanvmi, joyously.
Fixes #55721.
See #55272.

#20 @SergeyBiryukov
18 months ago

#55272 was marked as a duplicate.

#21 @milana_cap
17 months ago

  • Keywords add-to-field-guide added

#22 @milana_cap
17 months ago

  • Keywords add-to-field-guide removed

#23 @peterwilsoncc
17 months ago

@mukesh27 added to props list via make/core per review in comment #2

#24 @audrasjb
15 months ago

In 54871:

Plugins: Improve "No plugin found" message alignement in Plugins screen.

This changeset centers the "No plugin found" message in plugin search results.

Follow-up to [54149].

Props sruthi90, aparnajl, krupalpanchal, audrasjb, anantajitjg.
Fixes #57194.
See #55721, #55272.

Note: See TracTickets for help on using tickets.