Reveal block boundaries on hover in the Site Editor (#27271)

* Reveal block boundaries on hover, and colorise template parts * Hover boundary width * Remove focus and selected styles * fix clipping issue and better align hover outline * Apply 1px black border when selected, but not focussed * Default cursor on hover * Only hide the outline on text editable blocks whilst typing * outline alignment * Even more alignment fixes... * Remove the pseudo-spotlight effect on template parts * Remove template part spotlight and move outline styles
WordPress · Dec 1, 2020 · 5056694 · 5056694
1 parent eea43a4
commit 5056694
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 49 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -206,21 +206,6 @@
 		}
 	}
 
-	// Active entity spotlight.
-	&.has-active-entity:not(.is-focus-mode) {
-		opacity: 0.5;
-		transition: opacity 0.1s linear;
-		@include reduce-motion("transition");
-
-		&.is-active-entity,
-		&.has-child-selected,
-		&:not(.has-child-selected) .block-editor-block-list__block,
-		&.is-active-entity .block-editor-block-list__block,
-		.is-active-entity .block-editor-block-list__block {
-			opacity: 1;
-		}
-	}
-
 	/**
 	* Block styles and alignments
 	*/

diff --git a/packages/block-library/src/template-part/editor.scss b/packages/block-library/src/template-part/editor.scss
@@ -89,37 +89,3 @@
 		box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
 	}
 }
-
-.block-editor-block-list__block[data-type="core/template-part"] {
-	&.is-selected,
-	&.has-child-selected {
-		&::after {
-			top: $border-width;
-			bottom: $border-width;
-			left: $border-width;
-			right: $border-width;
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so so subtract the width to achieve correct radius.
-		}
-	}
-
-	&.is-selected {
-		&::after {
-			// 2px outside.
-			box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color);
-			// Show a light color for dark themes.
-			.is-dark-theme & {
-				box-shadow: 0 0 0 $border-width-focus $dark-theme-focus;
-			}
-		}
-	}
-
-	&.has-child-selected {
-		&::after {
-			box-shadow: 0 0 0 $border-width $gray-300;
-
-			.is-dark-theme & {
-				box-shadow: 0 0 0 $border-width-focus $gray-700;
-			}
-		}
-	}
-}
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
@@ -11,3 +11,50 @@
 		padding: 6px;
 	}
 }
+
+.block-editor-block-list__layout {
+	&.edit-site-block-editor__block-list {
+		.block-editor-block-list__block {
+			&::after {
+				outline: 2px solid transparent;
+			}
+
+			&.is-selected {
+				&::after {
+					box-shadow: 0 0 0 $border-width $gray-900; // Selected not focussed
+					top: $border-width;
+					left: $border-width;
+					right: $border-width;
+					bottom: $border-width;
+				}
+
+				&:focus {
+					&::after {
+						box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color);
+					}
+				}
+			}
+
+			&.is-hovered:not(.is-selected) {
+				cursor: default;
+
+				&::after {
+					top: $border-width;
+					left: $border-width;
+					right: $border-width;
+					bottom: $border-width;
+					box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
+				}
+			}
+		}
+
+		// Do not display a border on rich text blocks when hovered and selected
+		.block-editor-rich-text__editable {
+			&.is-selected.is-hovered.is-typing {
+				&::after {
+					box-shadow: none;
+				}
+			}
+		}
+	}
+}