Skip to content

Fix plugin-card button overlap on Add Plugins screen (#64686) #12376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
369work wants to merge 16 commits into
base: trunk
Choose a base branch
from
+49 −87
Open

Fix plugin-card button overlap on Add Plugins screen (#64686) #12376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
d39aad3
Administration: Fix plugin-card button overlap on the Add Plugins scr…
369work Jul 1, 2026
1e238ce
Robots: Use `admin_url()` for the `robots.txt` admin paths.
westonruter Jul 4, 2026
ec8b004
Site Health: Remove redundant `function_exists( 'ini_get' )` checks.
Jul 4, 2026
93b45f4
Docs: Modernize and improve specificity of types in `WP_Error` class.
westonruter Jul 5, 2026
f01bda1
Filesystem: Fix subdirectory recursion in `WP_Filesystem_Direct::chgr…
westonruter Jul 5, 2026
2252f6d
Filesystem API: Improve type safety across the transport classes.
westonruter Jul 5, 2026
e68b191
Merge branch 'WordPress:trunk' into trunk
369work Jul 16, 2026
d7b36d6
Add groundwork for Option A: move icon outside link, add aria-hidden,…
369work Jul 16, 2026
2f8cfdc
Merge branch 'trunk' of https://github.com/369work/wordpress-develop …
369work Jul 16, 2026
32f1328
Implement Option A layout for plugin cards with CSS Grid
369work Jul 16, 2026
b4af26f
Merge branch 'WordPress:trunk' into trunk
369work Jul 24, 2026
98585f9
Merge branch 'trunk' into fix/64686-plugin-card-overlap
369work Jul 24, 2026
cf40017
Adjust DOM order for focus order, fix icon alignment on update buttons
369work Jul 24, 2026
f3de6a2
Merge branch 'trunk' into fix/64686-plugin-card-overlap
t-hamano Oct 30, 2026
8b8eed6
Remove redundant CSS and use a stretched link for the plugin icon
369work Nov 7, 2026
55708ef
Align plugin card spacing to an 8px grid and remove ticket comments
369work Nov 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 36 additions & 76 deletions src/wp-admin/css/list-tables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1458,7 +1458,6 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
margin: 0 5px 0 -2px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: top;
}

.plugin-card .updating-message::before {
Expand All @@ -1483,6 +1482,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
content: "\f147" / "";
}

.plugin-card .update-now::before,
.plugin-card .updated-message::before,
.plugin-card .updating-message::before {
line-height: 1;
Expand Down Expand Up @@ -1547,9 +1547,17 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
}

.plugin-card-top {
Comment thread
t-hamano marked this conversation as resolved.
Resolved
display: grid;
grid-template-columns: 128px minmax(0, 1fr);
grid-template-rows: 1fr auto;
grid-template-areas:

@joedolson joedolson Jul 24, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This grid layout causes the focus order to break. The order in which links get focus needs to match their visual order - with this layout, the order is Plugin Title > Action Button > Details Button > Author Link, but the order should be Plugin Title > Author Link > Action Button > Details Button.

A possible alternative is to move the author link into the same container as the plugin name.

@t-hamano t-hamano Nov 9, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this has been addressed in cf40017. The DOM is now structured as icon (aria-hidden) → info group (title, description, author) → action links, so the DOM order matches the visual order.

"icon info"
"actions actions";
column-gap: 24px;
row-gap: 8px;
position: relative;
padding: 16px;
min-height: 135px;
flex: 1 1 auto;
}

div.action-links,
Expand All @@ -1558,32 +1566,37 @@ div.action-links,
}

.plugin-card h3 {
margin: 0 12px 16px 0;
margin: 0 0 16px;
font-size: 18px;
line-height: 1.3;
}

.plugin-card .desc {
margin-inline: 0;
.plugin-card .plugin-icon {
grid-area: icon;
width: 128px;
height: 128px;
}

.plugin-card .name,
.plugin-card .desc > p {
margin-left: 148px;
/* Stretch the title link over the icon so clicking the icon opens the details modal. */
.plugin-card .name a::after {
content: "";
position: absolute;
inset-block-start: 16px;
inset-inline-start: 16px;
width: 128px;
height: 128px;
}

@media (min-width: 1101px) {
.plugin-card .name,
.plugin-card .desc > p {
margin-right: 128px;
}
.plugin-card-info {
grid-area: info;
display: flex;
flex-direction: column;
}

@media (min-width: 481px) and (max-width: 781px) {
.plugin-card .name,
.plugin-card .desc > p {
margin-right: 128px;
}
.plugin-card .action-links {
grid-area: actions;
padding-top: 16px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.plugin-card .column-description {
Expand Down Expand Up @@ -1646,26 +1659,18 @@ div.action-links,
margin-top: 1em;
}

.plugin-card .action-links {
position: absolute;
top: 20px;
right: 20px;
width: 120px;
}

.plugin-action-buttons {
clear: right;
float: right;
margin-bottom: 1em;
text-align: right;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
}

.plugin-action-buttons li {
margin-bottom: 10px;
margin: 0;
}

.plugin-card-bottom {
clear: both;
padding: 16px;
background-color: #f6f7f7;
border-top: 1px solid rgba(0, 0, 0, 0.1);
Expand Down Expand Up @@ -1745,15 +1750,6 @@ div.action-links,
margin: 20px 20px 0;
}

.plugin-card .plugin-icon {
position: absolute;
top: 20px;
left: 20px;
width: 128px;
height: 128px;
margin: 0 20px 20px 0;
}

.no-plugin-results {
color: #646970; /* same as no themes and no media */
font-size: 18px;
Expand Down Expand Up @@ -1792,42 +1788,6 @@ div.action-links,
/* =Media Queries
-------------------------------------------------------------- */

@media screen and (max-width: 1100px) and (min-width: 782px), (max-width: 480px) {
.plugin-card .action-links {
position: static;
margin-left: 148px;
width: auto;
}

.plugin-action-buttons {
float: none;
margin: 1em 0 0;
text-align: left;
}

.plugin-action-buttons li {
display: inline-block;
vertical-align: middle;
}

.plugin-action-buttons li .button {
margin-right: 20px;
}

.plugin-card h3 {
margin-right: 24px;
}

.plugin-card .name,
.plugin-card .desc {
margin-right: 0;
}

.plugin-card .desc p:first-of-type {
margin-top: 0;
}
}

@media screen and (max-width: 782px) {
/* WP List Table Options & Filters */
.tablenav {
Expand Down
24 changes: 13 additions & 11 deletions src/wp-admin/includes/class-wp-plugin-install-list-table.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -742,13 +742,19 @@ public function display_rows() {
}
?>
<div class="plugin-card-top">
<div class="name column-name">
<h3>
<a href="<?php echo esc_url( $details_link ); ?>" class="thickbox open-plugin-details-modal">
<?php echo $title; ?>
<img src="<?php echo esc_url( $plugin_icon_url ); ?>" class="plugin-icon" alt="" />
</a>
</h3>
<img src="<?php echo esc_url( $plugin_icon_url ); ?>" class="plugin-icon" alt="" aria-hidden="true" />
<div class="plugin-card-info">
<div class="name column-name">
<h3>
<a href="<?php echo esc_url( $details_link ); ?>" class="thickbox open-plugin-details-modal">
<?php echo $title; ?>
</a>
</h3>
</div>
<div class="desc column-description">
<p><?php echo $description; ?></p>
<p class="authors"><?php echo $author; ?></p>
</div>
</div>
<div class="action-links">
<?php
Expand All @@ -757,10 +763,6 @@ public function display_rows() {
}
?>
</div>
<div class="desc column-description">
<p><?php echo $description; ?></p>
<p class="authors"><?php echo $author; ?></p>
</div>
</div>
<?php
$dependencies_notice = $this->get_dependencies_notice( $plugin );
Expand Down
Loading