From c475dcb3ffee7627a8e1d2f13f364a7a9b195a61 Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Mon, 17 Apr 2023 20:19:26 +0200
Subject: [PATCH] Block highlight: Fix radius issue (#49864)

---
 .../src/components/block-list/content.scss    | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/content.scss b/packages/block-editor/src/components/block-list/content.scss
index 7219275196d8fb..268301e598d5aa 100644
--- a/packages/block-editor/src/components/block-list/content.scss
+++ b/packages/block-editor/src/components/block-list/content.scss
@@ -35,11 +35,14 @@
 	}
 
 	// Block multi selection
-	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
-		// Apply a rounded radius to the entire block.
+	// 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;
 		overflow: hidden;
+	}
 
+	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
 		// Hide the native selection indicator, for the selection, and children.
 		&::selection,
 		& ::selection {
@@ -68,24 +71,22 @@
 			// Show outline in high contrast mode.
 			outline: 2px solid transparent;
 		}
+
+		// Don't show the highlight focus style when multi selected.
+		&.is-highlighted::after {
+			box-shadow: none;
+		}
 	}
 
-	// Block highlight, and navigation mode, not focus.
-	// By not using a pseudo element, we can limit ourselves to only
-	// using ::after, leaving ::before free. Otherwise, highlight + multi-select
-	// would require the opacity-changing overlay to be on ::before.
+	// Block highlight, and navigation mode, and focus.
+	// This piece of code has gone back and forth between using a pseudo element
+	// vs. styling the block directly. Ultimately we likely need a pseudo element
+	// (unless styles like focus and selection overlay can be rendered as separate elements),
+	// since things like border-radius need to be able to be set on the block itself.
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
 	&.is-navigate-mode .block-editor-block-list__block.is-selected,
-	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
-		border-radius: $radius-block-ui;
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Show outline in high contrast mode.
-		outline: 2px solid transparent;
-	}
-
-	// Block focus.
+	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected,
 	.block-editor-block-list__block:not([contenteditable]):focus {
 		outline: none;