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

* remove overrides * use outlines * move transition to focus Co-authored-by: richtabor <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: t-hamano <[email protected]>
WordPress · May 28, 2024 · c24387f · c24387f
1 parent aa11526
commit c24387f
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
-		}
-	}
 }