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 13 commits into
base: trunk
Choose a base branch
from
+70 −73
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
13 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
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
14 changes: 14 additions & 0 deletions src/js/_enqueues/admin/plugin-install.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,20 @@ jQuery( function( $ ) {
tbWindow.find( '#TB_iframeContent' ).attr( 'title', title );
});

/*
* On the Add Plugins screen, the plugin icon is decorative markup living
* outside the details link (see #64686 and class-wp-plugin-install-list-
* table.php). Forward mouse/touch clicks on the icon to the existing
* title link so clicking the icon still opens the details modal, the same
* as before. Keyboard users are unaffected: they tab directly to the link,
* which the icon (marked aria-hidden) is skipped over.
*/
$( '.wrap' ).on( 'click', '.plugin-card .plugin-icon', function() {
$( this ).closest( '.plugin-card-top' )
.find( '.name a.open-plugin-details-modal' )
.trigger( 'click' );
});

/* Plugin install related JS */
$( '#plugin-information-tabs a' ).on( 'click', function( event ) {
var tab = $( this ).attr( 'name' );
Expand Down
104 changes: 42 additions & 62 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 @@ -1450,7 +1450,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 @@ -1474,6 +1473,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 @@ -1523,6 +1523,7 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
border-radius: 8px;
box-sizing: border-box;
overflow: hidden;
container-type: inline-size; /* ticket #64686 */
}

@media screen and (min-width: 1600px) {
Expand All @@ -1538,9 +1539,16 @@ ul.cat-checklist input[name="post_category[]"]:indeterminate::before {
}

.plugin-card-top {
position: relative;
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.

"icon info"
"actions actions";
column-gap: 20px;
row-gap: 4px;
padding: 16px;
min-height: 135px;
flex: 1 1 auto; /* ticket #64686: grow to fill the card so the action row anchors to the same height across cards in a row */
}

div.action-links,
Expand All @@ -1549,29 +1557,33 @@ 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;
/* ticket #64686: icon spans info group via grid; DOM order matches focus order */
.plugin-card .plugin-icon {
grid-area: icon;
align-self: start;
}

.plugin-card .name, .plugin-card .desc > p {
margin-left: 148px;
.plugin-card-info {
grid-area: info;
display: flex;
flex-direction: column;
min-width: 0;
}

@media (min-width: 1101px) {
.plugin-card .name, .plugin-card .desc > p {
margin-right: 128px;
}
.plugin-card .desc {
margin-inline: 0;
}

@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;
margin-top: 8px;
padding-top: 12px;
border-top: 1px solid rgb(0, 0, 0, 0.1);
}

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

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

/* ticket #64686: wrap naturally so long, translated button labels never overlap */
.plugin-action-buttons {
clear: right;
float: right;
margin-bottom: 1em;
text-align: right;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 20px;
}

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

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

.plugin-card-bottom {
Expand Down Expand Up @@ -1734,12 +1746,10 @@ div.action-links,
}

.plugin-card .plugin-icon {
position: absolute;
top: 20px;
left: 20px;
width: 128px;
height: 128px;
margin: 0 20px 20px 0;
margin: 0;
cursor: pointer; /* ticket #64686 */
}

.no-plugin-results {
Expand Down Expand Up @@ -1780,36 +1790,6 @@ div.action-links,
-------------------------------------------------------------- */

@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;
}
Expand Down
25 changes: 14 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 @@ -666,13 +666,20 @@ 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>
<?php // Decorative icon; aria-hidden and placed first for DOM/focus order. See #64686. ?>
<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 @@ -681,10 +688,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