Work in progress.

packages/block-editor/src/components/block-list/style.scss

@@ -10,51 +10,60 @@
 
 // Note to developers refactoring this, please test navigation mode, and
 // multi selection and hovering the block switcher to highlight the block.
+// Also be sure to test partial selections in Safari, as it draws the
+// selection marker with an entirely different model than Blink.
 .block-editor-block-list__layout {
  position: relative;
 
- // The primary indicator of selection in text is the native selection marker.
- // When selecting multiple blocks, we provide an additional selection indicator.
- .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected),
- .block-editor-block-list__block.is-highlighted,
- .block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
- // Everything else.
- box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
- border-radius: $radius-block-ui;
-
- // Windows High Contrast mode will show this outline.
- outline: 2px solid transparent;
+ // Hide selections on this element, otherwise Safari will include it stacked
+ // under your actual selection.
+ &::selection {
+ background: transparent;
+ }
 
-  // Animate the multi-selection style.
- transition: box-shadow 0.1s linear;
-  @include reduce-motion("transition");
+ .has-multi-selection &::selection {
+ background: transparent;
+ }
 
- // Show a lighter color for dark themes.
- .is-dark-theme & {
- box-shadow: 0 0 0 $border-width $dark-theme-focus;
+ // Block multi selection
+ .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
+ // Hide the native selection indicator.
+ &::selection {
+ background: transparent;
  }
 
- // Provide exceptions for placeholders.
- .components-placeholder,
- .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
- ::selection {
- background: transparent;
- }
+ // Draw a spot color overlay.
+ &::after {
+ content: "";
+ position: absolute;
+ z-index: 1;
+ pointer-events: none;
+ top: $border-width;
+ right: $border-width;
+ bottom: $border-width;
+ left: $border-width;
+ background: var(--wp-admin-theme-color);
+ opacity: 0.4;
+
+ // Show outline in high contrast mode.
+ outline: 2px solid transparent;
  }
  }
 
- // Hide the selection indicator on .block-editor-block-list__layout, else Safari will show it stacked.
- .has-multi-selection &::selection {
- background: transparent;
- }
-
+ // Block focus and navigation mode.
+ .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 {
+ // @todo, this might also need to be a pseudo element so it can overlay content.
  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;
  }
 
+ // @todo, can this be combined with focus and navigation?
  & .is-block-moving-mode.block-editor-block-list__block.is-selected {
 
  &::before {
@@ -115,15 +124,15 @@
  }
 }
 
-// Apply `position: relative;` sparingly as it affects Safari selection rendering.
-.block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block,
-.block-editor-block-list__layout .block-editor-block-list__block.has-block-overlay {
- position: relative;
-}
-
 .block-editor-block-list__layout .block-editor-block-list__block {
- // Without this, Safari draws a full-width selection rectangle.
+ // With static, Safari marks a full-width selection rectangle.
  position: static;
+ // With relative, Safari marks an inline selection rectangle.
+ // This one matches that of Chrome, but it also does "crop" the marker,
+ // which can result in a small line from the preceeding paragraph.
+ // This line is effectively the above selection bleeding in.
+ position: relative;
+ // @todo: choose one of the two!
 
  // Re-enable text-selection on editable blocks.
  user-select: text;