Block Directory: Standardize downloadable block focus indicators by himanshupathak95 · Pull Request #85307 · WordPress/gutenberg

himanshupathak95 · 2026-10-21T17:07:30Z

What?

Part of #80138. Use the design system focus outline for downloadable-block cards in the inserter.

Why?

These cards still use the old shadow for keyboard focus. Their focus ring can also be clipped when arrow-key navigation scrolls a card against the bottom edge.

How?

Use outset-ring__focus() for keyboard focus and a subtle neutral background tint on hover. Remove the old hover shadow and its transition, use the shared small corner radius, and keep the scroll margin that prevents the focus outline from being clipped. Disabled cards do not get the hover tint.

Testing Instructions

Open a new post in the Visual editor as an administrator with permission to install plugins.
Open the block inserter and search for map. Wait for “Available to install”. This needs access to WordPress.org and a block that is not already installed.
Hover over a downloadable block card. It should show a subtle background tint, without a shadow. Move the pointer away and check that the tint disappears.
Check the keyboard steps below. Do not activate a card, since that installs the block.
Repeat with forced colors enabled. The focus outline should remain visible.

Testing Instructions for Keyboard

Focus the inserter search field and enter map.
Press Tab to reach Reset search, then Tab again to reach the first downloadable-block card.
Check that one outline surrounds the card, with a small gap.
Use the Down Arrow and Up Arrow to move through all results. Check that the outline remains visible at the bottom edge when the panel scrolls.
Move the pointer over the focused card. It should show the hover tint and keep one focus outline, without an extra shadow.

Screenshots or screencast

Before

After

Screen.Recording.2026-10-22.at.12.13.26.mov

Use of AI Tools

Implemented with assistance of Codex (Astra 6)

@coderabbitai review

github-actions · 2026-10-21T17:07:59Z

🤖 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: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: ciampo <mciampini@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.

coderabbitai · 2026-10-21T17:28:17Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: WordPress/gutenberg/.coderabbit.yaml
Review profile: CHILL
Plan: Advanced
Run ID: 7e186a64-339b-4bff-9147-523187526c8a

📥 Commits

Reviewing files that changed from the base of the PR and between b243d39 and efae034.

📒 Files selected for processing: 2

packages/block-directory/CHANGELOG.md
packages/block-directory/src/components/downloadable-block-list-item/style.scss

🚧 Files skipped from review as they are similar to previous changes: 2

packages/block-directory/CHANGELOG.md
packages/block-directory/src/components/downloadable-block-list-item/style.scss

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 8 remain after this review.

📝 Summary

Summary by CodeRabbit

Accessibility
- Improved keyboard focus visibility for downloadable block cards with a clear outline.
- Kept focused cards visible when keyboard navigation scrolls them into view.
Style
- Added a subtle background tint when hovering over enabled cards.
- Updated card corners to match the design system.

Downloadable block cards now use updated focus-visible and hover styles, a small border radius, and scroll spacing. The changelog records the keyboard-focus outline and hover background tint.

Changes: Downloadable block keyboard focus

Layer / File(s)	Summary
Focus styling and changelog `packages/block-directory/src/components/downloadable-block-list-item/style.scss`, `packages/block-directory/CHANGELOG.md`	List items use a small border radius and scroll margin. Hover styling changes the background only when the item is not aria-disabled. Focus-visible styling uses the outset focus ring. The changelog records the enhancement.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Bug fix

Suggested reviewers: ciampo

Merge Risk: ⚪ Minimal · up to efae0

The focus and hover styling changes have no identified issue that should delay merging.

Pre-merge checks: 5

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main change: standardizing focus indicators for downloadable blocks in the Block Directory.
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Description check		The pull request description directly explains the downloadable-block card focus, hover, border-radius, and scroll-margin changes documented in the changeset.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (2 skipped: 2 unsupported.)

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

… also hovered

…adius

ciampo

LGTM 🚀

) * Block Directory: Standardize focus rings on downloadable blocks * Block Directory: Document the downloadable block focus update * Block Directory: Suppress the hover box-shadow when a focused item is also hovered * Block Directory: Add PR reference to changelog * Block Directory: Use subtle background tint on hover and add border-radius --- Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>

github-actions · 2026-10-22T15:41:41Z

I just cherry-picked this PR to the wp/7.2 branch to get it included in the next release: 0741b7f

