Interface: Increase footer breadcrumb height to prevent focus ring clipping by t-hamano · Pull Request #81145 · WordPress/gutenberg

t-hamano · 2026-08-04T10:18:16Z

What?

Prevents the focus ring from being clipped in the footer block breadcrumb.

Before

After

Why?

The focus ring changed from a box-shadow-based style to an outline-based one. Because outline-offset renders the ring slightly outside the element, it no longer fits within the 24px footer height.

How?

Increases the breadcrumb height from 24px to 32px.

I think this is acceptable, but if it isn't, we need to consider another approach — for example, a negative outline-offset. That would, however, remove the rounded corners of the focus ring.

Testing Instructions

Open the editor and create nested blocks.
Focus an item in the footer breadcrumb.
Confirm the focus ring is fully visible and not clipped.

Use of AI Tools

Claude Code was used to apply the style changes and draft this description. All changes were reviewed by me.

Change the interface skeleton footer height from `$button-size-small` (24px) to `$button-size-compact` (32px), and update the matching `.has-footer` padding offset. Also bump the snackbar container's bottom offset from 24px to 32px so snackbars keep clearing the footer. Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2026-08-04T10:24:10Z

Size Change: +334 B (0%)

Total Size: 7.81 MB

📦 View Changed

Filename	Size	Change
`build/modules/boot/index.min.js`	49.4 kB	+15 B (+0.03%)
`build/styles/edit-post/style-rtl.css`	3.32 kB	+8 B (+0.24%)
`build/styles/edit-post/style-rtl.min.css`	1.97 kB	+15 B (+0.77%)
`build/styles/edit-post/style.css`	3.32 kB	+7 B (+0.21%)
`build/styles/edit-post/style.min.css`	1.97 kB	+16 B (+0.82%)
`build/styles/edit-site/style-rtl.css`	21.4 kB	+7 B (+0.03%)
`build/styles/edit-site/style-rtl.min.css`	17.5 kB	+7 B (+0.04%)
`build/styles/edit-site/style.css`	21.4 kB	+7 B (+0.03%)
`build/styles/edit-site/style.min.css`	17.5 kB	+7 B (+0.04%)
`build/styles/edit-widgets/style-rtl.css`	5.04 kB	+24 B (+0.48%)
`build/styles/edit-widgets/style-rtl.min.css`	3.61 kB	+29 B (+0.81%)
`build/styles/edit-widgets/style.css`	5.03 kB	+23 B (+0.46%)
`build/styles/edit-widgets/style.min.css`	3.61 kB	+31 B (+0.87%)
`build/styles/editor/style-rtl.css`	31.4 kB	+14 B (+0.04%)
`build/styles/editor/style-rtl.min.css`	26.7 kB	+22 B (+0.08%)
`build/styles/editor/style.css`	31.5 kB	+15 B (+0.05%)
`build/styles/editor/style.min.css`	26.7 kB	+22 B (+0.08%)
`build/styles/media-utils/style-rtl.css`	2.29 kB	+15 B (+0.66%)
`build/styles/media-utils/style-rtl.min.css`	1.27 kB	+17 B (+1.36%)
`build/styles/media-utils/style.css`	2.29 kB	+16 B (+0.71%)
`build/styles/media-utils/style.min.css`	1.27 kB	+17 B (+1.36%)

_{compressed-size-action}

github-actions · 2026-08-04T10:26:32Z

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 props-bot label.

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: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

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

jasmussen · 2026-08-04T10:33:45Z

The code looks good, well put together. However the footer is intentionally very small, so although I wouldn't want to block this from landing, I'm also not convinced the correct solution is to make the entire bar larger. Anecdotally I've heard feedback from users that they find the breadcrumbs bar annoying and confusing, they are usually happy when I tell them they can turn it off in Preferences.

Can the buttons not be small?

jasmussen · 2026-08-04T10:36:05Z

Correction, it might already be small, and stay small, and you may be increasing the size to avoid the crop of the focus style. This will not be the only context in which we see close-to-the-edge buttons (of any size) have their focus rings cut off. So I think the outline style change could need some context here. @mirka any thoughts?

