Skip to content

Widget Dashboard: give the footer strip one height - #85237

Draft
retrofox wants to merge 3 commits into
trunkfrom
fix/widget-footer-height
Draft

Widget Dashboard: give the footer strip one height#85237
retrofox wants to merge 3 commits into
trunkfrom
fix/widget-footer-height

Conversation

@retrofox

@retrofox retrofox commented Oct 20, 2026

Copy link
Copy Markdown
Contributor

What

Fixes #85231.

The widget footer strip now reserves one height, the text line plus its padding, whatever affordances it holds. A compact control sits centered in it, so tiles side by side keep their dividers level, and the body keeps its size when a widget declares an action at runtime.

Why

The strip took its height from its content: a text link is a 20px line and a compact control is 32px, so a footer with an icon-only link or a callback button was 12px taller than a footer of links. A runtime action arriving once the data settled grew the strip and shrank the body under the reader.

How

packages/widget-dashboard/src/components/widget-footer/widget-footer.module.css

The strip trades its block padding for a min-block-size computed from the tokens, --wpds-typography-line-height-sm plus twice --wpds-dimension-padding-md, and the row's align="center" centers whatever it holds. A minimum rather than a fixed size keeps a wrapped row of links from overflowing the strip.

packages/widget-dashboard/src/test/widget-footer.browser.test.tsx

A browser test measures three strips, text links, a text link beside an icon-only link, and callback buttons, and expects one height; it then rerenders a strip with a compact action arriving and expects the height unchanged. The package declares @wordpress/theme as a dev dependency so the test can load the design tokens.

Story and docs

The Playground gains a Footer story with the three strips side by side. The RuntimeActions story and the chrome anatomy doc note that the strip keeps its height.

Testing

  1. Run the browser test:
npm run test:unit -- packages/widget-dashboard/src/test/widget-footer.browser.test.tsx
  1. Run Storybook:
npm run storybook:dev

  1. Open Widgets/Dashboard/Playground → Footer: the three dividers sit at the same height and the bodies share one size. Run "Refresh" or the export button: the button disables while the promise settles and the strip does not move.

  2. Open RuntimeActions: once the check settles, "Review 3 items" and the download button arrive without growing the strip or shrinking the body.

@retrofox
fix widget footer height across affordances
59f5e20 
reserve one strip height; the browser test loads the theme tokens
@retrofox
add footer story and strip height note
84178fb
@retrofox retrofox added [Type] Bug An existing feature does not function as intended [Package] Widget Dashboard /packages/widget-dashboard labels Oct 20, 2026
@retrofox retrofox self-assigned this Oct 20, 2026
@github-actions

github-actions Bot commented Oct 20, 2026 •
edited
Loading

Copy link
Copy Markdown

🤖 PR meta 🤖

Preview in WordPress Playground

📦 Bundle size

Size Change: 0 B

Total Size: 9.05 MB

faf3cde Run

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric a84f23a trunk % Change
timeToFirstByte 53.4 ms +2.53% -2.81% 52.65 ms +6.55% -1.9% 1.42%
largestContentfulPaint 88 ms +6.82% -0% 86 ms +9.3% -2.33% 2.33%
lcpMinusTtfb 35.05 ms +9.42% -3.28% 32.95 ms +22.31% -3.64% 6.37%
wpBeforeTemplate 28.16 ms +2.24% -1.21% 27.9 ms +8.03% -1.11% 0.93%
wpTemplate 20.78 ms +4.09% -3.85% 20.74 ms +3.57% -4.19% 0.19%
wpTotal 49.6 ms +2.64% -2.52% 49 ms +6.86% -2.27% 1.22%
wpMemoryUsage 7.64 MB +0% -0% 7.61 MB +0% -0% 0.46%
wpDbQueries 16 +0% -0% 16 +0% -0% 0%

front-end-classic-theme

Metric a84f23a trunk % Change
timeToFirstByte 45.1 ms +5.88% -1.22% 44.6 ms +4.93% -0.78% 1.12%
largestContentfulPaint 100 ms +4% -0% 100 ms +2% -4% 0%
lcpMinusTtfb 55.45 ms +0.72% -0.99% 52 ms +7.21% -1.15% 6.63%
wpBeforeTemplate 26.32 ms +8.55% -2.2% 25.92 ms +4.55% -0.96% 1.54%
wpTemplate 15.87 ms +1.39% -1.39% 15.68 ms +2.68% -1.53% 1.21%
wpTotal 42.03 ms +5.9% -1% 41.58 ms +5.39% -0.82% 1.08%
wpMemoryUsage 6.34 MB +0% -0% 6.30 MB +0% -0% 0.57%
wpDbQueries 13 +0% -0% 13 +0% -0% 0%

