Skip to content

CreateTemplatePartModal: Use design system focus ring - #85447

Open
yashjawale wants to merge 2 commits into
WordPress:trunkfrom
yashjawale:feat/focus-ring-template-area-part-area-radio-80138
Open

yashjawale wants to merge 2 commits into
WordPress:trunkfrom
yashjawale:feat/focus-ring-template-area-part-area-radio-80138

Conversation

@yashjawale

Copy link
Copy Markdown
Contributor

What?

Part of #80138

Updates the area selection in create template part modal to use design system's focus ring.

Why?

In the new design system, the button's focus ring is represented by an outline. Additionally, the focus ring for the components/Button component is now represented by an outline instead of a box-shadow.

There are still many legacy box-shadow-based focus styles present throughout the Gutenberg codebase. This PR changes the styling of CreateTemplatePartModal towards the same direction.

How?

Replace box-shadow based rules for radio button to use the @include outset-ring__focus() mixin instead.

Pull the ring inwards by setting outline-offset to 0 to match the previous appearance.

Testing Instructions

  1. Navigate to /wp-admin/site-editor.php?p=%2Fpattern
  2. Click on Add Pattern -> Add Template Part
  3. On the popup, tab to focus on Area options
  4. Notice the focus ring

Screenshots or screencast

Before After
Screenshot 2026-10-23 at 1 17 01 PM Screenshot 2026-10-23 at 1 23 40 PM

Use of AI Tools

None

@github-actions github-actions Bot added the [Package] Patterns /packages/patterns 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

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] Patterns /packages/patterns

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant