PR 7866

edit-post/assets/stylesheets/_z-index.scss

@@ -10,7 +10,6 @@ $z-layers: (
 	'.editor-block-list__block {core/image aligned wide or fullwide}': 20,
 	'.freeform-toolbar': 10,
 	'.editor-block-list__breadcrumb': 1,
-	'.editor-warning': 1,
 	'.components-form-toggle__input': 1,
 	'.editor-inserter__tabs': 1,
 	'.editor-inserter__tab.is-active': 1,
@@ -21,6 +20,7 @@ $z-layers: (
 	'.components-popover__close': 5,
 	'.editor-block-list__insertion-point': 5,
 	'.editor-inserter-with-shortcuts': 5,
+	'.editor-warning': 6,
 	'.core-blocks-gallery-item__inline-menu': 20,
 	'.editor-url-input__suggestions': 30,
 	'.edit-post-header': 30,

editor/components/block-list/invalid-block-warning.js → editor/components/block-list/block-invalid-warning.js

@@ -15,7 +15,7 @@ import { withDispatch } from '@wordpress/data';
  */
 import Warning from '../warning';
 
-function InvalidBlockWarning( { convertToHTML, convertToBlocks } ) {
+function BlockInvalidWarning( { convertToHTML, convertToBlocks } ) {
 	const hasHTMLBlock = !! getBlockType( 'core/html' );
 
 	return (
@@ -26,12 +26,12 @@ function InvalidBlockWarning( { convertToHTML, convertToBlocks } ) {
 				</Button>,
 				hasHTMLBlock && (
 					<Button key="edit" onClick={ convertToHTML } isLarge isPrimary>
-						{ __( 'Edit as HTML' ) }
+						{ __( 'Keep as HTML' ) }
 					</Button>
 				),
 			] }
 		>
-			{ __( 'This block appears to have been modified externally.' ) }
+			{ __( 'This block has been modified externally.' ) }
 		</Warning>
 	);
 }
@@ -51,4 +51,4 @@ export default withDispatch( ( dispatch, { block } ) => {
 			} ) );
 		},
 	};
-} )( InvalidBlockWarning );
+} )( BlockInvalidWarning );

editor/components/block-list/block.js

@@ -36,7 +36,7 @@ import BlockEdit from '../block-edit';
 import BlockMover from '../block-mover';
 import BlockDropZone from '../block-drop-zone';
 import BlockSettingsMenu from '../block-settings-menu';
-import InvalidBlockWarning from './invalid-block-warning';
+import BlockInvalidWarning from './block-invalid-warning';
 import BlockCrashWarning from './block-crash-warning';
 import BlockCrashBoundary from './block-crash-boundary';
 import BlockHtml from './block-html';
@@ -546,7 +546,7 @@ export class BlockListBlock extends Component {
 							<div key="invalid-preview">
 								{ getSaveElement( blockType, block.attributes ) }
 							</div>,
-							<InvalidBlockWarning
+							<BlockInvalidWarning
 								key="invalid-warning"
 								block={ block }
 							/>,
@@ -558,8 +558,8 @@ export class BlockListBlock extends Component {
 							uid={ uid }
 						/>
 					) }
+					{ !! error && <BlockCrashWarning /> }
 				</IgnoreNestedEvents>
