Enhance outlines

WordPress · May 8, 2024 · 9ab896d · 9ab896d
1 parent 2f70709
commit 9ab896d
Showing 1 changed file with 52 additions and 39 deletions.
diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
@@ -39,12 +39,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	position: relative;
 
 	// Block multi selection
-	// Apply a rounded radius to the entire block when multi selected, but with low specificity
-	// so explicit radii set by tools are preserved.
-	&:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)) {
-		border-radius: $radius-block-ui;
-	}
-
 	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
 		// Hide the native selection indicator, for the selection, and children.
 		&::selection,
@@ -64,7 +58,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 			left: 0;
 			background: var(--wp-admin-theme-color);
 			opacity: 0.4;
-			border-radius: $radius-block-ui;
 
 			// Animate.
 			animation: selection-overlay__fade-in-animation 0.1s ease-out;
@@ -77,7 +70,7 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 
 		// Don't show the highlight focus style when multi selected.
 		&.is-highlighted::after {
-			box-shadow: none;
+			outline-color: transparent;
 		}
 	}
 
@@ -99,17 +92,18 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 			position: absolute;
 			z-index: 1;
 			pointer-events: none;
-			top: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			left: $border-width;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui - $border-width; // Border is outset, so subtract the width to achieve correct radius.
-			outline: 2px solid transparent; // This shows up in Windows High Contrast Mode.
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			outline-color: var(--wp-admin-theme-color);
+			outline-style: solid;
+			outline-width: var(--wp-admin-border-width-focus);
+			outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
 
 			// Show a light color for dark themes.
 			.is-dark-theme & {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $dark-theme-focus;
+				outline-color: $dark-theme-focus;
 			}
 		}
 	}
@@ -270,40 +264,53 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	}
 }
 
-.is-outline-mode .block-editor-block-list__block {
-	&.is-hovered {
-		cursor: default;
-
-		&::after {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			top: $border-width;
-			left: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui - $border-width;
-		}
-	}
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline) {
 
 	&.is-selected {
 		cursor: default;
 
 		&.rich-text {
 			cursor: unset;
 		}
+	}
+
+	&.is-hovered,
+	&:not(.rich-text):not([contenteditable="true"]).is-selected {
 
 		&::after {
 			content: "";
 			position: absolute;
 			pointer-events: none;
-			top: $border-width;
-			left: $border-width;
-			right: $border-width;
-			bottom: $border-width;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-radius: $radius-block-ui;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			outline-color: var(--wp-admin-theme-color);
+			outline-style: solid;
+			outline-width: var(--wp-admin-border-width-focus);
+			outline-offset: calc(-1 * var(--wp-admin-border-width-focus));
+		}
+	}
+}
+
+// Colorize outlines for template parts and synced patterns (.is-reusable).
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
+
+	&.is-hovered::after,
+	&.is-selected::after,
+	&.is-highlighted::after {
+		outline-color: var(--wp-block-synced-color);
+	}
+
+	&.block-editor-block-list__block:not([contenteditable]):focus {
+		&::after {
+			outline-color: var(--wp-block-synced-color);
+
+			// Show a light color for dark themes.
+			.is-dark-theme & {
+				outline-color: $dark-theme-focus;
+			}
 		}
 	}
 }
@@ -336,7 +343,6 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	animation-timing-function: ease-out;
 	animation-delay: 0.1s;
 	animation-fill-mode: backwards;
-	border-radius: $radius-block-ui;
 	bottom: 0;
 	content: "";
 	left: 0;
@@ -385,10 +391,17 @@ _::-webkit-full-page-media, _:future, :root .has-multi-selection .block-editor-b
 	z-index: z-index("{core/image aligned left or right} .wp-block");
 }
 
+// Increase width when zoomed out to match visually.
 body.is-zoomed-out {
 	display: flex;
 	flex-direction: column;
 
+	.is-outline-mode .block-editor-block-list__block:not(.remove-outline):not(.rich-text).is-selected::after,
+	.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-hovered:not(.is-selected)::after {
+		outline-width: calc(2 * var(--wp-admin-border-width-focus)); // Adjusted for the zoom scale.
+		outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
+	}
+
 	> .is-root-container {
 		flex: 1;
 		display: flex;