t-hamano · 2026-08-04T10:43:05Z

Thanks for the PR!

This will not be the only context in which we see close-to-the-edge buttons (of any size) have their focus rings cut off.

That's right. We have experience fixing similar issues in the past.

Fix clipped focus ring on the document bar #80084

In another PR, a negative outline-offset was exceptionally applied to prevent the focus ring from expanding outwards.

Panel: fix focus style for toggle button #80064

mirka

This will not be the only context in which we see close-to-the-edge buttons (of any size) have their focus rings cut off. So I think the outline style change could need some context here. @mirka any thoughts?

Right. I think increasing the surrounding space like this is generally going to be the way to address this systematically. It's not like a focus ring that's perfectly flush with the outer container is going to look nice anyway. Interactive elements need a bit of breathing room.

mirka · 2026-08-04T12:31:49Z

 @mixin snackbar-container() {
 	position: fixed;
-	bottom: 24px;
+	bottom: 32px;


These might be better kept in sync if we used --wpds-dimension-size-md?

Fixed in 771e23b

mirka · 2026-08-04T12:33:14Z

 		display: flex;
 		background: $white;
-		height: $button-size-small;
+		height: $button-size-compact;


Since this is not really tied to a compact size button, we should probably use --wpds-dimension-size-md, or at least some kind of meaningful math like $button-size-small + --wpds-dimension-padding-sm.

Fixed in ac73dd2

Keeps the snackbar container's bottom offset in sync with the footer height by referencing the design token instead of a hardcoded 32px. Co-Authored-By: Claude <noreply@anthropic.com>

The footer is not tied to a compact-size button, so reference the design token directly instead of $button-size-compact. Co-Authored-By: Claude <noreply@anthropic.com>

github-actions · 2026-08-04T13:38:25Z

There was a conflict while trying to cherry-pick the commit to the wp/7.1 branch. Please resolve the conflict manually and create a PR to the wp/7.1 branch.

PRs to wp/7.1 are similar to PRs to trunk, but you should base your PR on the wp/7.1 branch instead of trunk.

# Checkout the wp/7.1 branch instead of trunk.
git checkout wp/7.1

# Create a new branch for your PR.
git checkout -b my-branch

# Cherry-pick the commit.
git cherry-pick 9043ec14b2064c6db5b604e4fdddc71bbf854e30

# Check which files have conflicts.
git status

# Resolve the conflict...
# Add the resolved files to the staging area.
git status
git add .
git cherry-pick --continue

# Push the branch to the repository
git push origin my-branch

# Create a PR and set the base to the wp/7.1 branch.
# See https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request.

…ipping (#81145) * Interface: Increase footer height to 32px Change the interface skeleton footer height from `$button-size-small` (24px) to `$button-size-compact` (32px), and update the matching `.has-footer` padding offset. Also bump the snackbar container's bottom offset from 24px to 32px so snackbars keep clearing the footer. Co-Authored-By: Claude <noreply@anthropic.com> * Base Styles: Use --wpds-dimension-size-md for snackbar bottom offset Keeps the snackbar container's bottom offset in sync with the footer height by referencing the design token instead of a hardcoded 32px. Co-Authored-By: Claude <noreply@anthropic.com> * Interface: Use --wpds-dimension-size-md for the footer height The footer is not tied to a compact-size button, so reference the design token directly instead of $button-size-compact. Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>

t-hamano · 2026-08-04T14:27:49Z

Backported: #81156

…ipping (#81145) * Interface: Increase footer height to 32px Change the interface skeleton footer height from `$button-size-small` (24px) to `$button-size-compact` (32px), and update the matching `.has-footer` padding offset. Also bump the snackbar container's bottom offset from 24px to 32px so snackbars keep clearing the footer. Co-Authored-By: Claude <noreply@anthropic.com> * Base Styles: Use --wpds-dimension-size-md for snackbar bottom offset Keeps the snackbar container's bottom offset in sync with the footer height by referencing the design token instead of a hardcoded 32px. Co-Authored-By: Claude <noreply@anthropic.com> * Interface: Use --wpds-dimension-size-md for the footer height The footer is not tied to a compact-size button, so reference the design token directly instead of $button-size-compact. Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: jasmussen <joen@git.wordpress.org>

github-actions Bot added [Package] Interface /packages/interface [Package] Base styles /packages/base-styles labels Aug 4, 2026

t-hamano force-pushed the update/interface-footer-height branch from 647d640 to 3367b80 Compare August 4, 2026 10:18

t-hamano added [Type] Bug An existing feature does not function as intended Needs Design Feedback Needs general design feedback. labels Aug 4, 2026

t-hamano requested review from a team August 4, 2026 10:23

t-hamano self-assigned this Aug 4, 2026

t-hamano added the Backport to WP 7.1 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Aug 4, 2026

t-hamano marked this pull request as ready for review August 4, 2026 10:26

t-hamano added this to WordPress 7.1 Editor Tasks Aug 4, 2026

github-project-automation Bot moved this to 🔎 Needs Review in WordPress 7.1 Editor Tasks Aug 4, 2026

mirka approved these changes Aug 4, 2026

View reviewed changes

t-hamano and others added 2 commits August 4, 2026 21:54

Base Styles: Use --wpds-dimension-size-md for snackbar bottom offset

771e23b

Keeps the snackbar container's bottom offset in sync with the footer height by referencing the design token instead of a hardcoded 32px. Co-Authored-By: Claude <noreply@anthropic.com>

Interface: Use --wpds-dimension-size-md for the footer height

ac73dd2

The footer is not tied to a compact-size button, so reference the design token directly instead of $button-size-compact. Co-Authored-By: Claude <noreply@anthropic.com>

t-hamano merged commit 9043ec1 into trunk Aug 4, 2026
61 of 63 checks passed

t-hamano deleted the update/interface-footer-height branch August 4, 2026 13:36

github-project-automation Bot moved this from 🔎 Needs Review to ✅ Done in WordPress 7.1 Editor Tasks Aug 4, 2026

github-actions Bot added this to the Gutenberg 23.8 milestone Aug 4, 2026

t-hamano mentioned this pull request Aug 4, 2026

Interface: Increase footer breadcrumb height to prevent focus ring clipping #81156

Merged

t-hamano removed the Backport to WP 7.1 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Aug 4, 2026

t-hamano added the Backported to WP Core Pull request that has been successfully merged into WP Core label Aug 4, 2026

ciampo mentioned this pull request Aug 7, 2026

Package changelogs: Improve consistency and prevent future drift #81341

Open

35 tasks

Navigation Menu

Uh oh!

Interface: Increase footer breadcrumb height to prevent focus ring clipping - #81145

Interface: Increase footer breadcrumb height to prevent focus ring clipping#81145
t-hamano merged 3 commits into
trunkfrom
update/interface-footer-height

t-hamano commented Aug 4, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 4, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 4, 2026 •

edited

Loading

Uh oh!

jasmussen commented Aug 4, 2026

Uh oh!

jasmussen commented Aug 4, 2026

Uh oh!

t-hamano commented Aug 4, 2026

Uh oh!

mirka left a comment

Uh oh!

mirka Aug 4, 2026

Uh oh!

t-hamano Aug 4, 2026

Uh oh!

mirka Aug 4, 2026

Uh oh!

t-hamano Aug 4, 2026

Uh oh!

Uh oh!

github-actions Bot commented Aug 4, 2026

Uh oh!

t-hamano commented Aug 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

t-hamano commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Before

After

Why?

How?

Testing Instructions

Use of AI Tools

Uh oh!

github-actions Bot commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jasmussen commented Aug 4, 2026

Uh oh!

jasmussen commented Aug 4, 2026

Uh oh!

t-hamano commented Aug 4, 2026

Uh oh!

mirka left a comment

Choose a reason for hiding this comment

Uh oh!

mirka Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

t-hamano Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

mirka Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

t-hamano Aug 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Aug 4, 2026

Uh oh!

t-hamano commented Aug 4, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

t-hamano commented Aug 4, 2026 •

edited

Loading

github-actions Bot commented Aug 4, 2026 •

edited

Loading

github-actions Bot commented Aug 4, 2026 •

edited

Loading