Skip to content
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.

Sign up for GitHub

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

Adjust pattern list items resting, hover, focus styles #61831

Merged
merged 5 commits into from
May 28, 2024
Merged

Adjust pattern list items resting, hover, focus styles #61831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3108097
remove overrides
richtabor May 21, 2024
d121df3
use outlines
richtabor May 21, 2024
1bc3ecc
move transition to focus
richtabor May 28, 2024
02a04e6
apply same effects to the media panel; fix padding in design panel
richtabor May 28, 2024
dfb9383
add space for details, if they are present
richtabor May 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 22 additions & 20 deletions packages/block-editor/src/components/block-patterns-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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 {
Expand Down
26 changes: 0 additions & 26 deletions packages/block-editor/src/components/block-preview/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
}
}
}
}
}
30 changes: 19 additions & 11 deletions packages/block-editor/src/components/inserter/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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 {
Expand Down Expand Up @@ -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};
Expand All @@ -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;
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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");
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/global-styles/variations/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 0 additions & 8 deletions packages/editor/src/components/post-template/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
8 changes: 0 additions & 8 deletions packages/editor/src/components/start-template-options/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Loading