Skip to content

Code editor: Show design system focus ring on the title and content fields #85468

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
R1shabh-Gupta wants to merge 2 commits into
base: trunk
Choose a base branch
from
Draft

Code editor: Show design system focus ring on the title and content fields #85468

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fd4382c
Code editor: Show design system focus ring on the title and content f…
R1shabh-Gupta Oct 23, 2026
59f0e4b
Code editor: Add changelog entry
R1shabh-Gupta Oct 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/editor/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Enhancements

- Code editor: Use the design system focus ring on the title and content fields, and remove the title's doubled focus ring ([#85468](https://github.com/WordPress/gutenberg/pull/85468)).

### Bug Fixes

- `PostTemplatePanel`, `PageTemplate`: Show the default template of classic themes as selected instead of the `Select` placeholder ([#85172](https://github.com/WordPress/gutenberg/pull/85172)).
Expand Down
12 changes: 4 additions & 8 deletions packages/editor/src/components/post-text-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,6 @@ textarea.editor-post-text-editor {
line-height: 2.4;
min-height: 200px;

@media not (prefers-reduced-motion) {
transition: border 0.1s ease-out, box-shadow 0.1s linear;
}

// Same padding as title.
padding: $grid-unit-20;
@include break-small() {
Expand All @@ -33,11 +29,11 @@ textarea.editor-post-text-editor {
}

&:focus {
border-color: var(--wp-admin-theme-color);
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@include outset-ring__focus();

// Elevate the z-index on focus so the focus style is uncropped.
position: relative;
// Neutralize wp-admin forms.css focus styles.
border-color: $gray-600;
box-shadow: none;
}

&::placeholder {
Expand Down
2 changes: 1 addition & 1 deletion packages/editor/src/components/post-title/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
// Raw Text Variant
.editor-post-title.is-raw-text {
margin-bottom: $grid-unit-30;
margin-top: 2px; // space for focus outline to appear.
margin-top: calc(2 * var(--wpds-border-width-focus)); // space for focus outline to appear.
max-width: none;
}
5 changes: 0 additions & 5 deletions packages/editor/src/components/text-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,6 @@
@include break-small() {
padding: $grid-unit-30;
}

&:focus {
border-color: var(--wp-admin-theme-color);
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}
}
}

Expand Down
Loading