From 851aec0790bc8db8e1865ba4fc6b9b50c19562da Mon Sep 17 00:00:00 2001
From: John <johng75@gmail.com>
Date: Thu, 13 Sep 2018 09:41:25 +0100
Subject: [PATCH] Block: fix invalid block scrim overflowing toolbar on mobile
 (#9473)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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.
---
 .../editor/src/components/block-list/block.js |  6 ++--
 .../src/components/block-list/style.scss      | 29 ++++++++++++++-----
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js
index f3ddfce46a625..2ff6c3dc272cf 100644
--- a/packages/editor/src/components/block-list/block.js
+++ b/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 && (
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index ed57874a06c98..f8ba61e2074e6 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/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() {