media-processing

Metric a84f23a trunk % Change
mediaProcessingJpeg 404.88 ms +0.64% -1% 402.89 ms +0.27% -0.06% 0.49%
mediaProcessingAvif 6081.79 ms +0.28% -0.09% 6062.15 ms +0.1% -0.17% 0.32%
mediaProcessingJpegToAvif 4207.4 ms +0.15% -0.51% 4195.64 ms +0.15% -0.24% 0.28%

media-upload

Metric a84f23a trunk % Change
jpegUploadProcessing 1427.69 ms +38.61% -0.9% 1433.64 ms +0.96% -1.11% -0.42%
pngUploadProcessing 213.68 ms +4.39% -14.97% 177.29 ms +5.83% -2.11% 20.53%
largeJpegUploadProcessing 1411.72 ms +1.86% -0.28% 1422.16 ms +0.92% -0.22% -0.73%
multipleImageUploadProcessing 1582.93 ms +27.7% -1.01% 1582.37 ms +7.94% -0.43% 0.04%

post-editor

Metric a84f23a trunk % Change
serverResponse 297.59 ms +0.96% -7.17% 276.6 ms +4.61% -5.65% 7.59%
firstPaint 281.29 ms +28.23% -32.66% 359.98 ms +3.49% -1.41% -21.86%
domContentLoaded 800.11 ms +3.6% -1.14% 768.42 ms +2.38% -1.64% 4.12%
loaded 801.09 ms +3.61% -1.14% 769.45 ms +2.4% -1.67% 4.11%
firstContentfulPaint 371 ms +3.5% -3.77% 359.98 ms +3.49% -1.09% 3.06%
firstBlock 2430.38 ms +3.96% -3.05% 2334.66 ms +3.49% -1.64% 4.1%
type 14.9 ms +1.88% -6.31% 15.13 ms +6.08% -4.3% -1.52%
typeWithoutInspector 15.43 ms +7.26% -3.43% 13.48 ms +5.64% -3.86% 14.47%
typeWithTopToolbar 20.46 ms +5.23% -4.64% 16.38 ms +10.99% -2.01% 24.91%
typeContainer 7.52 ms +4.12% -4.52% 7.6 ms +10.39% -6.05% -1.05%
focus 90.7 ms +2.52% -6.98% 86.2 ms +8.21% -2.95% 5.22%
firstFocus 202.63 ms +0% -0% 189.51 ms +0% -0% 6.92%
selectAll 397.9 ms +3.53% -0.8% 375.35 ms +1.6% -0.84% 6.01%
listViewOpen 57.57 ms +1.93% -9.8% 50.34 ms +12.63% -4.75% 14.36%
inserterOpen 29.87 ms +11.22% -6.9% 29.44 ms +4.28% -4.69% 1.46%
inserterHover 9.98 ms +5.71% -5.51% 9.85 ms +13.81% -7.82% 1.32%
inserterSearch 7.37 ms +4.75% -4.34% 7.42 ms +10.92% -3.5% -0.67%
loadPatterns 471.13 ms +6.07% -5.18% 451.79 ms +3.88% -3.61% 4.28%
wpTotal 289.51 ms +0.79% -7.42% 268.57 ms +4.71% -5.67% 7.8%
wpMemoryUsage 14.66 MB +0% -0% 14.63 MB +0% -0% 0.25%
wpDbQueries 55 +0% -0% 55 +0% -0% 0%

site-editor

