Visually align important data on the add new plugins screen

[jamesckemp]

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;
}

[jamesckemp]

Before - misaligned plugin data

[jamesckemp]

After - plugin data nicely aligned

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.

[mukesh27]

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.

[audrasjb]

Hello @jamesckemp and welcome back to Trac,

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

[joyously]

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

[SergeyBiryukov]

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

[jamesckemp]

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

[SergeyBiryukov]

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

[audrasjb]

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

[jamesckemp]

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

[sabernhardt]

error message inside plugin card (width: 1280px)

[sabernhardt]

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

[sabernhardt]

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

[sabernhardt]

featured plugins, in three columns at 1600px

[sabernhardt]

featured plugins, in four columns at 2300px

[sabernhardt]

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

[sabernhardt]

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

[sabernhardt]

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.

[audrasjb]

Self assigning for final testing.

[audrasjb]

Before patch, zoom 100%

[audrasjb]

Before patch, zoom 80%

[audrasjb]

After patch, zoom 100%

[audrasjb]

After patch, zoom 80%

[audrasjb]

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.

[audrasjb]

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.

Committed in https://core.trac.wordpress.org/changeset/54149

[SergeyBiryukov]

#55272 was marked as a duplicate.

[peterwilsoncc]

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

[audrasjb]

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.