github-actions · 2026-10-22T15:43:05Z

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

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

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

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

# Cherry-pick the commit.
git cherry-pick f1a9d5bf51e084a5635e93065228c7b68afa0507

# 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.2 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.

ciampo · 2026-10-22T15:43:51Z

@himanshupathak95 , can you please open a new PR to manually backport this change to the 7.2 branch? (cc @t-hamano )

himanshupathak95 · 2026-10-22T16:02:52Z

@himanshupathak95 , can you please open a new PR to manually backport this change to the 7.2 branch? (cc @t-hamano )

Yes, I can. Coming right up.

t-hamano · 2026-10-22T16:04:42Z

Actually, the backport succeeded. Adding two labels at once probably fires two events, so the workflow ran twice. I haven't looked into it in detail, but we probably need to adjust the workflow.

ciampo · 2026-10-22T16:05:31Z

Oh, I missed the earlier message 🤦 Sorry for the ping, you both 🙏

himanshupathak95 added the [Type] Enhancement A suggestion for improvement. label Oct 21, 2026

himanshupathak95 marked this pull request as ready for review October 21, 2026 17:24

ciampo assigned himanshupathak95 Oct 21, 2026

ciampo requested a review from a team October 21, 2026 22:11

ciampo reviewed Oct 21, 2026

View reviewed changes

Comment thread packages/block-directory/src/components/downloadable-block-list-item/style.scss Outdated

himanshupathak95 added 5 commits October 22, 2026 11:01

Block Directory: Standardize focus rings on downloadable blocks

a3a7979

Block Directory: Document the downloadable block focus update

82ebdea

Block Directory: Suppress the hover box-shadow when a focused item is…

f46901f

… also hovered

Block Directory: Add PR reference to changelog

d4136d8

Block Directory: Use subtle background tint on hover and add border-r…

efae034

…adius

himanshupathak95 force-pushed the fix/80138-block-directory-focus-ring branch from b243d39 to efae034 Compare October 22, 2026 05:34

ciampo added the [Feature] Block Directory Related to the Block Directory, a repository of block plugins label Oct 22, 2026

ciampo approved these changes Oct 22, 2026

View reviewed changes

ciampo merged commit f1a9d5b into WordPress:trunk Oct 22, 2026
101 checks passed

ciampo added Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) Backport to WP 7.2 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta labels Oct 22, 2026

github-actions Bot added this to the Gutenberg 24.4 milestone Oct 22, 2026

github-actions Bot removed the Backport to WP 7.2 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 22, 2026

github-actions Bot added the Backported to WP Core Pull request that has been successfully merged into WP Core label Oct 22, 2026

Navigation Menu

Repository navigation

Block Directory: Standardize downloadable block focus indicators - #85307

Block Directory: Standardize downloadable block focus indicators#85307
ciampo merged 5 commits into
WordPress:trunkfrom
himanshupathak95:fix/80138-block-directory-focus-ring

himanshupathak95 commented Oct 21, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 21, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 21, 2026 •

edited

Loading

Summary by CodeRabbit

Uh oh!

Uh oh!

ciampo left a comment

Uh oh!

Uh oh!

github-actions Bot commented Oct 22, 2026

Uh oh!

github-actions Bot commented Oct 22, 2026

Uh oh!

ciampo commented Oct 22, 2026

Uh oh!

himanshupathak95 commented Oct 22, 2026

Uh oh!

t-hamano commented Oct 22, 2026

Uh oh!

ciampo commented Oct 22, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

himanshupathak95 commented Oct 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions for Keyboard

Screenshots or screencast

Before

After

Use of AI Tools

Uh oh!

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

Uh oh!

🤖 PR meta 🤖

🎉 Props

Uh oh!

coderabbitai Bot commented Oct 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

Uh oh!

ciampo left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Oct 22, 2026

Uh oh!

github-actions Bot commented Oct 22, 2026

Uh oh!

ciampo commented Oct 22, 2026

Uh oh!

himanshupathak95 commented Oct 22, 2026

Uh oh!

t-hamano commented Oct 22, 2026

Uh oh!

ciampo commented Oct 22, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

himanshupathak95 commented Oct 21, 2026 •

edited

Loading

github-actions Bot commented Oct 21, 2026 •

edited

Loading

coderabbitai Bot commented Oct 21, 2026 •

edited

Loading