The New Layout Fix For Plugin Install Page

[sharjeelkhanvmi]

/*NEW CSS FOR PLUGIN INSTALL PAGE DESIGN IMPROVEMENTS 2022 FOR VERSION 5.9.1*/
.plugin-card .name 
{
    min-height: 30px;
    height: auto;
    margin-right: 0;
}
.plugin-card-top 
{
    min-height: 160px;
}
.widefat p 
{
    height: 40px;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 60px;
}
.plugin-card
{border-radius: 6px;}

.plugin-card .desc {
    margin-right: 00;
}

.plugin-card .action-links {
    position: absolute;
    bottom: 0;
    left: auto;
    top: auto;
    width: 300px;
}
.plugin-action-buttons 
{
    display: flex;
    flex-direction: row-reverse;
    vertical-align: bottom;
}
.plugin-action-buttons li 
{
    margin: 0px 8px;
    position: relative;
    vertical-align: bottom;
}
.plugin-action-buttons .thickbox.open-plugin-details-modal 
{
    position: relative;
    top: 10px;
}
.plugin-card .desc 
{
    display: flex;
    flex-direction: column-reverse;
}
.plugin-icon 
{
    border-radius: 6px;
}
.plugin-card-bottom 
{
    border-radius: 0px 0px 6px 6px;
}
.plugin-card h3 
{
    height: 20px;
    overflow: hidden;
    margin-bottom: 0;
}
.widefat p.authors 
{
    height: auto;
    margin-top: 8px;
    margin-bottom: 10px;
}
/*NEW CSS FOR PLUGIN INSTALL PAGE DESIGN IMPROVEMENTS 2022 FOR VERSION 5.9.1*/

[sharjeelkhanvmi]

CSS FOR PLUGIN INSTALL PAGE NEW DESIGN FIX CSS 2022 FOR VERSION 5.9.1

[sharjeelkhanvmi]

BEFORE:
AFTER:

[audrasjb]

Hello @sharjeelkhanvmi, welcome to WordPress Core Trac and thank you for opening this ticket,

At a glance, it looks like you want to propose some change in this screen. Could you please provide a detailed description of what you want to achieve and why/how?

Thank you :)

[sharjeelkhanvmi]

Hello, I have done some changes to CSS in the install-plugin.php page you can view the after before screenshot here:

Before View of Install Plugin Page: ​https://i.snipboard.io/DMpixC.jpg
After View of Install Plugin Page: ​https://i.snipboard.io/7clPIu.jpg

Basically what i have done is move the Install button with a more detail button to the bottom and align all the boxes with the same height hide extra text in the plugin title and description and give some border-radius on the page.

Thanks you :)

Replying to audrasjb:

Hello @sharjeelkhanvmi, welcome to WordPress Core Trac and thank you for opening this ticket,

At a glance, it looks like you want to propose some change in this screen. Could you please provide a detailed description of what you want to achieve and why/how?

Thank you :)

[joyously]

Does the new look account for the error messages that can be shown? The plugin can have a message about mismatched versions.
Also, does this still look good on smaller windows?
Also, if you want to rearrange the elements, change the HTML instead of using CSS, for accessibility reasons.

My own opinion is that the short description should not be chopped midsentence since it is already so short. I would rather see the version number in addition to what is already shown.

[sharjeelkhanvmi]

Hello
I did not get your first point.
Yes, it Looks good in smaller windows as well.
Yes, right I need to rearrange elements but I do not know where to change them.

Yes if we add more description lines to show then it mismatches the alignment of the boxes yes it will be great to show the version number below the description as well.

Replying to joyously:

Does the new look account for the error messages that can be shown? The plugin can have a message about mismatched versions.
Also, does this still look good on smaller windows?
Also, if you want to rearrange the elements, change the HTML instead of using CSS, for accessibility reasons.

My own opinion is that the short description should not be chopped midsentence since it is already so short. I would rather see the version number in addition to what is already shown.

[sharjeelkhanvmi]

What's that?
Replying to SergeyBiryukov:

[joyously]

I did not get your first point.

The mismatched version error is shown at the top of the box. This alone can make the boxes uneven.
(This screenshot is my normal window width.)

---

Yes if we add more description lines to show then it mismatches the alignment of the boxes

I think it's more important to see the complete sentence of the description than to have even boxes.

[SergeyBiryukov]

Replying to sharjeelkhanvmi:

What's that?

Just editing the keywords and focus for better visibility, see ​Trac Workflow Keywords.

Replying to joyously:

I think it's more important to see the complete sentence of the description than to have even boxes.

I tend to agree, even boxes may look nice at a glance but it seems like they are not really feasible if we take full descriptions and plugin compatibility notices into account.

[sharjeelkhanvmi]

Okay, Then I need to fix the boxes sizes with the error message okay let me check what I can do then I update here.

Replying to joyously:

I did not get your first point.

The mismatched version error is shown at the top of the box. This alone can make the boxes uneven.
(This screenshot is my normal window width.)

---

Yes if we add more description lines to show then it mismatches the alignment of the boxes

I think it's more important to see the complete sentence of the description than to have even boxes.

[sharjeelkhanvmi]

Here is the Updated Code And New Fixes
You can check the errors and all the description is showing and all the layout will be now responsive it will be grid base now. here is the Screenshot: ​https://snipboard.io/fJvOE2.jpg

/*CSS CODE*/
div#the-list
{

display: grid;
grid-template-columns: repeat(auto-fill,minmax(30rem,1fr));
grid-gap: 20px 10px;

}
.plugin-card .name
{

min-height: 30px;
height: auto;
margin-right: 0;

}
.widefat p
{

margin-top: 0;
margin-bottom: 60px;

}
.plugin-card
{

border-radius: 6px;
position: relative;
display: grid;
margin: 0 !important;

}
.plugin-card .desc
{

margin-right: 00;

}
.plugin-card .action-links
{

position: absolute;
bottom: 0;
left: auto;
top: auto;
width: 300px;

}
.plugin-action-buttons
{

display: flex;
flex-direction: row-reverse;
vertical-align: bottom;

}
.plugin-action-buttons li
{

margin: 0px 8px;
position: relative;
vertical-align: bottom;

}
.plugin-action-buttons .thickbox.open-plugin-details-modal
{

position: relative;
top: 10px;

}
.plugin-card .desc
{

display: flex;
flex-direction: column-reverse;

}
.plugin-icon
{

border-radius: 6px;
border: 1px solid #dcdcde;

}
.plugin-card-bottom
{

border-radius: 0px 0px 6px 6px;
position: relative;
order: 3;

}
.plugin-card h3
{

margin-bottom: 0;

}
.widefat p.authors
{

height: auto;
margin-top: 8px;
margin-bottom: 10px;

}
.plugin-card .notice p
{

margin: 0;
height: auto;
overflow: initial;
width: 100%;

}
.plugin-card .notice
{

display: flex;
vertical-align: middle;
margin: 0;
margin-top: 0px;
order: 1;
border: unset;

}
.plugin-card
{

width: 100%;

}

[SergeyBiryukov]

#55351 was marked as a duplicate.

[joyously]

I do not agree that the actionable elements should be moved.
The current way is that the title is first (clickable to get to plugin page), followed by the buttons to More Details or Install Now. This is good for visually parsing the page.
If you move the buttons to the bottom, the user has more to parse to find the buttons.

I think this page is fine. Don't try to fix what is not broken.

[SergeyBiryukov]

Related: #55721

[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.

[SergeyBiryukov]

Thanks again for the ticket! I believe this has been addressed in [54149] / #55721, feel free to reopen if not.

[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.