Fix plugin-card button overlap on Add Plugins screen (#64686)#12376
Fix plugin-card button overlap on Add Plugins screen (#64686)#12376369work wants to merge 13 commits into
Conversation
…een. Replaces the position:absolute based layout of .plugin-card-top with a flexbox + container query based one. See #64686 for background.
|
Hi there! 👋 Thank you for your contribution to WordPress! 💖 It looks like this is your first pull request to No one monitors this repository for new pull requests. Pull requests must be attached to a Trac ticket to be considered for inclusion in WordPress Core. To attach a pull request to a Trac ticket, please include the ticket's full URL in your pull request description. Pull requests are never merged on GitHub. The WordPress codebase continues to be managed through the SVN repository that this GitHub repository mirrors. Please feel free to open pull requests to work on any contribution you are making. More information about how GitHub pull requests can be used to contribute to WordPress can be found in the Core Handbook. Please include automated tests. Including tests in your pull request is one way to help your patch be considered faster. To learn about WordPress' test suites, visit the Automated Testing page in the handbook. If you have not had a chance, please review the Contribute with Code page in the WordPress Core Handbook. The Developer Hub also documents the various coding standards that are followed:
Thank you, |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @SergeyBiryukov602fd350-edb4-49c9-b593-d223f7449a82. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
There was a problem hiding this comment.
Pull request overview
This PR addresses button overlap in the Plugin Install “Add Plugins” screen by refactoring the .plugin-card-top layout from an absolute-positioning approach to a flexbox layout driven by container queries. This aligns the internal card layout with the card’s rendered width (rather than viewport width), preventing breakpoint mismatches that previously caused overlaps.
Changes:
- Adds
container-type: inline-sizeto.plugin-cardto enable size-based container queries. - Replaces
.plugin-card-top’s positioning-based layout with a wrapping flex layout (icon/title, actions, description). - Updates action button list styling to switch between inline and stacked layouts via
@container (min-width: 600px).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
This is certainly going in a better direction - I think using containers to handle the width is a good idea. However, this style change introduces a significant visual difference that leaves a large amount of empty white space that I don't think is desirable. I think it's going to require some structural changes in order to be feasible. As I see it, the region with the icon, title, and action buttons needs to be a grid/flex with an order of icon > heading/description > actions. It won't be trivial to achieve the current or similar layout while also ensuring that the |
Derive the `Disallow` and `Allow` directives in `do_robots()` from `admin_url()` and `admin_url( 'admin-ajax.php' )` rather than from a hardcoded `/wp-admin/` path built off `site_url()`. Only the URL path portion is emitted, as before, so installs that relocate or filter their admin URL now produce a correct default `robots.txt`. Also guard the `Content-Type` header with a `headers_sent()` check to avoid a warning when the headers have already been sent. Developed in WordPress#11998. Follow-up to r34985. Props masteradhoc, yogeshbhutkar, hrohh, westonruter, mukeshpanchal27, 1ucay. Fixes #63467. git-svn-id: https://develop.svn.wordpress.org/trunk@62633 602fd350-edb4-49c9-b593-d223f7449a82
The `ini_get()` function is called unconditionally early in the bootstrap process, so there is no need for subsequent `function_exists( 'ini_get' )` checks. Follow-up to [44986], [45104]. Props siliconforks, shreyasikhar26, ankitkumarshah, westonruter, SergeyBiryukov. Fixes #65423. git-svn-id: https://develop.svn.wordpress.org/trunk@62634 602fd350-edb4-49c9-b593-d223f7449a82
This brings the `WP_Error` class to full PHPStan rule level 10 compliance. Also make use of null coalescing operator where appropriate, and simplify `has_errors()` method. Developed in WordPress#12405. Follow-up to r42761, r49115, r49116. See #64898, #64897. git-svn-id: https://develop.svn.wordpress.org/trunk@62635 602fd350-edb4-49c9-b593-d223f7449a82
…p()` and `::chown()`. This applies the equivalent fix which had previously been done to `::chmod()`. Tests are added for all three methods. Developed in subset of WordPress#11593. Follow-up to r12997. Fixes #65584. See #65409, WordPress#11261. git-svn-id: https://develop.svn.wordpress.org/trunk@62636 602fd350-edb4-49c9-b593-d223f7449a82
Change the optional constructor argument of `WP_Filesystem_FTPext`, `WP_Filesystem_ftpsockets`, and `WP_Filesystem_SSH2` from an empty string default to an empty `array`, matching how the argument is actually consumed, and improve the associated DocBlocks. These classes were also brought to adherence with PHPStan rule level 10: * Add `FileListing` and `Options` array shapes, and initialize each transport's `$options` to a complete default array before any early return. * Correct several inaccurate `@return` descriptions, including the `group()` methods that had been describing the owner. * Allow `WP_Filesystem_SSH2::connect()` to be retried after a failed connection attempt. * Stop `WP_Filesystem_FTPext::parselisting()` from leaking its intermediate date-parsing keys into the returned listing. * Add `ext-ftp` and `ext-ssh2` to the suggested extensions in `composer.json`. Developed in WordPress#11593. Follow-up to r62635, r62636. Props soean, westonruter, mukesh27. See #65584, #64898. Fixes #65409. git-svn-id: https://develop.svn.wordpress.org/trunk@62637 602fd350-edb4-49c9-b593-d223f7449a82
… JS click delegation
…into fix/64686-plugin-card-overlap
joedolson
left a comment
joedolson
left a comment
There was a problem hiding this comment.
Mostly, I like this. One issue with focus order; I'm opening a PR against this PR to suggest an alternate, which I'll link in a comment.
There's also an alignment issue on secondary action buttons with icons in mobile viewports that needs looking at. When a plugin has a pending update or is being updated, the icon is out of alignment.
| display: grid; | ||
| grid-template-columns: 128px minmax(0, 1fr); | ||
| grid-template-rows: auto 1fr auto; | ||
| grid-template-areas: |
There was a problem hiding this comment.
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.
|
See #12672 with an additional commit to modify the DOM order. |
Restructure .plugin-card-top so DOM order matches visual order: icon (aria-hidden) -> info group (title, author link, description) -> actions group. Addresses joedolson's focus-order review comment on #64686. Also fix a pre-existing icon misalignment on the static Update Now button state, which was missing the vertical-align adjustment shared by the Updating.../Updated! states. See #64686.
|
Thanks for the review! I've addressed both issues: 1. Focus order Rather than just moving the author link (as suggested in #12672), I restructured the DOM more broadly: the icon now comes first, followed by a single info group (title, author, description), then the actions group. This achieves the same result — DOM order now matches visual order (icon → title → author link → action button → details link) — while also simplifying the grid from 4 areas down to 3. Verified with keyboard tab order. 2. Icon alignment on secondary action buttons in mobile viewports Confirmed and fixed. This turned out to be a pre-existing issue, not introduced by this patch: Fixed by adding |
Summary
This patch fixes the plugin-card button overlap reported in #64686 by
replacing the absolute-positioning-based layout of
.plugin-card-topwith a flexbox + container query based one, following the direction
agreed in comment:29 (joedolson) and comment:30 (wildworks): no
position: absolute, no legacy fixed-offset CSS, and a layout thatdoesn't depend on button label length.
Only
src/wp-admin/css/list-tables.cssis touched. No PHP/markupchanges are required.
Root cause
The overlap wasn't a single bug — it was two independent, viewport-based
breakpoint systems drifting out of sync:
#the-list) decides how many.plugin-cards fitper row (1 column below 782px, 2 columns from 783px, 3 columns from
1600px, 4 columns from 2300px).
.plugin-card-top(icon / title / description /action buttons) previously decided its own layout using viewport
width via
@media, not the actual rendered width of the card.Because a card's real width depends on both the viewport width and the
current column count, a
@mediarule keyed to viewport width can'treliably predict how much space is actually available inside a card.
A card in 3-column mode at a wide viewport can be narrower than a card
in 2-column mode at a medium viewport, yet a viewport-based rule treats
them identically. This mismatch is what produced the reported overlaps
at 320px, 481–756px, and again at 1600px+.
Why container queries instead of viewport media queries
container-type: inline-sizeis added to.plugin-card, and theinternal layout responds to the card's own rendered width via
@container, not the viewport. This removes the dependency on twounrelated breakpoint systems entirely — the inner layout now always
has an accurate picture of its own available space, regardless of
column count or viewport size.
Browser support: container size queries are supported by all browsers
in Core's official browser support matrix
(last 2 versions of Chrome/Firefox/Safari/Edge/Opera/iOS), so no
fallback is required.
Why 600px as the breakpoint
The action-buttons column only shares a row with the icon+title when
there's enough width for all three to coexist without cramping:
Summing these gives roughly 550px as the point where things start to
fit at all, with no margin for longer translations or larger font
settings. 600px was chosen to give a small buffer above that minimum
so the side-by-side layout only activates when there's genuinely
enough room, consistent with the "don't depend on button text length"
principle from comment:29/30.
Icon/title ordering
The icon remains inside the existing
<a class="open-plugin-details-modal">(no markup change).
.plugin-card .name h3 ais made a flex container;the title text becomes an anonymous flex item and
.plugin-iconisplaced before it visually via
order: -1, keeping the icon clickableas part of the details link and preserving the existing DOM order.
Testing
Verified visually across 320, 375, 540, 768, 820, 1024, 1200, 1440,
1574, and 1920px viewport widths on the "Add Plugins" (bundled/beta),
single-column, and multi-column (2/3-col) card grids. In all cases:
(wide cards) the icon+title block, with no cards falling into an
inconsistent in-between state
Trac ticket: https://core.trac.wordpress.org/ticket/64686
Use of AI Tools
AI assistance: Yes
Tool(s): Claude (Anthropic)
Model(s): Claude
Used for: Root-cause analysis of the layout bug, CSS implementation (flexbox + container query refactor), and drafting this PR/Trac description. All changes were tested and verified across multiple viewport widths (320–1920px) by me before submission.
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.