Fields: Fix the page title row jumping on hover when a page type badge is shown

[ntsekouras]

What?

Fixes: #84335

In #82499 the page type badge of the page title field was migrated to the Badge from @wordpress/ui. The old Badge didn't wrap its content and truncated it with an ellipsis, but the new one wraps. So in the list layout, when the primary action shows up on hover, the badge breaks into two lines and the row jumps.

This PR adds the same styles to the badge in the field, so it behaves like before (on hover both the title and the badge get truncated). I didn't touch the Badge component itself, since the direction is for consumers to handle truncation (#78589 (comment)).

Screenshots or screencast

Notes

This should be ported in #83368 when lands.

Testing Instructions

1. Go to Settings > Privacy and set a page as the privacy policy page (a new install already has a draft one).
2. Go to Appearance > Editor > Pages switch to list layout and hover the row of that page.
3. The badge should stay in one line and the row shouldn't change height.
4. Same with the extensible site editor experiment enabled, where the first row is selected and shows the action.

Use of AI Tools

Fable 5.1 with direction, changes and review

[github-actions]

🤖 PR meta 🤖

🎉 Props

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

📦 Bundle size

Size Change: +94 B (0%)

Total Size: 8.38 MB

📦 View Changed

Filename	Size	Change
build/scripts/editor/index.min.js	623 kB	+8 B (0%)
build/styles/edit-site/style-rtl.css	21.9 kB	+13 B (+0.06%)
build/styles/edit-site/style-rtl.min.css	17.9 kB	+3 B (+0.02%)
build/styles/edit-site/style.css	21.9 kB	+14 B (+0.06%)
build/styles/edit-site/style.min.css	17.8 kB	+4 B (+0.02%)
build/styles/editor/style-rtl.css	32.6 kB	+17 B (+0.05%)
build/styles/editor/style-rtl.min.css	27.7 kB	+8 B (+0.03%)
build/styles/editor/style.css	32.7 kB	+19 B (+0.06%)
build/styles/editor/style.min.css	27.7 kB	+8 B (+0.03%)

