Skip to content

BlockPatternsList: Clean up focus styles by using design system mixin - #85446

Open
yashjawale wants to merge 2 commits into
WordPress:trunkfrom
yashjawale:fix/focus-ring-pattern-previews-80138
Open

yashjawale wants to merge 2 commits into
WordPress:trunkfrom
yashjawale:fix/focus-ring-pattern-previews-80138

Conversation

@yashjawale

@yashjawale yashjawale commented Oct 23, 2026 •

Copy link
Copy Markdown
Contributor

What?

Part of #80138
This PR modifies styling of block patterns list in editor to use design system's focus ring instead of individual rules for outline.

Why?

Cleans up styles by using the mixin directly instead of individual rules for focus outline.

How?

Replaces individual rules by outset-ring__focus() mixin.
Reverses the outline offset to pull in the ring inwards.

Testing Instructions

  1. Open any post or page
  2. Click on + in top left to open insert panel
  3. Click on Patterns tab & pick any category
  4. Tab to focus on any pattern preview & notice the ouline

Screenshots or screencast

Before After
Screenshot 2026-10-23 at 2 10 40 PM Screenshot 2026-10-23 at 2 14 42 PM

Use of AI Tools

None

@github-actions github-actions Bot added the [Package] Block editor /packages/block-editor label Oct 23, 2026
@github-actions

github-actions Bot commented Oct 23, 2026 •

Copy link
Copy Markdown

🤖 PR meta 🤖

Preview in WordPress Playground

🎉 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: yashjawale <yashjawale@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.

🏷️ Labels

This pull request needs exactly one label indicating its type, and has 0.

  • Required: any label starting with [Type].
  • Found: none.

Read more about Type labels in Gutenberg. If you cannot add labels yourself, a reviewer can do it for you.

@yashjawale
yashjawale marked this pull request as ready for review October 23, 2026 08:46
@yashjawale
yashjawale requested a review from ellatrix as a code owner October 23, 2026 08:46

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

Labels

[Package] Block editor /packages/block-editor

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant