diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
index e797f1b5b26568..460c7e475b4def 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 }
>
+
{ isValid && blockEdit }
{ isValid && mode === 'html' && (
@@ -628,6 +633,11 @@ function BlockListBlock( {
,
] }
+
{ !! hasError && }
{ shouldShowMobileToolbar && (
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 13ba64f4d1e880..a6fddd6145855a 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 ae60ac1fe512de..fb9feafa4dffa1 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;
+}