Skip to content

Alternate dom order #12672

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
joedolson wants to merge 12 commits into
base: trunk
Choose a base branch
from
Open

Alternate dom order #12672

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 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
51c261d
Adjust DOM order to match focus order, style changes
joedolson Jul 24, 2026
7365efd
Merge branch 'trunk' into alternate-dom-order
peterwilsoncc Sep 29, 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 @@ -199,6 +199,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
111 changes: 50 additions & 61 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 @@ -1534,6 +1534,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 @@ -1549,9 +1550,17 @@ 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: auto 1fr auto;
grid-template-areas:
"icon name"
"icon desc"
"actions actions";

@peterwilsoncc peterwilsoncc Sep 29, 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.

Maybe? Possibly?

Suggested change
"actions actions";
"icon actions";

I'm an engineer so it might be a terrible idea.

In US English it results in this (I've doubled the length of the GB description in the screen shot as I've been told that's a good rule of thumb for testing i18n effects)

Image

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 @@ -1560,29 +1569,41 @@ div.action-links,
}

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

.plugin-card .desc {
margin-inline: 0;
.plugin-card .authors {
margin: 8px 0;
}

.plugin-card .name, .plugin-card .desc > p {
margin-left: 148px;
/*
* Option A layout (ticket #64686): the icon spans the height of the
* title and description via CSS Grid, with the action buttons in a
* full-width row underneath. Applied unconditionally (no width
* threshold) since the layout doesn't depend on there being room for
* buttons beside the title, unlike the previous flex-based design.
*/
.plugin-card .plugin-icon {
grid-area: icon;
align-self: start;
}

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

@media (min-width: 481px) and (max-width: 781px) {
.plugin-card .name, .plugin-card .desc > p {
margin-right: 128px;
}
.plugin-card .desc {
margin-inline: 0;
grid-area: desc;
}

.plugin-card .action-links {
grid-area: actions;
padding-top: 12px;
border-top: 1px solid rgb(0, 0, 0, 0.1);
}

.plugin-card .column-description {
Expand Down Expand Up @@ -1645,22 +1666,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 @@ -1745,12 +1766,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 @@ -1791,36 +1810,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
13 changes: 11 additions & 2 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 @@ -670,9 +670,9 @@ public function display_rows() {
<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>
<p class="authors"><?php echo $author; ?></p>
</div>
<div class="action-links">
<?php
Expand All @@ -683,8 +683,17 @@ public function display_rows() {
</div>
<div class="desc column-description">
<p><?php echo $description; ?></p>
<p class="authors"><?php echo $author; ?></p>
</div>
<?php
/*
* The icon is decorative and kept out of the details link (and out of
* tab order via aria-hidden) so the heading link remains the single,
* unambiguous way to reach the plugin details for keyboard and screen
* reader users. A click handler in plugin-install.js forwards mouse/
* touch clicks on the icon to that same link. See #64686.
*/
?>
<img src="<?php echo esc_url( $plugin_icon_url ); ?>" class="plugin-icon" alt="" aria-hidden="true" />
</div>
<?php
$dependencies_notice = $this->get_dependencies_notice( $plugin );
Expand Down
Loading