-				{ !! error && <BlockCrashWarning /> }
 				{ showEmptyBlockSideInserter && (
 					<Fragment>
 						<div className="editor-block-list__side-inserter">

editor/components/block-list/style.scss

@@ -40,7 +40,7 @@
 		left: 0;
 		visibility: hidden;
 
-		// use opacity to work in various editor styles
+		// Use opacity to work in various editor styles.
 		background-color: $dark-opacity-light-200;
 
 		.is-dark-theme & {
@@ -223,7 +223,7 @@
 	// Selected style
 	&.is-selected-parent > .editor-block-list__block-edit:before,
 	&.is-selected > .editor-block-list__block-edit:before {
-		// use opacity to work in various editor styles
+		// Use opacity to work in various editor styles.
 		outline: $border-width solid $dark-opacity-light-500;
 
 		.is-dark-theme & {
@@ -259,7 +259,7 @@
 	&.is-multi-selected .editor-block-list__block-edit:before {
 		background: $blue-medium-highlight;
 
-		// use opacity to work in various editor styles
+		// Use opacity to work in various editor styles.
 		mix-blend-mode: multiply;
 
 		// Collapse extra vertical padding on selection
@@ -281,23 +281,36 @@
 
 	// Warnings
 	 &.has-warning .editor-block-list__block-edit {
-		min-height: 250px;
-
 		> :not( .editor-warning ) {
 			pointer-events: none;
 			user-select: none;
 		}
 	}
 
+	&.has-warning:not( .is-hovered ) .editor-block-list__block-edit:before {
+		// Use opacity to work in various editor styles.
+		outline-color: $dark-opacity-light-500;
+
+		.is-dark-theme & {
+			outline-color: $light-opacity-light-500;
+		}
+	}
+
 	&.has-warning .editor-block-list__block-edit:after {
 		content: '';
 		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		background-color: rgba( $white, 0.6 );
-		background-image: linear-gradient( to bottom, transparent, $white );
+		background-color: rgba( $light-gray-100, .8 );
+
+		top: -$block-padding;
+		bottom: -$block-padding;
+		right: -$parent-block-padding;
+		left: -$parent-block-padding;
+
+		// Position for nested blocks
+		.editor-block-list__block & {
+			right: -$block-padding;
+			left: -$block-padding;
+		}
 	}
 
 	// Appender
@@ -314,7 +327,7 @@
 
 	// Shared blocks
 	&.is-shared > .editor-block-list__block-edit:before {
-		// use opacity to work in various editor styles
+		// Use opacity to work in various editor styles.
 		outline: $border-width dashed $dark-opacity-light-500;
 
 		.is-dark-theme & {

editor/components/warning/index.js

@@ -11,16 +11,19 @@ import './style.scss';
 function Warning( { actions, children } ) {
 	return (
 		<div className="editor-warning">
-			{ children }
-			{ Children.count( actions ) > 0 && (
-				<div className="editor-warning__actions">
-					{ Children.map( actions, ( action, i ) => (
-						<span key={ i } className="editor-warning__action">
-							{ action }
-						</span>
-					) ) }
-				</div>
-			) }
+			<div className="editor-warning__contents">
+				<p className="editor-warning__message">{ children }</p>
+
+				{ Children.count( actions ) > 0 && (
+					<div className="editor-warning__actions">
+						{ Children.map( actions, ( action, i ) => (
+							<span key={ i } className="editor-warning__action">
+								{ action }
+							</span>
+						) ) }
+					</div>
+				) }
+			</div>
 		</div>
 	);
 }

editor/components/warning/style.scss

@@ -1,27 +1,53 @@
-.editor-warning {
+.editor-block-list__block .editor-warning {
 	z-index: z-index( '.editor-warning' );
 	position: absolute;
-	top: 0;
+	top: -$block-padding - $border-width;
+	right: -$parent-block-padding - $border-width;
+	left: -$parent-block-padding - $border-width;
+
+	// Position for nested blocks
+	.editor-block-list__block & {
+		right: -$block-padding - $border-width;
+		left: -$block-padding - $border-width;
+	}
+
 	display: flex;
-	flex-direction: column;
-	justify-content: space-around;
-	align-items: center;
-	max-width: 780px;
-	width: calc( 100% - #{ $parent-block-padding * 2 + $block-padding * 2 } );
-	padding: 20px;
+	flex-direction: row;
+	justify-content: space-between;
+	flex-wrap: nowrap;
 	background-color: $white;
 	border: 1px solid $light-gray-500;
-	text-align: center;
-	line-height: $default-line-height;
-	font-family: $default-font;
-	font-size: $default-font-size;
-}
+	text-align: left;
 
-.editor-warning__actions {
-	display: flex;
-	margin-top: 20px;
-}
+	// Bigger padding on mobile where blocks are edge to edge.
+	padding: $block-padding $parent-block-padding 0 $parent-block-padding;
+	@include break-small() {
+		padding: $block-padding $block-padding 0 $block-padding;
+	}
+
+	.editor-warning__message {
+		line-height: $default-line-height;
+		font-family: $default-font;
+		font-size: $default-font-size;
+		margin: 0 0 $block-padding 0;
+	}
+
+	.editor-warning__contents {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		flex-wrap: wrap;
+		align-items: center;
+		width: 100%;
+	}
 
-.editor-warning__action {
-	margin: 0 #{ $item-spacing / 2 } 5px;
-}
+	.editor-warning__actions {
+		display: flex;
+		margin: 0 0 $block-padding 0;
+	}
+
+	.editor-warning__action {
+		margin: 0 6px 0 0;
+		margin-left: 0;
+	}
+}

editor/components/warning/test/__snapshots__/index.js.snap

@@ -4,6 +4,14 @@ exports[`Warning should match snapshot 1`] = `
 <div
   className="editor-warning"
 >
-  error
+  <div
+    className="editor-warning__contents"
+  >
+    <p
+      className="editor-warning__message"
+    >
+      error
+    </p>
+  </div>
 </div>
 `;