-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
Fix glitchy block focus style when multiselecting blocks. #32927
Conversation
@@ -74,7 +74,7 @@ | |||
&.is-navigate-mode .block-editor-block-list__block.is-selected::after, | |||
& .is-block-moving-mode.block-editor-block-list__block.has-child-selected { | |||
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); | |||
outline: var(--wp-admin-border-width-focus) solid transparent; | |||
outline: 2px solid transparent; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For clarity: the transparent outline exists for the purpose of enabling a focus style in Windows using High Contrast Mode. In that mode, all box shadows are removed, and all outlines/borders are made a highly visible yellow color (on black background).
In other words, by serving a transparent outline style, it's invisible for people not using high contrast mode, just like how the box shadow is invisible for people who do.
Size Change: -10 B (0%) Total Size: 1.04 MB
ℹ️ View Unchanged
|
Thank you! |
a8904f9
to
878c162
Compare
Description
On 2x/retina displays, when you select multiple blocks, the focus style can occasionally be cropped:
This PR fixes that:
I believe this issue has come and gone a couple of times, but it's been easy to reproduce lately, and this seems to fix it.
How has this been tested?
Insert a bunch of blocks and select them. The focus style should be consistent all the way around the block.
Checklist:
*.native.js
files for terms that need renaming or removal).