Make WordPress Core

Opened 2 years ago

Closed 21 months ago

Last modified 19 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 2 years ago.
Before - misaligned plugin data
FSkCQkPUYAQG0s7.jpeg (699.7 KB) - added by jamesckemp 2 years 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 2 years ago.
plugins-new-flex-1280.png (105.8 KB) - added by sabernhardt 2 years ago.
error message inside plugin card (width: 1280px)
plugins-new-flex-768.png (104.6 KB) - added by sabernhardt 2 years ago.
plugin cards stack in one column below 782px breakpoint (width: 768px)
plugins-new-flex-800.png (110.6 KB) - added by sabernhardt 2 years ago.
plugin cards use two columns just above 782px breakpoint (width: 800px)
plugins-new-flex-1600.png (192.6 KB) - added by sabernhardt 2 years ago.
featured plugins, in three columns at 1600px
plugins-new-flex-2300.png (201.1 KB) - added by sabernhardt 2 years ago.
featured plugins, in four columns at 2300px
details-height-difference.png (62.7 KB) - added by sabernhardt 2 years 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 21 months ago.
Before patch, zoom 100%
Capture d’écran 2022-09-13 à 23.34.27.png (689.4 KB) - added by audrasjb 21 months ago.
Before patch, zoom 80%
Capture d’écran 2022-09-13 à 23.35.44.png (625.0 KB) - added by audrasjb 21 months ago.
After patch, zoom 100%
Capture d’écran 2022-09-13 à 23.34.55.png (657.5 KB) - added by audrasjb 21 months ago.
After patch, zoom 80%

Change History (37)

@jamesckemp
2 years ago

Before - misaligned plugin data

@jamesckemp
2 years ago

After - plugin data nicely aligned

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


2 years 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
2 years 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
2 years 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
2 years ago

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

#5 @SergeyBiryukov
2 years ago

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

#6 @jamesckemp
2 years 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.


2 years ago

#8 @SergeyBiryukov
2 years 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
2 years ago

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

#10 @jamesckemp
2 years ago

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

@sabernhardt
2 years ago

error message inside plugin card (width: 1280px)

@sabernhardt
2 years ago

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

@sabernhardt
2 years ago

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

@sabernhardt
2 years ago

featured plugins, in three columns at 1600px

@sabernhardt
2 years ago

featured plugins, in four columns at 2300px

@sabernhardt
2 years ago

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

#11 @sabernhardt
2 years 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
2 years 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.


23 months ago

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


22 months ago

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


22 months ago

#16 @audrasjb
21 months ago

Self assigning for final testing.

@audrasjb
21 months ago

Before patch, zoom 100%

@audrasjb
21 months ago

Before patch, zoom 80%

@audrasjb
21 months ago

After patch, zoom 100%

@audrasjb
21 months ago

After patch, zoom 80%

#17 @audrasjb
21 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
21 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
21 months ago

#55272 was marked as a duplicate.

#21 @milana_cap
21 months ago

  • Keywords add-to-field-guide added

#22 @milana_cap
20 months ago

  • Keywords add-to-field-guide removed

#23 @peterwilsoncc
20 months ago

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

#24 @audrasjb
19 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.