Improve Safari text-selection style. (#43313)

* Improve Safari text-selection style. * Address feedback. * Try enabling also for blocks. * Fix a few issues. * Remove hack. * Add a CSS class name when multi selection is active * Add back scoped user-select disabling. Co-authored-by: Adam Zieliński <[email protected]>
WordPress · Aug 29, 2022 · 9620bae · 9620bae
1 parent 3f08301
commit 9620bae
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -4,10 +4,6 @@
 	margin: 0;
 }
 
-/**
- * Notices & Block Selected/Hover Styles.
- */
-
 /**
  * Cross-Block Selection
  */
@@ -104,8 +100,20 @@
 			border-color: var(--wp-admin-theme-color);
 		}
 	}
-}
 
+	// Ensure an accurate partial text selection.
+	// To do this, we disable text selection on the main container, then re-enable it only on the
+	// elements that actually get selected.
+	// To keep in mind: user-select is currently inherited to all nodes inside.
+	.has-multi-selection & {
+		user-select: none;
+	}
+
+	// Re-enable it on components inside.
+	[class^="components-"] {
+		user-select: text;
+	}
+}
 
 .is-block-moving-mode.block-editor-block-list__block-selection-button {
 	// Should be invisible but not unfocusable.
@@ -118,6 +126,19 @@
 .block-editor-block-list__layout .block-editor-block-list__block {
 	position: relative;
 
+	// Re-enable text-selection on editable blocks.
+	user-select: text;
+
+	// Hide the select style pseudo element as it interferes with the style.
+	&.is-partially-selected::after {
+		height: 0;
+	}
+
+	&.is-highlighted::after,
+	&.is-highlighted ~ .is-multi-selected::after {
+		height: auto;
+	}
+
 	// Break long strings of text without spaces so they don't overflow the block.
 	overflow-wrap: break-word;
 

diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js
@@ -51,12 +51,14 @@ export function useWritingFlow() {
 						return;
 					}
 
+					node.classList.add( 'has-multi-selection' );
 					node.setAttribute(
 						'aria-label',
 						__( 'Multiple selected blocks' )
 					);
 
 					return () => {
+						node.classList.remove( 'has-multi-selection' );
 						node.removeAttribute( 'aria-label' );
 					};
 				},