From 3a6e1f3397ef1e4066965ec690b1db8b5a3917bc Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Fri, 31 Aug 2018 13:05:57 +0200
Subject: [PATCH] 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.
---
 .../editor/src/components/block-list/block.js |  6 +++---
 .../src/components/block-list/style.scss      | 19 +++++++++----------
 .../editor/src/components/warning/style.scss  |  2 +-
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js
index 1001e9acb1e08..054e8b8d4c4eb 100644
--- a/packages/editor/src/components/block-list/block.js
+++ b/packages/editor/src/components/block-list/block.js
@@ -547,13 +547,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 31e5ba62fc0f3..d2d8f32a4dc3e 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -312,7 +312,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;
@@ -1080,16 +1080,15 @@
 
 .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
-	.editor-block-list__block & {
-		right: -$block-padding - $border-width;
-		left: -$block-padding - $border-width;
-	}
+	// Stretch the warning edge to edge.
+	margin-left: -$parent-block-padding;
+	margin-right: -$parent-block-padding;
+
+	// Pull the warning upwards to the edge, and add a negative bottom margin to compensate.
+	margin-bottom: -$block-padding;
+	transform: translateY(-$block-padding);
 
 	// Bigger padding on mobile where blocks are edge to edge.
 	padding: 10px $parent-block-padding;
diff --git a/packages/editor/src/components/warning/style.scss b/packages/editor/src/components/warning/style.scss
index 3fa9fa93be309..aa0b792b9e478 100644
--- a/packages/editor/src/components/warning/style.scss
+++ b/packages/editor/src/components/warning/style.scss
@@ -4,7 +4,7 @@
 	justify-content: space-between;
 	flex-wrap: nowrap;
 	background-color: $white;
-	border: $border-width solid $light-gray-500;
+	border-bottom: $border-width solid $light-gray-500;
 	text-align: left;
 	padding: 20px;