Try image selection placeholder

WordPress · Nov 28, 2019 · fe9aca6 · fe9aca6
1 parent cc709da
commit fe9aca6
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 74 deletions.
diff --git 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
@@ -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
@@ -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;
+}