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.
WordPress · Aug 31, 2018 · 3a6e1f3 · 3a6e1f3
1 parent e00564d
commit 3a6e1f3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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;