Skip to content

Commit 374dd60

Browse files
yashjawaleyashjawalet-hamano
authored
Inserter: Use design system focus ring for previews (#83126)
* fix: use design system focus outline * fix: remove outline transition --------- Co-authored-by: yashjawale <yashjawale@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
1 parent 9e443b4 commit 374dd60

1 file changed

Lines changed: 2 additions & 14 deletions

File tree

  • packages/block-editor/src/components/inserter

‎packages/block-editor/src/components/inserter/style.scss‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,6 @@ $block-inserter-tabs-height: 44px;
8787
align-items: center;
8888
cursor: var(--wpds-cursor-control);
8989
border: none;
90-
outline: none;
9190
padding: 0;
9291
@media not ( prefers-reduced-motion ) {
9392
transition: color 0.2s ease;
@@ -624,13 +623,6 @@ $block-inserter-tabs-height: 44px;
624623
&:focus {
625624
display: block;
626625
}
627-
628-
&:hover {
629-
box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
630-
631-
// Windows High Contrast mode will show this outline, but not the box-shadow.
632-
outline: 2px solid transparent;
633-
}
634626
}
635627
}
636628
}
@@ -664,12 +656,8 @@ $block-inserter-tabs-height: 44px;
664656
}
665657

666658
&:focus .block-editor-inserter__media-list__item-preview > * {
667-
outline-color: var(--wp-admin-theme-color);
668-
outline-width: var(--wp-admin-border-width-focus);
669-
outline-offset: calc((-1 * var(--wp-admin-border-width-focus)));
670-
@media not ( prefers-reduced-motion ) {
671-
transition: outline 0.1s linear;
672-
}
659+
@include outset-ring__focus();
660+
outline-offset: calc(-1 * var(--wpds-border-width-focus));
673661
}
674662
}
675663

0 commit comments

Comments
 (0)