Metric a84f23a trunk % Change
serverResponse 281.08 ms +0.9% -3.84% 263.44 ms +6.99% -5.17% 6.7%
firstPaint 185.68 ms +18.9% -7.55% 189.51 ms +21.84% -12.36% -2.02%
domContentLoaded 864.78 ms +0.89% -0.9% 853.71 ms +2.45% -2.84% 1.3%
loaded 865.82 ms +0.9% -0.91% 854.63 ms +2.47% -2.84% 1.31%
firstContentfulPaint 385.92 ms +1.32% -4.99% 369.25 ms +3.96% -3.16% 4.51%
firstBlock 3234.59 ms +0.96% -0.7% 3153.82 ms +0.51% -0.35% 2.56%
type 16.11 ms +1.92% -4.72% 16.2 ms +3.33% -3.02% -0.56%
navigate 99.63 ms +27.32% -5.44% 97.93 ms +14.47% -4.42% 1.74%
loadPatterns 1014.51 ms +13.45% -12.77% 950.32 ms +11.66% -8.1% 6.75%
loadPages 1012.22 ms +2.04% -1.05% 1015.45 ms +10.01% -1.08% -0.32%
wpTotal 273.97 ms +0.96% -4% 256.43 ms +7.17% -5.21% 6.84%
wpMemoryUsage 12.70 MB +0% -0% 12.66 MB +0% -0% 0.29%
wpDbQueries 44 +2.27% -0% 44.5 +1.12% -1.12% -1.12%

faf3cde 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.

Regression: updating a specific option will only change its value and will not corrupt others in /test/e2e/specs/editor/various/core-settings.spec.js, passed after 1 failed attempt. 
Error: expect(received).toStrictEqual(expected) // deep equality

- Expected  - 1
+ Received  + 1

  Array [
    "rewrite_rules",
-   "SERIALIZED DATA",
+   "",
  ]
    at forEach (/home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/core-settings.spec.js:46:26)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/core-settings.spec.js:43:35
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: 1
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=223"}], "self": [{"href": "http://localhost:8889/wp-json/wp/v2/media/223", "targetHints": {"allow": ["GET", "POST", "PUT", "PATCH", "DELETE"]}}], "wp:attached-to": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/posts/222", "id": 222, "post_type": "post"}]}, "alt_text": "", "author": 1, "caption": {"rendered": ""}, "class_list": ["post-223", "attachment", "type-attachment", "status-inherit", "hentry", "entry"], "comment_status": "open", "date": "2026-10-20T22:27:44", "date_gmt": "2026-10-20T22:27:44", "description": {"rendered": "<p class=\"attachment\"><a href='http://localhost:8889/wp-content/uploads/2026/10/f402e2b7-b2e9-4ca4-801d-c85a8ff9e6ca.png'><img loading=\"lazy\" decoding=\"async\" width=\"10\" height=\"10\" src=\"http://localhost:8889/wp-content/uploads/2026/10/f402e2b7-b2e9-4ca4-801d-c85a8ff9e6ca.png\" class=\"attachment-medium size-medium\" alt=\"\" style=\"width:100%;height:100%;max-width:10px;\" /></a></p>
"}, "featured_media": 0, "filename": "f402e2b7-b2e9-4ca4-801d-c85a8ff9e6ca.png", "filesize": 80, "guid": {"rendered": "http://localhost:8889/wp-content/uploads/2026/10/f402e2b7-b2e9-4ca4-801d-c85a8ff9e6ca.png"}, "id": 223, "link": "http://localhost:8889/?attachment_id=223", "media_details": {"file": "2026/10/f402e2b7-b2e9-4ca4-801d-c85a8ff9e6ca.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-20T22:27:44", "modified_gmt": "2026-10-20T22:27:44", "ping_status": "closed", "post": 222, "slug": "f402e2b7-b2e9-4ca4-801d-c85a8ff9e6ca", "source_url": "http://localhost:8889/wp-content/uploads/2026/10/f402e2b7-b2e9-4ca4-801d-c85a8ff9e6ca.png", "status": "inherit", "template": "", "title": {"rendered": "f402e2b7-b2e9-4ca4-801d-c85a8ff9e6ca"}, "type": "attachment"}]
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/single-file-placeholder-drop.spec.js:71:45
restores the blocks when a multi-selection drag is canceled in /test/e2e/specs/editor/various/draggable-blocks.spec.js, passed after 1 failed attempt. 
TypeError: Cannot read properties of null (reading 'y')
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/draggable-blocks.spec.js:824:57
    at dragSelectionBelowLanding (/home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/draggable-blocks.spec.js:823:3)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/draggable-blocks.spec.js:871:3

faf3cde Run

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@retrofox retrofox

Labels

[Package] Widget Dashboard /packages/widget-dashboard [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Widget Dashboard: the footer strip changes height with the affordances it holds

1 participant

@retrofox