diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss index 5e92ec128eaaf5..b9b198631e895c 100644 --- a/assets/stylesheets/_mixins.scss +++ b/assets/stylesheets/_mixins.scss @@ -238,15 +238,33 @@ color: $dark-gray-900; } -@mixin block-style__focus-active() { +@mixin block-style__focus() { color: $dark-gray-900; - box-shadow: 0 0 0 2px $blue-medium-500; + box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500; // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; outline-offset: -2px; } +@mixin block-style__is-active() { + color: $dark-gray-900; + box-shadow: inset 0 0 0 2px $dark-gray-500; + + // Windows High Contrast mode will show this outline, but not the box-shadow. + outline: 2px solid transparent; + outline-offset: -2px; +} + +@mixin block-style__is-active-focus() { + color: $dark-gray-900; + box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500, inset 0 0 0 2px $dark-gray-500; + + // Windows High Contrast mode will show this outline, but not the box-shadow. + outline: 4px solid transparent; + outline-offset: -4px; +} + /** * Applies editor left position to the selector passed as argument */ diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss index d818bcb15349b3..988e7563878fc1 100644 --- a/packages/block-editor/src/components/block-styles/style.scss +++ b/packages/block-editor/src/components/block-styles/style.scss @@ -11,20 +11,23 @@ cursor: pointer; overflow: hidden; border-radius: $radius-round-rectangle; - padding: $grid-size-small; - - &.is-active { - @include block-style__focus-active(); - box-shadow: 0 0 0 2px $dark-gray-500; - } + padding: $grid-size-small * 1.5; &:focus { - @include block-style__focus-active(); + @include block-style__focus(); } &:hover { @include block-style__hover; } + + &.is-active { + @include block-style__is-active(); + + &:focus { + @include block-style__is-active-focus(); + } + } } .block-editor-block-styles__item-preview { diff --git a/packages/block-editor/src/components/block-types-list/style.scss b/packages/block-editor/src/components/block-types-list/style.scss index 73872e11ed5e0c..33c6db039f1d9f 100644 --- a/packages/block-editor/src/components/block-types-list/style.scss +++ b/packages/block-editor/src/components/block-types-list/style.scss @@ -1,6 +1,6 @@ .block-editor-block-types-list { list-style: none; - padding: 2px 0; + padding: 4px 0; overflow: hidden; display: flex; flex-wrap: wrap; diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss index d9051da5c839aa..5725edf2f67b72 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.scss @@ -51,19 +51,26 @@ } &:active, - &.is-active, &:focus { position: relative; // Show the focus style in the icon inside instead. outline: none; - @include block-style__focus-active(); + @include block-style__focus(); .block-editor-block-types-list__item-icon, .block-editor-block-types-list__item-title { color: inherit; } } + + &.is-active { + @include block-style__is-active(); + + &:focus { + @include block-style__is-active-focus(); + } + } } }