From c24387f021c68bfa3579b358b26590b2c3426687 Mon Sep 17 00:00:00 2001 From: Rich Tabor Date: Tue, 28 May 2024 18:53:17 -0400 Subject: [PATCH] Adjust pattern list items resting, hover, focus styles (#61831) * remove overrides * use outlines * move transition to focus Co-authored-by: richtabor Co-authored-by: jasmussen Co-authored-by: t-hamano --- .../components/block-patterns-list/style.scss | 42 ++++++++++--------- .../src/components/block-preview/style.scss | 26 ------------ .../src/components/inserter/style.scss | 30 ++++++++----- .../global-styles/variations/style.scss | 2 +- .../src/components/post-template/style.scss | 8 ---- .../start-template-options/style.scss | 8 ---- 6 files changed, 42 insertions(+), 74 deletions(-) diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss index d3c54a20956f39..00dc650a3fbbdc 100644 --- a/packages/block-editor/src/components/block-patterns-list/style.scss +++ b/packages/block-editor/src/components/block-patterns-list/style.scss @@ -1,6 +1,6 @@ .block-editor-block-patterns-list__list-item { cursor: pointer; - margin-bottom: $grid-unit-30; + margin-bottom: $grid-unit-20; // The list item contains absolutely positioned visually hidden text, // so make this container relative. This prevents the bug experienced in @@ -26,38 +26,40 @@ // the bottom margin set on `...__list-item` above scroll-margin-bottom: ($grid-unit-40 + $grid-unit-30); - .block-editor-block-preview__container { - display: flex; - align-items: center; - overflow: hidden; - border-radius: 4px; - } - .block-editor-block-patterns-list__item-title { text-align: left; flex-grow: 1; } - &:hover .block-editor-block-preview__container { - box-shadow: 0 0 0 2px $gray-900; + .block-editor-block-preview__container { + display: flex; + align-items: center; + overflow: hidden; + border-radius: $radius-block-ui; + + &::after { + outline: $border-width solid rgba($black, 0.1); + outline-offset: -$border-width; + border-radius: $radius-block-ui; + } } - &:focus .block-editor-block-preview__container { - @include button-style-outset__focus($gray-900); + &:hover:not(:focus) .block-editor-block-preview__container::after { + outline-color: rgba($black, 0.3); } - &.block-editor-block-patterns-list__list-item-synced { - &:hover, - &:focus { - .block-editor-block-preview__container { - box-shadow: 0 0 0 2px var(--wp-block-synced-color); - } - } + &:focus .block-editor-block-preview__container::after { + outline-color: var(--wp-admin-theme-color); + outline-width: var(--wp-admin-border-width-focus); + outline-offset: calc((-1 * var(--wp-admin-border-width-focus))); + transition: outline 0.1s linear; + @include reduce-motion("transition"); } - .block-editor-patterns__pattern-details { + .block-editor-patterns__pattern-details:not(:empty) { align-items: center; margin-top: $grid-unit-10; + margin-bottom: $grid-unit-05; // Add more space as there is a visual label on user-created patterns. } .block-editor-patterns__pattern-icon-wrapper { diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss index bfc3d5c8783beb..9bdd85f66445f8 100644 --- a/packages/block-editor/src/components/block-preview/style.scss +++ b/packages/block-editor/src/components/block-preview/style.scss @@ -48,29 +48,3 @@ bottom: 0; z-index: 1; } - -// Restrict these shadows to the context of the inserter. -.editor-inserter-sidebar { - .block-editor-block-patterns-list__item { - .block-editor-block-preview__container { - box-shadow: 0 15px 25px rgb(0 0 0 / 7%); - } - &:focus, - &:hover { - .block-editor-block-preview__container { - box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%); - } - } - - &.block-editor-block-patterns-list__list-item-synced { - &:hover, - &:focus { - .block-editor-block-preview__container { - box-shadow: - 0 0 0 2px var(--wp-block-synced-color), - 0 15px 25px rgb(0 0 0 / 7%); - } - } - } - } -} diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 722afbdc2a83ed..7618d9712ad535 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -345,11 +345,17 @@ $block-inserter-tabs-height: 44px; left: 100%; width: 300px; } + + .block-editor-inserter__media-list, + .block-editor-block-patterns-list { + padding: 0 $grid-unit-30 $grid-unit-20; + } } .block-editor-inserter__patterns-category-panel-header { - padding: 16px $grid-unit-30; + padding: $grid-unit-10 $grid-unit-30; } + .block-editor-inserter__patterns-category-no-results { margin-top: $grid-unit-30; } @@ -359,7 +365,6 @@ $block-inserter-tabs-height: 44px; overflow-y: auto; flex-grow: 1; height: 100%; - padding: $grid-unit-20 $grid-unit-30; } .block-editor-inserter__preview-content { @@ -553,7 +558,7 @@ $block-inserter-tabs-height: 44px; } .block-editor-inserter__media-panel-search { - padding: $grid-unit-20 $grid-unit-30 0; + padding: $grid-unit-20 $grid-unit-30 $grid-unit-10; // TODO: Consider using the Theme component to automatically adapt to a gray background. &:not(:focus-within) { --wp-components-color-background: #{$white}; @@ -565,7 +570,6 @@ $block-inserter-tabs-height: 44px; position: relative; cursor: pointer; margin-bottom: $grid-unit-30; - box-shadow: 0 15px 25px rgb(0 0 0 / 7%); &.is-placeholder { min-height: 100px; @@ -576,8 +580,8 @@ $block-inserter-tabs-height: 44px; } &.is-hovered { - .block-editor-inserter__media-list__item-preview { - box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%); + .block-editor-inserter__media-list__item-preview > * { + outline-color: rgba($black, 0.3); } .block-editor-inserter__media-list__item-preview-options > button { @@ -624,6 +628,9 @@ $block-inserter-tabs-height: 44px; > * { margin: 0 auto; max-width: 100%; + outline: $border-width solid rgba($black, 0.1); + outline-offset: -$border-width; + border-radius: $radius-block-ui; } .block-editor-inserter__media-list__item-preview-spinner { @@ -638,11 +645,12 @@ $block-inserter-tabs-height: 44px; } } - &:focus .block-editor-inserter__media-list__item-preview { - box-shadow: inset 0 0 0 2px $white, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - - // Windows High Contrast mode will show this outline, but not the box-shadow. - outline: 2px solid transparent; + &:focus .block-editor-inserter__media-list__item-preview > * { + outline-color: var(--wp-admin-theme-color); + outline-width: var(--wp-admin-border-width-focus); + outline-offset: calc((-1 * var(--wp-admin-border-width-focus))); + transition: outline 0.1s linear; + @include reduce-motion("transition"); } } diff --git a/packages/edit-site/src/components/global-styles/variations/style.scss b/packages/edit-site/src/components/global-styles/variations/style.scss index 336e8ceac7ca6d..8d9b4238efa337 100644 --- a/packages/edit-site/src/components/global-styles/variations/style.scss +++ b/packages/edit-site/src/components/global-styles/variations/style.scss @@ -6,7 +6,7 @@ .edit-site-global-styles-variations_item-preview { border-radius: $radius-block-ui; - outline: $border-width solid rgba($black, 0.15); + outline: $border-width solid rgba($black, 0.1); outline-offset: -$border-width; overflow: hidden; position: relative; diff --git a/packages/editor/src/components/post-template/style.scss b/packages/editor/src/components/post-template/style.scss index c969654a532658..749dfcf4c3183b 100644 --- a/packages/editor/src/components/post-template/style.scss +++ b/packages/editor/src/components/post-template/style.scss @@ -20,14 +20,6 @@ .block-editor-block-patterns-list__list-item { break-inside: avoid-column; } - - .block-editor-block-patterns-list__item { - // Avoid to override the BlockPatternList component - // default hover and focus styles. - &:not(:focus):not(:hover) .block-editor-block-preview__container { - box-shadow: 0 0 0 1px $gray-300; - } - } } .editor-post-template__dropdown { diff --git a/packages/editor/src/components/start-template-options/style.scss b/packages/editor/src/components/start-template-options/style.scss index 8df6de864c4590..128eddb48c8c8c 100644 --- a/packages/editor/src/components/start-template-options/style.scss +++ b/packages/editor/src/components/start-template-options/style.scss @@ -44,12 +44,4 @@ $actions-height: 92px; display: none; } } - - .block-editor-block-patterns-list__item { - // Avoid to override the BlockPatternList component - // default hover and focus styles. - &:not(:focus):not(:hover) .block-editor-block-preview__container { - box-shadow: 0 0 0 1px $gray-300; - } - } }