fix(admin-ui): reset the wp-admin li margin that misaligns Breadcrumbs - #81134
Conversation
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
wp-admin's `dd, li { margin-bottom: 6px }` (common.css) reaches the list
items `Breadcrumbs` renders, so the trail measures 6px taller than its
text. The page header centres that taller box, which leaves the trail
sitting 3px above everything it shares the row with.
Reproduced on Settings > Content Types > Add post type, where the "Add
new" heading sits at y=61 against the Create button's y=64. Resetting the
item margin brings both to y=64.
The list's own margin was already reset; only its items' was missing.
Storybook does not load wp-admin's stylesheets, so no story shows this.
e0da4dc to
eb46f43
Compare
|
Size Change: -17 B (0%) Total Size: 7.78 MB 📦 View Changed
|
|
Flaky tests detected in eb46f43. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/30887659534
|
#81134) wp-admin's `dd, li { margin-bottom: 6px }` (common.css) reaches the list items `Breadcrumbs` renders, so the trail measures 6px taller than its text. The page header centres that taller box, which leaves the trail sitting 3px above everything it shares the row with. Reproduced on Settings > Content Types > Add post type, where the "Add new" heading sits at y=61 against the Create button's y=64. Resetting the item margin brings both to y=64. The list's own margin was already reset; only its items' was missing. Storybook does not load wp-admin's stylesheets, so no story shows this.
3 participants
What?
Resets the
marginon the list itemsBreadcrumbsrenders, so wp-admin's global list styling stops pushing the trail out of alignment with the rest of the page header.Why?
wp-admin's
common.csssetsdd, li { margin-bottom: 6px }. That reaches the<li>elementsBreadcrumbsrenders, so the trail's<ul>measures 6px taller than the text inside it.Page's header centres its children, so the trail ends up sitting 3px above everything it shares the row with.Breadcrumbsalready resetsmarginon the list itself; only the items' margin was missing.This is not visible in Storybook, because Storybook does not load wp-admin's stylesheets. It only shows up on a real admin page, which is likely why it has gone unnoticed.
How?
Adds
margin: 0to the existing.list > lirule.The
@wordpress/uiglobal CSS defense module is deliberately not used here. It exists because that package's styles live in a cascade layer and therefore lose to wp-admin's unlayered bare-element selectors.@wordpress/admin-uihas no@layer, so.list > li(0,1,1) already outranksdd, li(0,0,1) on specificity alone — and #80952 proposes forbidding the defense tokens outside the UI package. If #77039 movesBreadcrumbinto@wordpress/ui, this line should become an--_gcd-li-margintoken at that point.Testing Instructions
Post Types / Add newwith a Create button on the right. Check that the heading text is vertically centred against the button.On
trunkthe heading sits 3px high. Measured on the same page:ulheightAdd newcentreCreatecentreThe same misalignment appears on Settings → Content Types → Taxonomies → (any taxonomy), which uses the same header.
Testing Instructions for Keyboard
No interaction changes.
Screenshots or screencast
Use of AI Tools
This PR was authored with Claude Code. AI was used to trace the cause, to write the change and the changelog entry, and to draft this description.