_{7493bcc Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	e0c3dd1	trunk	% Change
timeToFirstByte	58.4 ms +12.16% -4.02%	56.55 ms +5.22% -1.95%	3.27%
largestContentfulPaint	98 ms +2.04% -6.12%	92 ms +6.52% -4.35%	6.52%
lcpMinusTtfb	35.1 ms +17.95% -6.27%	34.9 ms +15.76% -5.3%	0.57%
wpBeforeTemplate	29.18 ms +17.27% -2.78%	28.24 ms +7.97% -0.81%	3.33%
wpTemplate	24.76 ms +3.35% -4.44%	24.43 ms +2.33% -3.56%	1.35%
wpTotal	54.72 ms +11.17% -4.33%	52.79 ms +5.76% -2.06%	3.66%
wpMemoryUsage	7.68 MB +0% -0%	7.64 MB +0% -0%	0.45%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	e0c3dd1	trunk	% Change
timeToFirstByte	47.75 ms +5.76% -1.68%	48 ms +6.35% -2.4%	-0.52%
largestContentfulPaint	104 ms +3.85% -3.85%	104 ms +0% -3.85%	0%
lcpMinusTtfb	56.3 ms +2.84% -5.86%	53.85 ms +3.53% -1.39%	4.55%
wpBeforeTemplate	26.68 ms +1.5% -1.76%	26.18 ms +7.6% -0.84%	1.91%
wpTemplate	18.06 ms +1.38% -1.38%	17.72 ms +5.19% -0.62%	1.92%
wpTotal	44.81 ms +5.8% -1.85%	44.9 ms +6.7% -2.45%	-0.2%
wpMemoryUsage	6.30 MB +0% -0%	6.26 MB +0% -0%	0.7%
wpDbQueries	14 +0% -0%	14 +0% -0%	0%

media-processing

Metric	e0c3dd1	trunk	% Change
mediaProcessingJpeg	401.06 ms +0.75% -0.39%	404.47 ms +1.22% -0.35%	-0.84%
mediaProcessingAvif	6037.66 ms +0.02% -0.15%	6101.74 ms +0.32% -0.25%	-1.05%
mediaProcessingJpegToAvif	4170.63 ms +0.48% -0.04%	4207.11 ms +0.17% -0.18%	-0.87%

media-upload

Metric	e0c3dd1	trunk	% Change
jpegUploadProcessing	1425.25 ms +37.47% -0.61%	1423.76 ms +0.39% -0.58%	0.1%
pngUploadProcessing	199.73 ms +13.57% -12.3%	199.75 ms +14.99% -10.35%	-0.01%
largeJpegUploadProcessing	1409.3 ms +0.5% -0.41%	1413.61 ms +0.62% -1.11%	-0.3%
multipleImageUploadProcessing	1590.11 ms +0.64% -1.13%	1554.45 ms +2.53% -0.97%	2.29%

post-editor

Metric	e0c3dd1	trunk	% Change
serverResponse	429.61 ms +1.99% -6.17%	408.15 ms +8.52% -4.29%	5.26%
firstPaint	228.5 ms +43.09% -3.51%	218.19 ms +9.68% -17.33%	4.73%
domContentLoaded	1038.16 ms +3.57% -4.17%	1041.88 ms +1.05% -1.15%	-0.36%
loaded	1039.36 ms +3.57% -4.15%	1043.07 ms +1.05% -1.13%	-0.36%
firstContentfulPaint	445.69 ms +5.7% -1.79%	443.12 ms +3.21% -10.8%	0.58%
firstBlock	2985.06 ms +1.32% -0.81%	2989.53 ms +0.43% -0.22%	-0.15%
type	18.38 ms +0.76% -4.57%	18.09 ms +4.59% -5.97%	1.6%
typeWithoutInspector	18.88 ms +15.73% -5.67%	18.14 ms +3.64% -6.45%	4.08%
typeWithTopToolbar	23.72 ms +9.87% -0.8%	24.11 ms +4.27% -2.9%	-1.62%
typeContainer	8.87 ms +4.17% -3.49%	8.82 ms +8.5% -2.83%	0.57%
focus	116.75 ms +2.98% -3.9%	109.15 ms +6.44% -2.97%	6.96%
firstFocus	265.08 ms +0% -0%	217.7 ms +0% -0%	21.76%
selectAll	445.57 ms +4.43% -4.37%	455.45 ms +2.39% -6.2%	-2.17%
listViewOpen	74.99 ms +0.63% -5.2%	76.05 ms +1.51% -3.87%	-1.39%
inserterOpen	39.47 ms +10.87% -5.22%	38.82 ms +6.11% -5.07%	1.67%
inserterHover	12.88 ms +12.97% -5.9%	12.89 ms +5.12% -5.04%	-0.08%
inserterSearch	9.27 ms +2.16% -4.42%	8.89 ms +3.94% -8.21%	4.27%
loadPatterns	688.78 ms +6.92% -3.1%	659.13 ms +3.75% -3.9%	4.5%
wpTotal	418.37 ms +2.22% -6.15%	397.89 ms +8.86% -4.48%	5.15%
wpMemoryUsage	13.24 MB +0% -0%	13.20 MB +0% -0%	0.28%
wpDbQueries	54 +0% -1.85%	53.5 +0.93% -0.93%	0.93%

site-editor

Metric	e0c3dd1	trunk	% Change
serverResponse	250.08 ms +2.54% -8.04%	252.53 ms +7.9% -3.65%	-0.97%
firstPaint	163.62 ms +86.11% -9.62%	205.5 ms +15.71% -17.66%	-20.38%
domContentLoaded	701.7 ms +1.67% -1.98%	748.51 ms +0.91% -1.02%	-6.25%
loaded	702.99 ms +1.61% -2.04%	749.51 ms +0.9% -1.01%	-6.21%
firstContentfulPaint	303.58 ms +2.32% -1.51%	327.69 ms +3.46% -2.03%	-7.36%
firstBlock	2582.15 ms +1.86% -3.04%	2676.36 ms +0.66% -0.76%	-3.52%
type	12.67 ms +3.31% -1.1%	14.31 ms +7.41% -2.1%	-11.46%
navigate	91.83 ms +5.19% -22.26%	89.77 ms +26.35% -3.19%	2.29%
loadPatterns	925.27 ms +10.42% -8.81%	1021.2 ms +18.44% -12.33%	-9.39%
loadPages	951.63 ms +9.02% -1.9%	954.12 ms +2.55% -1.89%	-0.26%
wpTotal	243.66 ms +2.66% -8.27%	246.03 ms +8.08% -3.81%	-0.96%
wpMemoryUsage	12.27 MB +0% -0%	12.23 MB +0% -0%	0.3%
wpDbQueries	44 +0% -2.27%	44 +0% -2.27%	0%

_{7493bcc Run}

🏁 Flaky tests

Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

refuses the drop and uploads nothing in /test/e2e/specs/editor/various/single-file-placeholder-drop.spec.js, passed after 1 failed attempt.

Error: expect(received).toHaveLength(expected)

Expected length: 0
Received length: 2
Received array:  [{"_links": {"about": [{"href": "http://localhost:8889/wp-json/wp/v2/types/attachment"}], "author": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/users/1"}], "collection": [{"href": "http://localhost:8889/wp-json/wp/v2/media"}], "curies": [{"href": "https://api.w.org/{rel}", "name": "wp", "templated": true}], "replies": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/comments?post=264"}], "self": [{"href": "http://localhost:8889/wp-json/wp/v2/media/264", "targetHints": {"allow": ["GET", "POST", "PUT", "PATCH", "DELETE"]}}], "wp:attached-to": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/posts/262", "id": 262, "post_type": "post"}]}, "alt_text": "", "author": 1, "caption": {"rendered": ""}, "class_list": ["post-264", "attachment", "type-attachment", "status-inherit", "hentry", "entry"], "comment_status": "open", "date": "2026-10-09T08:07:16", "date_gmt": "2026-10-09T08:07:16", "description": {"rendered": "<p class=\"attachment\"><a href='http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK-1.png'><img loading=\"lazy\" decoding=\"async\" width=\"10\" height=\"10\" src=\"http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK-1.png\" class=\"attachment-medium size-medium\" alt=\"\" style=\"width:100%;height:100%;max-width:10px;\" /></a></p>
"}, "featured_media": 0, "filename": "10x10_e2e_test_image_z9T8jK-1.png", "filesize": 80, "guid": {"rendered": "http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK-1.png"}, "id": 264, "link": "http://localhost:8889/?attachment_id=264", "media_details": {"file": "2026/10/10x10_e2e_test_image_z9T8jK-1.png", "filesize": 80, "height": 10, "image_meta": {"alt": "", "aperture": "0", "camera": "", "caption": "", "copyright": "", "created_timestamp": "0", "credit": "", "focal_length": "0", "iso": "0", "keywords": [], "orientation": "0", "shutter_speed": "0", "title": ""}, "sizes": {}, "width": 10}, "media_type": "image", "meta": [], "mime_type": "image/png", "modified": "2026-10-09T08:07:16", "modified_gmt": "2026-10-09T08:07:16", "ping_status": "closed", "post": 262, "slug": "10x10_e2e_test_image_z9t8jk-2", "source_url": "http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK-1.png", "status": "inherit", "template": "", "title": {"rendered": "10x10_e2e_test_image_z9T8jK"}, "type": "attachment"}, {"_links": {"about": [{"href": "http://localhost:8889/wp-json/wp/v2/types/attachment"}], "author": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/users/1"}], "collection": [{"href": "http://localhost:8889/wp-json/wp/v2/media"}], "curies": [{"href": "https://api.w.org/{rel}", "name": "wp", "templated": true}], "replies": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/comments?post=263"}], "self": [{"href": "http://localhost:8889/wp-json/wp/v2/media/263", "targetHints": {"allow": ["GET", "POST", "PUT", "PATCH", "DELETE"]}}], "wp:attached-to": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/posts/262", "id": 262, "post_type": "post"}]}, "alt_text": "", "author": 1, "caption": {"rendered": ""}, "class_list": ["post-263", "attachment", "type-attachment", "status-inherit", "hentry", "entry"], "comment_status": "open", "date": "2026-10-09T08:07:16", "date_gmt": "2026-10-09T08:07:16", "description": {"rendered": "<p class=\"attachment\"><a href='http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK.png'><img loading=\"lazy\" decoding=\"async\" width=\"10\" height=\"10\" src=\"http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK.png\" class=\"attachment-medium size-medium\" alt=\"\" style=\"width:100%;height:100%;max-width:10px;\" /></a></p>
"}, "featured_media": 0, "filename": "10x10_e2e_test_image_z9T8jK.png", "filesize": 80, "guid": {"rendered": "http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK.png"}, "id": 263, "link": "http://localhost:8889/?attachment_id=263", "media_details": {"file": "2026/10/10x10_e2e_test_image_z9T8jK.png", "filesize": 80, "height": 10, "image_meta": {"alt": "", "aperture": "0", "camera": "", "caption": "", "copyright": "", "created_timestamp": "0", "credit": "", "focal_length": "0", "iso": "0", "keywords": [], "orientation": "0", "shutter_speed": "0", "title": ""}, "sizes": {}, "width": 10}, "media_type": "image", "meta": [], "mime_type": "image/png", "modified": "2026-10-09T08:07:16", "modified_gmt": "2026-10-09T08:07:16", "ping_status": "closed", "post": 262, "slug": "10x10_e2e_test_image_z9t8jk", "source_url": "http://localhost:8889/wp-content/uploads/2026/10/10x10_e2e_test_image_z9T8jK.png", "status": "inherit", "template": "", "title": {"rendered": "10x10_e2e_test_image_z9T8jK"}, "type": "attachment"}]
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/single-file-placeholder-drop.spec.js:71:45

should insert media, convert to blocks, and undo in one step in /test/e2e/specs/editor/blocks/classic.spec.js, passed after 1 failed attempt.

Error: expect(locator).toBeChecked() failed

Locator: getByRole('checkbox', { name: '80f68601-24a0-4603-b64b-8b5d7a327b75' })
Expected: checked
Error: strict mode violation: getByRole('checkbox', { name: '80f68601-24a0-4603-b64b-8b5d7a327b75' }) resolved to 2 elements:
    1) <li tabindex="0" data-id="28" role="checkbox" aria-checked="true" class="attachment details selected save-ready" aria-label="80f68601-24a0-4603-b64b-8b5d7a327b75">…</li> aka getByRole('checkbox', { name: '80f68601-24a0-4603-b64b-' }).first()
    2) <li tabindex="0" data-id="28" role="checkbox" aria-checked="false" class="attachment save-ready" aria-label="80f68601-24a0-4603-b64b-8b5d7a327b75">…</li> aka getByRole('checkbox', { name: '80f68601-24a0-4603-b64b-' }).nth(1)

Call log:
  - Expect "toBeChecked" getByRole('checkbox', { name: '80f68601-24a0-4603-b64b-8b5d7a327b75' }) with timeout 30000ms
  - waiting for getByRole('checkbox', { name: '80f68601-24a0-4603-b64b-8b5d7a327b75' })
    - locator resolved to <li tabindex="0" data-id="28" role="checkbox" aria-checked="false" class="attachment save-ready" aria-label="80f68601-24a0-4603-b64b-8b5d7a327b75">…</li>
    - unexpected value "unchecked"

    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/classic.spec.js:69:5

_{7493bcc Run}

[Mamaduka]

Looks good. Thanks, Nik!

[annezazu]

Thanks for the quick fix!