Block: fix invalid block scrim overflowing toolbar on mobile (#9473)

* Fix invalid block scrim overflowing toolbar on mobile

On small screens the invalid block scrim overflows a block’s dropdown menu / toolbar, which is positioned beneath the block.

* Clarify variable.

* Tweak block warning quite a bit.

This commit changes the layout and design of the block warning a bit.

It is no longer obscuring content, and the scrim is lighter.

* Also fix for nested blocks.

* Restore the full border.

packages/editor/src/components/block-list/block.js

@@ -539,13 +539,13 @@ export class BlockListBlock extends Component {
 							<BlockHtml clientId={ clientId } />
 						) }
 						{ ! isValid && [
-							<div key="invalid-preview">
-								{ getSaveElement( blockType, block.attributes ) }
-							</div>,
 							<BlockInvalidWarning
 								key="invalid-warning"
 								block={ block }
 							/>,
+							<div key="invalid-preview">
+								{ getSaveElement( blockType, block.attributes ) }
+							</div>,
 						] }
 					</BlockCrashBoundary>
 					{ shouldShowMobileToolbar && (

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

@@ -307,7 +307,7 @@
 	&.has-warning .editor-block-list__block-edit::after {
 		content: "";
 		position: absolute;
-		background-color: rgba($light-gray-100, 0.8);
+		background-color: rgba($light-gray-100, 0.4);
 
 		top: -$block-padding;
 		bottom: -$block-padding;
@@ -321,6 +321,14 @@
 		}
 	}
 
+	&.has-warning.is-selected .editor-block-list__block-edit::after {
+		bottom: ( $block-toolbar-height - $block-padding - $border-width );
+
+		@include break-small() {
+			bottom: -$block-padding;
+		}
+	}
+
 	// Appender
 	&.is-typing .editor-block-list__empty-block-inserter,
 	&.is-typing .editor-block-list__side-inserter {
@@ -1067,17 +1075,22 @@
 
 .editor-block-list__block .editor-warning {
 	z-index: z-index(".editor-warning");
-	position: absolute;
-	top: -$block-padding - $border-width;
-	right: -$parent-block-padding - $border-width;
-	left: -$parent-block-padding - $border-width;
+	position: relative;
 
-	// Position for nested blocks
+	// Stretch the warning edge to edge.
+	margin-left: -$parent-block-padding - $border-width;
+	margin-right: -$parent-block-padding - $border-width;
+
+	// Stretch the warning less in nested contexts.
 	.editor-block-list__block & {
-		right: -$block-padding - $border-width;
-		left: -$block-padding - $border-width;
+		margin-left: -$block-padding - $border-width;
+		margin-right: -$block-padding - $border-width;
 	}
 
+	// Pull the warning upwards to the edge, and add a negative bottom margin to compensate.
+	margin-bottom: -$block-padding - $border-width;
+	transform: translateY(-$block-padding - $border-width);
+
 	// Bigger padding on mobile where blocks are edge to edge.
 	padding: 10px $parent-block-padding;
 	@include break-small() {