Repository navigation
[WP 7.2] Edit as HTML: Show design system focus ring on the HTML textarea - #85359
Merged
Merged
Conversation
) * Edit as HTML: Show design system focus ring on the block HTML textarea * Edit as HTML: Add changelog entry --- Co-authored-by: R1shabh-Gupta <rishabhwp@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> (cherry picked from commit 2d367b8)
🤖 PR meta 🤖🎉 PropsIf you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. 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 📦 Bundle sizeSize Change: 0 B Total Size: 9.04 MB
⚡ PerformanceShow the resultsClient side metrics exclude the server response time. front-end-block-theme
front-end-classic-theme
media-processing
media-upload
post-editor
site-editor
🏁 Flaky testsSome tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information. Regression: updating a specific option will only change its value and will not corrupt others in
|
mirka
approved these changes
Oct 22, 2026
| &:focus { | ||
| box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | ||
| @include outset-ring__focus(); | ||
| outline-offset: calc(-1 * var(--wpds-border-width-focus)); |
Member
There was a problem hiding this comment.
The backport is fine, but I wouldn't recommend this override in combination with the outset-ring mixin. It literally says outset in the name. This is exactly the kind of thing that breaks when the underlying mixin changes between box-shadow/outline implementations.
I think it would be safer for this to set its own focus ring styles using the tokens directly. (This is separate from the fact that we could reconsider the non-outset style here to begin with. There's a reason we're outsetting, and this textarea seems to be something that could perhaps benefit from outsetting and using the standard textarea border color IMO. It isn't visually clear that this is a focused textarea, especially within the rules of the system. If not, we should perhaps consider adding a new focus mixin that isn't outset.)
Contributor
Author
There was a problem hiding this comment.
I can't find where, but I remember suggesting that we have an equivalent inset mixin, or at least that we add an argument to the mixin to tweak that aspect. I think we're going to need this tweak in a few places, and I'm afraid that going "custom styles" will cause these styles to diverge over time
Member
There was a problem hiding this comment.
Yeah, I think the decision tree would be like:
- Reconsider whether the use case really can't use the standard outset.
- Use a separate mixin †.
† Not sure exactly what mixins would be common enough to create. An argument mixin might lead to random arbitrary offsets, so we should tread carefully in any case!
ciampo
added
[Type] Task
4 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Backport of #85266 to
wp/7.2, following the failed automatic cherry-pick.What?
Show the design system's focus outline on the "Edit as HTML" textarea in WordPress 7.2.
Why?
The existing box-shadow focus indicator disappears in forced-colors mode.
How?
Cherry-pick
2d367b8c844dc68b46b672d552617fdbdd7125b3with the CSS unchanged. Resolve the changelog conflict by adding the original entry under Unreleased, preserving the release branch's existing entries.Testing Instructions
forced-colors: activein browser DevTools. The focused textarea's outline should remain visible.Testing Instructions for Keyboard
Screenshots or screencast
See the before/after screenshots in #85266.
Verification
The production build, CSS lint, and changelog validation passed. An isolated Chromium check using the release branch's compiled textarea styles reproduced the missing indicator before the backport and verified the inset outline afterward in normal and forced-colors modes. The full WordPress editor flow has not been rerun.
Use of AI Tools
Codex prepared this manual backport, resolved the changelog conflict, and ran verification.