From fe9aca6e6af9598022529ebc95090fa73ab96ee9 Mon Sep 17 00:00:00 2001
From: Ella van Durpe <ella@vandurpe.com>
Date: Fri, 29 Nov 2019 00:06:11 +0100
Subject: [PATCH] Try image selection placeholder

---
 .../src/components/block-list/block.js        | 10 +++
 .../src/components/block-list/index.js        | 74 -------------------
 .../src/components/block-list/style.scss      | 11 +++
 3 files changed, 21 insertions(+), 74 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index e797f1b5b2656..460c7e475b4de 100644
--- a/packages/block-editor/src/components/block-list/block.js
+++ b/packages/block-editor/src/components/block-list/block.js
@@ -612,6 +612,11 @@ function BlockListBlock( {
 					onMouseLeave={ onMouseLeave }
 					data-block={ clientId }
 				>
+					<img
+						className="selection-img"
+						alt=""
+						src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
+					/>
 					<BlockCrashBoundary onError={ onBlockError }>
 						{ isValid && blockEdit }
 						{ isValid && mode === 'html' && (
@@ -628,6 +633,11 @@ function BlockListBlock( {
 							</div>,
 						] }
 					</BlockCrashBoundary>
+					<img
+						className="selection-img"
+						alt=""
+						src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="
+					/>
 					{ !! hasError && <BlockCrashWarning /> }
 					{ shouldShowMobileToolbar && (
 						<BlockMobileToolbar clientId={ clientId } moverDirection={ moverDirection } />
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 13ba64f4d1e88..a6fddd6145855 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -35,32 +35,6 @@ const forceSyncUpdates = ( WrappedComponent ) => ( props ) => {
 	);
 };
 
-/**
- * Returns for the deepest node at the start or end of a container node. Ignores
- * any text nodes that only contain HTML formatting whitespace.
- *
- * @param {Element} node Container to search.
- * @param {string} type 'start' or 'end'.
- */
-function getDeepestNode( node, type ) {
-	const child = type === 'start' ? 'firstChild' : 'lastChild';
-	const sibling = type === 'start' ? 'nextSibling' : 'previousSibling';
-
-	while ( node[ child ] ) {
-		node = node[ child ];
-
-		while (
-			node.nodeType === node.TEXT_NODE &&
-			/^[ \t\n]*$/.test( node.data ) &&
-			node[ sibling ]
-		) {
-			node = node[ sibling ];
-		}
-	}
-
-	return node;
-}
-
 class BlockList extends Component {
 	constructor( props ) {
 		super( props );
@@ -72,54 +46,6 @@ class BlockList extends Component {
 		this.ref = createRef();
 	}
 
-	/**
-	 * When the component updates, and there is multi selection, we need to
-	 * select the entire block contents.
-	 */
-	componentDidUpdate() {
-		const {
-			hasMultiSelection,
-			blockClientIds,
-			// These must be in the right DOM order.
-			multiSelectedBlockClientIds,
-		} = this.props;
-
-		if ( ! hasMultiSelection ) {
-			return;
-		}
-
-		const { length } = multiSelectedBlockClientIds;
-		const start = multiSelectedBlockClientIds[ 0 ];
-		const end = multiSelectedBlockClientIds[ length - 1 ];
-		const startIndex = blockClientIds.indexOf( start );
-
-		// The selected block is not in this block list.
-		if ( startIndex === -1 ) {
-			return;
-		}
-
-		let startNode = this.ref.current.querySelector(
-			`[data-block="${ start }"]`
-		);
-		let endNode = this.ref.current.querySelector(
-			`[data-block="${ end }"]`
-		);
-
-		const selection = window.getSelection();
-		const range = document.createRange();
-
-		// The most stable way to select the whole block contents is to start
-		// and end at the deepest points.
-		startNode = getDeepestNode( startNode, 'start' );
-		endNode = getDeepestNode( endNode, 'end' );
-
-		range.setStartBefore( startNode );
-		range.setEndAfter( endNode );
-
-		selection.removeAllRanges();
-		selection.addRange( range );
-	}
-
 	componentWillUnmount() {
 		window.removeEventListener( 'mouseup', this.onSelectionEnd );
 		window.cancelAnimationFrame( this.rafId );
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index ae60ac1fe512d..fb9feafa4dffa 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -1139,3 +1139,14 @@
 		margin-bottom: auto;
 	}
 }
+
+.selection-img {
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	width: 100%;
+	pointer-events: none;
+	height: 100% !important;
+}